Create Partial View in MVC in Asp.Net and integrate as a reusable component in Umbraco CMS.

What is Partial View in MVC: –

Partial view is same as a user control in Web Form application in Asp.Net .So it can be reused with in multiple views in MVC. Partial Views are special views which render a portion of View content.

Step by step process to implement partial views in MVC in Asp.net and integrate with Umbraco CMS in Asp.Net:-

Given below partial view example will demonstrate to display contact list in Partial view as:-

Step 1:- Inside Visual Studio add model as given below screen shots:-

A) In Solution Explorer of visual studio, right click on the Models folder, select Add, and then select Class.

B) Give appropriate name for the class as given below screen shot:-

      C) Add the three properties to theContactFormViewModel class as in given below screen shot which is created as in above screen shot:

Step 2:- Add Partial View

A) In Solution Explorer of visual studio, right click on the Views=>Partials folder, select Add, and then select View.

    B) Give appropriate name for the View , select Model class and checked create as a partial view checkbox as given below screen shot:-

      C) Write the following HTML code using razor for displayingcontact list

Step 3:- Add Controller with Umbraco CMS reference

       A) Adding Umbraco CMS reference

           In Solution Explorer of visual studio, right click on the Bin folder, select Manage NuGet Packages, and then install Umbraco CMS reference.

      B) Adding Controller

          1)  In Solution Explorer of visual studio, right click on the Controllers folder, select Add, and then select Controller.

2) Give appropriate name for theController as given below screen shot:-

C) Add action(method) in this controller:

         This controller (ContactFormSurfaceController) inherited by surface controller class not controller class. And this action return as partial view using following method.

PartialView(your view Name, Model Name)

Step 4:- Integrate this partial view component with umbraco CMS

         First build this Project then add Project DLL in Umbraco bin folder and Partial view in Views=> Partial folder in umbraco CMS.

          How to call Partial view in umbraco CMS Page ?

    A) Call Partial View on your umbraco page

                 For calling partial view we will write following code on the umbraco page.

                 @Html.Action(Action Name,Controller Name)

           For Example:-

               @Html.Action(“ContactList”,”ContactFormSurface”)

   B) Browse umbraco page in the browser and it will be showing contact list as below                             screenshot