Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>My advice, go with Option 1. I use that with all of my Main View/Multiple Partial View scenarios. It's easy to maintain as each partial has it's own ViewModel. It keeps the whole thing nice and clean</p> <p>I use the exact same setup like so:</p> <pre><code>public class MainViewModel { public Partial1ViewModel Partial1 [ get; set; } public Partial2ViewModel Partial2 [ get; set; } public Partial3ViewModel Partial3 { get; set; } public Partial4ViewModel Partial4 { get; set; } public MainViewModel() {} public MainViewModel() { Partial1 = new Partial1ViewModel(); Partial2 = new Partial2ViewModel(); Partial3 = new Partial3ViewModel(); Partial4 = new Partial4ViewModel(); } } </code></pre> <p>Each <code>PartialViewXViewModel</code> is it's own ViewModel and if need be can be reused in another view.</p> <p>Your Action that renders can look like so:</p> <pre><code>public ActionResult Index { var model = new MainViewModel(); return View(model); } </code></pre> <p>Your View</p> <pre><code>@model MainViewModel &lt;div&gt; {@Html.RenderPartial("PartialOne", Model.Partial1)} &lt;/div&gt; &lt;div&gt; {@Html.RenderPartial("PartialTwo", Model.Partial2)} &lt;/div&gt; &lt;div&gt; {@Html.RenderPartial("PartialThree", Model.Partial3)} &lt;/div&gt; &lt;div&gt; {@Html.RenderPartial("PartialFour", Model.Partial4)} &lt;/div&gt; </code></pre> <p>Define the UI for each <code>PartialX</code> like:</p> <pre><code>@model Partial1ViewModel //view html here </code></pre> <p>Now, each Partial view html and each model that they use can be used anywhere. </p> <p>The great part is now if you have a page that needs only 2 of these you just create a new <code>ViewModel</code> to represent that specific view like so:</p> <pre><code>public class OtherMainViewModel { public Partial2ViewModel Partial2 [ get; set; } public Partial4ViewModel Partial4 { get; set; } public OtherMainViewModel() {} public OtherMainViewModel() { Partial2 = new Partial2ViewModel(); Partial4 = new Partial4ViewModel(); } } </code></pre> <p>And use it in another view like so:</p> <pre><code>public ActionResult SomeOtherAction { var model = new OtherMainViewModel(); return View(model); } </code></pre> <p>And that's perfectly acceptable and also the preferred design strategy in MVC, to have ViewModels that specifically represent what a view needs and only what it needs.</p> <p>You may want to use a different method for populating your models tho. Most here would recommend using Automapper. Either way, the above just initializes the PartialViewXModels in the constructor of the MainViewModel. That won't necessarily be your case if you are populating those models with data from your DB. You would want your own strategy for that. This would work here:</p> <pre><code>public ActionResult Index { var model = new MainViewModel(); model.Partial1 = GetPartial1Data(); // this method would return Partial1ViewModel instance model.Partial2 = GetPartial2Data(); // same as above for Partial2ViewModel ... return View(model); } </code></pre> <p>This all would just get you started with the design, you can tweak it to your hearts content :-)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload