2

I am currently working on an MVC 3 Web app project where I need to display a lot of information on the front page. I am relatively new at web page layout and design so I have hit a wall in terms of how to structure the code behind for this page.

My first thoughts were to split the page (View) up into as many pages (small Views) as possible so the View Models are smaller and easier to manage. Although I am not sure if this is the correct way of going about it. Or should I try to fit all the needs of the page into one view that will display all the information I need?

mhd
  • 416
  • 5
  • 16
  • your question touches many aspects of OO programming. In short it's dependent on your situation but generally the purpose we split big objects/views into small object/views is to make code reusable, easy to maintain, easy to understand, easy to test.. – Larry May 30 '14 at 13:36
  • Why write code twice? If something is reusable then when not make it so? – David Sherret May 30 '14 at 13:45
  • I agree with everything @Larry and can add the following. On the current system I'm working on some screens are just to complex to build everything into one view. I opted to break them into smaller pices so they are easier to maintain, it's always easier to understand what a view is doing when it's small and it fits into one screen, it becomes very difficult to understand something if you constantly have to browse up and down. – 3dd May 30 '14 at 13:46
  • @3dd thats i m planning to do. Did you use partial view or what? how did you build many views into one view in MVC Razor? – mhd May 30 '14 at 14:01
  • Yes I used partial views and then rendered them by calling `@Html.Partial("ViewName", Model)` inside of the main view – 3dd May 30 '14 at 14:05
  • @3dd thank you, but using @Html.Partial("ViewName", Model) means calling the method ViewName defined in the controller. So go back to the server side instead of staying in the client side. Is there any way to stay in the client side and call CHILDREN views? – mhd May 30 '14 at 14:18
  • No you're mistaken, these views are all created on the server side, so when my view renders, it'll call `@Html.Partial()` and this all happens server side – 3dd May 30 '14 at 15:05

3 Answers3

2

You will get a number of benefits from splitting a large view object into smaller views, primarily reusability, testability and the fact you won't have to do it (inevitably) two months from now.

Using smaller views will first give you the ability to reuse those views in other parts of the project (there should be an "if necessary", but the chances are fairly high that you will). Using a single view gives you no such flexibility.

Smaller views will also be simpler to conceptualize (a concise, properly-named view will save you the time to read through its one-hundred lines), to maintain (you can isolate bugs, and feature changes to each view without affecting others) and to test (in time, complexity and dependency injection).

You do not gain anything by using a single, humongous view (well, perhaps a couple of minutes of development), yet what you miss in the long (and short) period, is substantial.

To use several smaller views in MVC3 you can use partial views inside the main view,

<div>
  @Html.Partial("_PartialView", new PartialViewModel)
</div>
rae1
  • 5,952
  • 3
  • 24
  • 46
  • How to perform that with Mvc3 Razor? Is it performed via Partial View? How to build many views into one view? – mhd May 30 '14 at 14:08
  • Yes, you can use partial views; every view can be a partial, it just depends on how you incorporate it into the main view. – rae1 May 30 '14 at 14:10
  • Thank you, but using Partial View means calling their methods defined in the controller (_PartialView()). So go back to the server side instead of staying in the client side. Is there any way to stay in the client side and call CHILDREN views: Small views are built into the main view directly without calling controller methods? – mhd May 30 '14 at 14:21
  • I think you are mistaken: using `@Html.Partial` does not call an action on a controller, it simply generates a string based on the view name, the model and the view data. If you look at [the implementation](http://stackoverflow.com/a/10211703/1250033) at no point does it routes to the controller. – rae1 May 30 '14 at 14:42
  • now i see thank you @rae1 http://stackoverflow.com/questions/16886585/html-partial-skips-the-controller-action – mhd May 30 '14 at 14:54
  • how can i call partial view in this context: i have a TabPanel in the main view and i want to display the partial view into the TabPanel. `TabPanel lowerPanel = new TabPanel { Title = "Lower Panel", Region = Region.South, Height = Unit.Pixel(300), MaxHeight = 500, MinHeight = 100, Split = true, Collapsible = true, Items = { // display partial view here }};` – mhd May 30 '14 at 19:04
2

Yes, splitting up a large view into partial views can be positive even if you know for certain the partial views will not be reused. If your large view is conceptually divided into sections, then it makes sense to split up the view accordingly. These sections may not be apparent in a large view file with tons of nested div tags. Of course, find the right balance. A partial view for every div tag would be overkill. :)

@{
    Layout = "~/Views/Shared/_Layout.cshtml"
}

<div id="page">
    @Html.Partial("Top")
    @Html.Partial("Middle")    
    @Html.Partial("Bottom")        
</div>
James Lawruk
  • 26,651
  • 19
  • 117
  • 128
1

This gets the good old answer of "it depends" :)

If different parts of the front page could be used in other places, it would make sense to break it up into several logical partial views. But, if not, there is no reason to break it all up. You should simply construct a nicely designed view model.

Short of knowing more details, maybe something like this very crude example:

public class FrontPageViewModel
{
    public Section1Model section1 { get; set; }
    public Section2Model section2 { get; set; }
    public Section3Model section3 { get; set; }
    public Section4Model section4 { get; set; }
}

... where your section models are built with the logical properties

public class Section1Model
{
    public string Property1 { get; set; }
    public string Property2 { get; set; }
    public string Property3 { get; set; }
}

public class Section2Model
{
    public string Property1 { get; set; }
    public string Property2 { get; set; }
    public string Property3 { get; set; }
    public string Property4 { get; set; }
    public string Property5 { get; set; }
}
// etc.

Then in your view you could do this:

<div id="section1Content">
    @Html.DisplayFor(m => m.section1)
</div>
<div id="section2Content">
    @Html.DisplayFor(m => m.section2)
</div>
<!-- etc. -->
M.Ob
  • 1,683
  • 14
  • 23
  • 1
    Different parts of the view will not be used again, but the current view is so complex. So i want to define many views for each part of the page and built them all into one view at the end – mhd May 30 '14 at 14:02
  • Right, so instead of using "Views", you can build your viewmodel from complex classes which describe each "part" of the main view and then in your main view use display templates (one for each class representing a "part"), and have everything cleanly separated as I showed in my answer. Does that make sense? Partial views are for creating reusable views (which you didn't want), DisplayTemplates are for keeping your code neat and organized (among other things) – M.Ob May 30 '14 at 17:43