Partial page updates in MVC

In this article I will review 3 ways of rendering partial views:

1)  The most basic form is rendering static html using Html.RenderPartial.  For example below the content of StaticView.cshtml is rendered onto the page:

@{ Html.RenderPartial("StaticView"); }

2)  Another way is to use Html.RenderAction to render an action that returns a partial view. For example:
In .cshtml razor you may have:
@{Html.RenderAction("ShowPartialProduct", "Product");} 

and in the C# server side code you would have an action method:
        public PartialViewResult ShowPartialProduct()
        {
            _logger.Log("hello ShowPartialProduct");
           CompanyProduct prody = (CompanyProduct)  db.products.Take(1).ToList()[0];
            return PartialView("_PartialView", prody);
        }

Notice that the method returns the content of _PartialView.cshtml. So the content o the .cshtml gets rendered right away on the page that issues Html.RenderAction.


3) Another way is to use Ajax.ActionLink HTML helper. the content of the partial view will be displayed after a user clicks on an ajax enabled link.

But first, you need to install jquery unobtrusive ajax package. In the Nuget Package Manager Console issue:
Install-Package Microsoft.jQuery.Unobtrusive.Ajax


Then in your .cshtml (razor file) would be like the following:

@Ajax.ActionLink("New Products", 
                 "ShowPartialProduct", 
                 new AjaxOptions
                 {
                     UpdateTargetId = "CustomerList", 
                     InsertionMode = InsertionMode.Replace, 
                     HttpMethod = "GET" 
                 })



Your .cshtml file will contain an element such as a div that has the "CustomerList"target  id specified above:

You server side code should have an action method nmed "ShowPartialProduct" as specified above:

        public PartialViewResult ShowPartialProduct()
        {
            _logger.Log("hello ShowPartialProduct");
           CompanyProduct prody = (CompanyProduct)  db.products.Take(1).ToList()[0];
            return PartialView("_PartialView", prody);
        }


So when the user clicks on "New Products" the content of _PartialView.cshtml will be displayed.

Notice that a partial view is being returned. The _PartialView.cshtml should reside in the Views folder. It may be as follows:

@model AsyncWithScaffold.Models.CompanyProduct

@Html.LabelFor(model => model.Desc)
@Html.DisplayFor(model => model.Desc)