How to bind model data to partial view

We created StudentList view in the view section, which display all the student information as shown below.

binding model data to partial view

Now, instead of creating view for student list we can create the partial view for it, so that it can be useful in many other views just to display student's information. For example, we can use same partial view, which list all the students of particular standard or students of same age etc. We can create partial view for the following parts:

binding model data to partial view

To create a partial view, right click on Shared folder -> select Add -> click on View..

Add partial view
Note : If partial view will be shared with multiple views then create it in Shared folder otherwise you can create the partial view in the same folder where it is going to be used.

In the Add View dialogue, enter View name. Select scaffolding template List because we are going to create view to display multiple students' information. Select Student model class and also check "Create as a partial view" checkbox and click Add.

binding model data to partial view

This will create _StudentList.cshtml as shown below.

_StudentList Partial view:

@model IEnumerable<MVC_BasicTutorials.Models.Student>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.StudentName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.StudentName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
            @Html.ActionLink("Details", "Details", new { id=item.StudentId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.StudentId })
        </td>
    </tr>
}

</table>

We have removed following action link in auto generated code as we don't want to display "Create New" link in every view.

Razor Syntax:
<p>
    @Html.ActionLink("Create New", "Create")
</p>

Now, we can render _StudentList partial view by using Html.Partial(), Html.RenderPartial or Html.RenderAction method.

Let's use this _StudentList partial view in Index view.

Index action method in Studentcontroller passes IList<student> as shown below.

StudentController

public class StudentController : Controller
{
    IList<Student> studentList;

    public StudentController()
    {
        students = new List<Student>{ 
                        new Student() { StudentId = 1, StudentName = "John", Age = 18 } ,
                        new Student() { StudentId = 2, StudentName = "Steve",  Age = 21 } ,
                        new Student() { StudentId = 3, StudentName = "Bill",  Age = 25 } ,
                        new Student() { StudentId = 4, StudentName = "Ram" , Age = 20 } ,
                        new Student() { StudentId = 5, StudentName = "Ron" , Age = 31 } ,
                        new Student() { StudentId = 6, StudentName = "Chris",  Age = 17 } ,
                        new Student() { StudentId = 7, StudentName = "Rob",Age = 19  } ,
                    };

    }
    // GET: Student
    public ActionResult Index()
    {
            
        return View(students);
    }
}

Partial():

The following Index.cshtml view renders _StudentList partial view using Html.Partial() method.

Partial():

@model IEnumerable<MVC_BasicTutorials.Models.Student>

<h3>Student List</h3>
<p>
    @Html.ActionLink("Create New", "Create")
</p>

@Html.Partial("_StudentList", Model)

As you can see in the above code, First parameter of Partial method specifies partial view name and second parameter is model object.

RenderPartial():

The following Index.cshtml view render _StudentList partial view using Html.RenderPartial() method.

RenderPartial():

@model IEnumerable<MVC_BasicTutorials.Models.Student>

<h3>Student List</h3>
<p>
    @Html.ActionLink("Create New", "Create")
</p>

@{
    Html.RenderPartial("_StudentList", Model);
}

RenderAction():

RenderAction method invokes the specified child action method and renders the result in the parent view.

To render partial view using RenderAction method, you need to create action method in StudentController class. So create StudentList action method as shown below.

RenderAction:

public class StudentController : Controller
{
    IList<Student> students;

    public StudentController()
    {
        students = new List<Student>{ 
                        new Student() { StudentId = 1, StudentName = "John", Age = 18 } ,
                        new Student() { StudentId = 2, StudentName = "Steve",  Age = 21 } ,
                        new Student() { StudentId = 3, StudentName = "Bill",  Age = 25 } ,
                        new Student() { StudentId = 4, StudentName = "Ram" , Age = 20 } ,
                        new Student() { StudentId = 5, StudentName = "Ron" , Age = 31 } ,
                        new Student() { StudentId = 6, StudentName = "Chris",  Age = 17 } ,
                        new Student() { StudentId = 7, StudentName = "Rob",Age = 19  } ,
                    };

    }
    // GET: Student
    public ActionResult Index()
    {
        return View();
    }


    [ChildActionOnly]
    public ActionResult StudentList()
    {
        return PartialView(students);
    }
}

StudentList action method is marked with ChildActionOnly attribute, so that it will be invoke as child action from view, not directly from the URL. Also, notice that StudentList action method injects IList so we don't need to inject model in Index method.

The following Index.cshtml uses RenderAction method to render _StudentList partial view.

Index.cshtml:

<h3>Student List</h3>
<p>
    @Html.ActionLink("Create New", "Create")
</p>

@{
    Html.RenderAction("StudentList", "Student");
}

Thus, you can render partial view by multiple ways.