jQuery – load partial view

We have learned about get and post requests in jQuery with .Net. In earlier posts we have returned simple string from controller’s action method to our page, but we can send html also or a partial view from the same action method.

Partial view may be an html section without any data-binding or we can bind that partial view with a view-model and then return from our action method. In this post we will use a blank partial view and partial view with model binding. A partial view can directly be loaded on the page if we want that always and not on any action.

Let’s create a partial view in our project in Views->Home folder. Just right click on the mentioned folder and add view, then select ‘Create as partial view’ checkbox and provide name ‘_partialview1’. Write below html section into that partial view.

<div class="row">
    <div class="col-md-12">
        this is partial view
    </div>
</div>

Load partial view directly on the page:

<partial name="_partialview1"/> // just use this line where you want that partial view
<partial name="_partialview1" model="@Model"/> // pass the model if you need to bind that partial view with model

We can use this partial view anywhere we want like create a partial view as a list item. Create an action that is returning a list of categories on the page.

public IActionResult Requests()
{
       var lstCategory = new List<CategoryModel>();
       lstCategory.Add(new CategoryModel() { id = 1, name = "jQuery" });
       lstCategory.Add(new CategoryModel() { id = 2, name = "JavaScript" });
       lstCategory.Add(new CategoryModel() { id = 3, name = "c# .net" });
       lstCategory.Add(new CategoryModel() { id = 4, name = "React" });
       return View(lstCategory);
}
//this is our category model class defined in our model folder
public class CategoryModel
    {
        public int id { get; set; }
        public string name { get; set; }
    }

On the cshtml page specify the model of that category model on the top and in the html, use a foreach loop. In this loop load our partial view with the category model passed as a model like below:

@model List<WebModules.Models.CategoryModel>

<div class="text-center">
    <h2>Categories</h2>
    @foreach (var category in Model)
    {
        <partial name="_partialview1" model="@category" />
    }
</div>

Change our partial view’s html code as below in which we have specified the model on the top and bind the text from the category.

@model WebModules.Models.CategoryModel

<div class="row">
    <div class="col-md-12">
        @Model.name
    </div>
</div>

Run the .Net application and go to this page all the four categories’ names are on the screen with center aligned as in below screenshot.

In our next post we will load this partial view from server side on http request.