Web Programming TutorialsLearn Partial View in MVC razor view engine

Learn Partial View in MVC razor view engine

Partial Views

Hi all, in last topic we learned how to create simple mvc application, today we are going to learn about partial view in mvc razor view engine.

What is Partial View
Like in asp.net we use user control in mvc we use partial views means if you want to reuse your or you want some common functionality to display in different view then we use partial views. Partial view is like a normal regular view with file extension .cshtml.

Advantages of MVC
1) Reusable. Easy to reuse it in different views.
2) Easy to implement, modify.

Now let’s learn how to create simple partial view

1) First step is open visual studio, then click on file->new->project.
2) Pop up will open re-name project to mvcdemo and click ok.
1

3) After clicking another pop up will open select internet application and view engine as razor and click on ok.
2

4) Project is created. Delete all the files in Model, View and Controller folder. Also delete Filter Folder.
3

5) No add new class file under Models folder and rename it to DemoModel and paste below code in it.

public class DemoModel
    {
        public string HelloText { get; set; }
        public Employee EmpObj;
        
    }
    public class Employee
    {
        public string EmployeeName { get; set; }
        public string EmployeeAddress { get; set; }
        public string EmployeePhone { get; set; }

    }

4

6) Now right click on Controller folder and add controller and rename it to HomeController and paste below code in it.

public ActionResult Index()
        {
            MvcApplication1.Models.DemoModel obj = new Models.DemoModel();
            obj.HelloText = "Hello User !!!";
            obj.EmpObj = new Models.Employee();
            obj.EmpObj.EmployeeAddress = "#Address";
            obj.EmpObj.EmployeeName = "EmpName";
            obj.EmpObj.EmployeePhone = "0000000000";
            return View(obj);
        }
        public ActionResult _EmployeePartial()
        {
            MvcApplication1.Models.Employee obj = new Models.Employee();            
           
            obj.EmployeeAddress = "#Address";
            obj.EmployeeName = "EmpName";
            obj.EmployeePhone = "0000000000";
            return PartialView(obj);
        }

5

Learn HTML5 Programming For Beginners

7) Now create Home folder under view folder and then right click on home folder and add view and rename it to Index view and check check box create a strongly typed view and select DemoModel and paste below code in it.

@model MvcApplication1.Models.DemoModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div>
    @Model.HelloText
</div>
<br />
/******************<b>Partial</b>******************************/
<div style="color:green">
@Html.Partial("_EmployeePartial", Model.EmpObj)
</div>
/*****************<b>RenderPartial</b>************************/
<div style="color:red">
@{Html.RenderPartial("_EmployeePartial", Model.EmpObj);}
</div>
/******************<b>RenderAction</b>***********************/
<div style="color:blue">
@{Html.RenderAction("_EmployeePartial");}
</div>

6

7

8) Now again right click on home folder and add view and rename it to _EmployeePartial and check check box create a strongly typed view and select employee model and check check box create a partial view and paste below code in it.
8

@model MvcApplication1.Models.Employee

<div><b>Name</b>: @Model.EmployeeName</div><br />
<div><b>Phone No</b>: @Model.EmployeePhone</div><br />
<div><b>Address</b>: @Model.EmployeeAddress</div>

9

9) Now you are all done run the website and see the out put.
10

What is difference between Partial, RenderPartial, RenderAction methods

Partial

@Html.Partial("_EmployeePartial", Model.EmpObj)

Html.Partial method return the string output, you can put out put into the variable and manipulate it if required.

RenderPartial

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

Html.Partial method will directly written to the http response stream

RenderAction

@{Html.RenderAction("_EmployeePartial");}

If you want to call action method of partial view then you can use Html.RenderAction method

Summary: In above example we have learnt how to create simple partial view in asp.net using razor view engine.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -