如何将倍数和选择性模型传递到MVC剃刀局部视图中？

Question

This is pretty basic but stumbling block on picking up MVC (coming from Web Forms of course)!

If a _Layout.cshtml has an optional sidebar as a Partial View, how do you get the Controller to pass the ViewModel to it (say, BlogPosts ) without having to include it on all of the Controller's Page / View calls?

I appreciate the Controllers are where we need to construct Models (not inside Views, Partial or otherwise) and that any Partial View will inherit the Model from its parent (handy). But sometimes the parent page has its own ViewModel (eg. SearchResults ) - and although I could turn it around by passing the sidebar BlogPosts into every View and only adding the the SearchResults for that page, am still stuck with same problem - how to selectively pass potential and multiple Models into parent and partial Views.

So we could put any additional Models in the ViewBag and then pull them out in any Partials, and this maybe the best solution, but seems messy (and not sure if they'd remain strongly typed). Or is the solution to use an additional Partial View Controller? In which case how you do it, because I get a null Object on the foreach in _DefaultSideBar1.cshtml and debug shows that the additional _DefaultSideBar1() is not running at all (so not surprising it's model doesn't get injected):

Current example route in HomeController.cs :

[HttpGet]
    public ActionResult SearchResults(string searchText)
    {
        ViewBag.Title = "Search Results";
        List<WebResult> searchData = new List<WebResult>();
        // generate searchData etc...
        return View(searchData);
    }

Current SearchResults.cshtml (which uses a _Layout.cshtml ):

  @model IEnumerable<Bing.WebResult>
    // ... etc etc....
    @section DefaultSidebar1
    {
        @Html.Partial("_DefaultSidebar1")
    }

Anticipated additional current controller for sidebar which loads but not overridden in controller so with null Object Ref:

 [HttpGet]
    public ActionResult _DefaultSideBar1()
    {
        return View(db.BlogPosts.ToList());
    }

Current _DefaultSideBar1.cshtml :

  @model IEnumerable<Proj.MVC.SPQ.DataEntities.BlogPost>
    <ul>
        @foreach (var item in Model)
        {
            <li>@Html.ActionLink(item.Title, "Details", new { id=item.ID })</li>
        }
    </ul>

Answer 1

This call

@Html.Partial("_DefaultSidebar1")

renders the view with the specified name and with no model (or rather with null for a model). That is why you get null reference. If you want to render it and have some model available, the correct way to call it is

@Html.Partial("_DefaultSidebar1", theModel)

Of course that assumes the model is available on the parent view, most likely as a part of parent view's model.

If you, on the other hand, would like to render part of a view a results of some action execution, you can use this:

@Html.RenderAction("_DefaultSidebar1", "ControllerName")

of course ControllerName is optional here. This will call your _DefaultSidebar1 action, rather than just view, and render what result this action produces.

Answer 2

Don't get stuck thinking your controller needs to be a work horse for everything.

Remember what we're doing here; building an HTML page. A rendered HTML page can have multiple < form > elements. With CSS, they can be all over the place...if you wanted that.

Each partial view can have it's own:

@using (Html.BeginForm("action", "controller", new { routeValue = Model.Id }, FormMethod.Get|FormMethod.Post))

Therefor, separate the concerns of each area of your HTML page into different controllers that understand that data.

One might be:

public class ClientController : Controller

Another might be

public class AddressController : Controller

or even the very important...

public class WaffleController : Controller

You might want to have children, and I can't help you there, but your objects might want children, so you just pass that portion of the model to a partial view only concerned with that.

I have a page with partial views and view components that display multiple models in one HTML page. All are focused on the data they know and each are plug and play - they each load their own JS and asynchronously get the updates they need in response to user input, not affecting a whole page refresh.

Each view has it's own JS file for it's own work.

for example, my address controller always autofills the fields for the user to help them:

$(function() {

var urlGeoIeoip = "http://ip-api.com/json/?callback=?";

$.ajax({
    url: urlGeoIeoip,
    type: "GET",
    dataType: "json",
    timeout: 5000,
    success: function (geoipdata) {

        $("#Address_City").data("kendoComboBox").value(geoipdata.city);
        $("#Address_State").data("kendoComboBox").value(geoipdata.regionName);
        $("#Address_Country").data("kendoComboBox").value(geoipdata.country);

    }
}).fail(function(xhr, status) {
    if (status === "timeout") {
        // log timeout here
    }
});
});

But note that you can call your controller with the URL as well:

   url: 'Address/Validate',

And submit the form like this:

   data: $form.serialize()

And return json data to work with directly in JS by returning JsonResult:

public class AddressController : MyBaseController
{
    public JsonResult Validate(Address model)
    {
         //validate logic!      
         return Json(model, JsonRequestBehavior.AllowGet);
    }
}

To do that, you'll need a helper for the JS bundle loader for a partial view:

public static class ScriptBundleManager
{

    private const string Key = "__ScriptBundleManager__";

    /// <summary>
    /// Call this method from your partials and register your script bundle.
    /// </summary>
    public static void Register(this HtmlHelper htmlHelper, string scriptBundleName)
    {
        //using a HashSet to avoid duplicate scripts.
        var set = htmlHelper.ViewContext.HttpContext.Items[Key] as HashSet<string>;
        if (set == null)
        {
            set = new HashSet<string>();
            htmlHelper.ViewContext.HttpContext.Items[Key] = set;
        }

        if (!set.Contains(scriptBundleName))
            set.Add(scriptBundleName);
    }

    /// <summary>
    /// In the bottom of your HTML document, most likely in the Layout file call this method.
    /// </summary>
    public static IHtmlString RenderScripts(this HtmlHelper htmlHelper)
    {
        var set = htmlHelper.ViewContext.HttpContext.Items[Key] as HashSet<string>;

        return set != null ? Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\"></script>", set.ToArray()) : MvcHtmlString.Empty;
    }


}

I have this in the App_Code directory

I call it like:

@Html.RenderScripts()

in my _Layout.cshtml