{"id":39148,"date":"2016-08-30T14:09:11","date_gmt":"2016-08-30T08:39:11","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=39148"},"modified":"2016-09-01T10:28:39","modified_gmt":"2016-09-01T04:58:39","slug":"create-partial-view-in-mvc-in-asp-net-and-integrate-as-a-reusable-component-in-umbraco-cms","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/create-partial-view-in-mvc-in-asp-net-and-integrate-as-a-reusable-component-in-umbraco-cms\/","title":{"rendered":"Create Partial View in MVC in Asp.Net and integrate as a reusable component in Umbraco CMS."},"content":{"rendered":"

What is Partial View in MVC: –<\/strong><\/p>\n

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

Step by step process to implement partial views in MVC in Asp.net and integrate with Umbraco<\/a> CMS in Asp.Net:-<\/p>\n

Given below partial view example will demonstrate to display contact list in Partial view as:-<\/p>\n

Step 1:- Inside Visual Studio add model as given below screen shots:-<\/strong><\/p>\n

A)<\/strong>\u00a0In\u00a0Solution Explorer of visual studio<\/strong>, <\/strong>right click on the\u00a0Models<\/em>\u00a0folder, select\u00a0<\/strong>Add<\/strong>, <\/strong>and then select\u00a0<\/strong>Class<\/strong>.<\/strong><\/p>\n

\"SImg1\"<\/p>\n

B)<\/strong>\u00a0Give appropriate name for the class as given below screen shot:-<\/p>\n

\"SImg2\"<\/p>\n

\u00a0 \u00a0 \u00a0 C)<\/strong>\u00a0Add the three properties to theContactFormViewModel class as in given below screen shot which is created as in above screen shot:<\/strong><\/p>\n

\"SImg3\"<\/p>\n

Step 2:- Add Partial View<\/strong><\/p>\n

A)<\/strong>\u00a0In\u00a0Solution Explorer of visual studio<\/strong>, <\/strong>right click on the\u00a0Views=>Partials<\/em> folder, select\u00a0<\/strong>Add<\/strong>,\u00a0<\/strong>and then select\u00a0<\/strong>View<\/strong>.<\/strong><\/p>\n

\"SImg4\"<\/p>\n

\u00a0 \u00a0 B)<\/strong>\u00a0Give appropriate name for the View , select Model class and checked create as a partial view checkbox as given below screen shot:-<\/p>\n

\"SImg5\"<\/p>\n

\u00a0 \u00a0 \u00a0 C)<\/strong>\u00a0Write the following HTML code using razor for displayingcontact list<\/p>\n

\"SImg6\"<\/p>\n

Step 3:- Add Controller with Umbraco CMS reference<\/strong><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0A)<\/b> Adding Umbraco CMS reference<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0In<\/span>\u00a0<\/b>Solution Explorer of visual studio<\/span>, <\/b>right click on the\u00a0Bin folder, select<\/span>\u00a0Manage NuGet Packages, <\/b>and then install Umbraco CMS reference<\/span>.<\/b><\/p>\n

\u00a0 \u00a0 \u00a0 B) <\/b><\/b>Adding Controller<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 1)<\/strong> \u00a0In<\/span>\u00a0<\/b>Solution Explorer of visual studio<\/span>, <\/b>right click on the\u00a0Controllers folder, select<\/span>\u00a0Add,\u00a0<\/b>and then select <\/span>Controller.<\/b><\/p>\n

 <\/p>\n

 <\/p>\n

\"SImg7\"<\/p>\n

2)<\/strong>\u00a0Give appropriate name for theController as given below screen shot:-<\/span><\/strong><\/p>\n

\"SImg8\"<\/p>\n

C)<\/strong>\u00a0Add action(method) in this controller:<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0This controller (ContactFormSurfaceController) inherited by surface controller class not controller class. And <\/span>this action return as partial view using following method.<\/span><\/strong><\/p>\n

PartialView(your view Name, Model Name)<\/b><\/strong><\/p>\n

\"SImg9\"<\/p>\n

Step 4:- Integrate this partial view component with umbraco CMS<\/b><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0First build this Project then add Project DLL in Umbraco bin folder and Partial view in Views=> Partial folder in umbraco CMS.<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 How to call Partial view in umbraco CMS Page ?<\/b><\/p>\n

\u00a0 \u00a0 A)<\/strong>\u00a0Call Partial View on your umbraco page<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0For calling partial view we will write following code on the umbraco page. <\/span><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0@Html.Action(Action Name,Controller Name)<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0For Example:-<\/b><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0@Html.Action(“ContactList”,”ContactFormSurface”)<\/span><\/strong><\/p>\n

\u00a0 \u00a0B)<\/strong>\u00a0Browse umbraco page in the browser and it will be showing contact list as below \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 screenshot<\/span><\/strong><\/p>\n

 <\/p>\n

\"SImg10\"<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":855,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":31},"categories":[1],"tags":[2222],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/39148"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/855"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=39148"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/39148\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=39148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=39148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=39148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}