SharePoint Pals
 | Sign In
How to use Angular JS ng-include functionality to load partial view in ASP.Net MVC
by Tarun Kumar Chatterjee 1 Dec 2015
Author
.Net – Technology Specialist
Visits   
Today  :   4     Total  :    6825

In my earlier article, I explained how can we load partial views by using ng-View functionality within the main view. Now, in this artifact I will explain you about the another option to load the Partial views within the main view. Not only the view even we can load static & dynamic page template using Angular ng-include. Let’s see how it would be :

First, we will open Visual Studio 2013 & then click on New Project.

clip_image002

Select Web -> ASP.NET Web Application then provide a name & then click on OK.

clip_image003

Add a Controller named as “HomeController” & within the controller we will have a method named as “Template”, which will load the partial view based on the client input. “HomeController” code will be as follows:

 using System;  using System.Collections.Generic;  using System.Linq;  using System.Web;  using System.Web.Mvc;    namespace AngularDemo_ng_Include.Controllers  {   public class HomeController : Controller   {   //   // GET: /Home/   public ActionResult Index()   {   return View();   }   public ActionResult Template(string id)   {   switch (id.ToLower())   {   case "firstpage":   return PartialView("~/Views/Home/FirstPage.cshtml");   case "secondpage":   return PartialView("~/Views/Home/SecondPage.cshtml");   default:   throw new Exception("template not known");   }   }     }  }  

Then add a view named as Index.chtml which will have 3 sections.

1. Dynamic Template 1 : Based on the selected url from dropdown it will invoke HomeController’s Template method and load the partial view

2. Dynamic Template 2: At the time of initial load it will invoke HomeController Template method and load the partial view

3. Static Template : Based on the selected url from dropdown it will load ng-template view ( define within Index.chtml) within the main view

 @{   ViewBag.Title = "Index";   Layout = "~/Views/Shared/_Layout.cshtml";  }    <h2>Index</h2>    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  <body >       <div ng-app="AppModule">   @*Dynamic Template 1*@   <div ng-controller="DynamicTemplate1">   <table cellpadding="5" cellspacing="6" width="100%" style="background-color:none; border:solid 4px black;">   <tr>   <select ng-model="urlPage" ng-options="p.url for p in Urls">   <option value="">(Empty)</option>   </select>   <td><div ng-include="urlPage.url"></div></td>   </tr>   </table>   </div>   <br/>   @*Dynamic template 2*@   <div>   <table cellpadding="5" cellspacing="6" width="100%" style="background-color:none; border:solid 4px black;">   <tr>   <td>   <div ng-include="'Home/template/firstpage'"></div>   </td>   </tr>   </table>   </div>   <br />     @*Static Template*@   <div>   <div ng-controller="DynamicTemplate2">   <select ng-model="tempPage" ng-options="p.temp for p in templatePages">   <option value="">(Empty)</option>   </select>     <div ng-include="tempPage.url">   </div>   </div>     <script type="text/ng-template" id="firstPage.html">   <div>   <table cellpadding="5" cellspacing="6" width="100%" style="background-color:none; border:solid 4px black;">   <tr>   <td>   Hey Tarun!! You are on First template   </td>   </tr>   <tr>   <td>   {{tempPage.temp}} : {{tempPage.url}}   </td>   </tr>   </table>   </div>   </script>     <script type="text/ng-template" id="secondPage.html">   <div>   <table cellpadding="5" cellspacing="6" width="100%" style="background-color:none; border:solid 4px black;">   <tr>   <td>   Hey Tarun!! You are on Second template   </td>   </tr>   <tr>   <td>   {{tempPage.temp}} : {{tempPage.url}}   </td>   </tr>   </table>   </div>   </script>   </div>   </div>    </body>  

Now, we will have to take Angular JS references. So, go to Package manager console and execute the below command to install Angular JS package to your solution.

PM> Install-Package angularjs

In RouteConfig add the following code

 routes.MapRoute(   name: "Default",   url: "{controller}/{action}/{id}",   defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }   );  

Next, create a Partial view named as “FirstPage.chtml” with the following code:

 @{   ViewBag.Title = "FirstPage";   Layout = "~/Views/Shared/_Layout.cshtml";  }    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  <body data-ng-app="ApplicationModule">   <div>   <div>   <div>   <table cellpadding="5" cellspacing="6" width="100%" style="background-color:none; border:solid 4px black;">   <tr>   <td>This is My First Page</td>   </tr>   </table>   </div>     </div>    </body>  

Create another Partial view named as “SecondPage.chtml” with the following code:

 @{   ViewBag.Title = "FirstPage";   Layout = "~/Views/Shared/_Layout.cshtml";  }    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  <body data-ng-app="ApplicationModule">   <div>   <div>   <div>   <table cellpadding="5" cellspacing="6" width="100%" style="background-color:none; border:solid 4px black;">   <tr>   <td>This is My second Page</td>   </tr>   </table>   </div>     </div>    </body>  

Next, we will have to add Custom script named as “MyScript.js” with the following code

 var app = angular.module("AppModule",[]);    app.controller("DynamicTemplate1", function ($scope) {   $scope.Urls =   [{ id:1, url: 'Home/template/firstpage' }   , { id:2,url: 'Home/template/secondpage' }];   $scope.tempPage = $scope.Urls[1];  });  app.controller("DynamicTemplate2", function ($scope) {   $scope.templatePages =   [{ temp: 'firstPage.html', url: 'firstPage.html' }   , { temp: 'secondPage.html', url: 'secondPage.html' }];   $scope.tempPage = $scope.templatePages[1];  });  

Rebuild the application and run. The initial output will be like:

clip_image005

Now select the value from dropdown and the partial view will be loaded accordingly.

clip_image007

Happy Coding

Tarun Kumar Chatterjee

blog comments powered by Disqus

SharePoint Pals

Pals
SharePoint Pals, a community portal for SharePoint developers, Administrators and End Users. Let's join hands and share the point together.
Read this on mobile

Training

Angular Js Training In Chennai
Advanced Angular Js training with real world developer scenarios
Angular Js, Web Api and Ionic for .Net Developers
All in one client side application development for .Net developers
Angular Js For SharePoint Developers
Get ready for the future. Its no more just C#

Get Connected

SharePoint Resources

SharePoint 2013 and 2010 Web Parts
Free Web Parts with Source Code for SharePoint Community




SharePoint 2013 Books and Tutorials
Collection of free SharePoint 2013 books and tutorials (eBooks, pdfs)

Supported By

Contribute your article and be eligible for a one month Free Subscription for Plural Sight. The Author of the most popular New Article (published in the previous month) will be awarded with a Free One month Plural Sight Subscription. Article can be sent to articles@sharepointpals.com in a word document.

Related Resources

Recent Tweets

Twitter January 15, 00:25
How To Enable Target Value And Actual Value In #D3 Gauge Chart https://t.co/VxSi4QnNrC

Twitter January 15, 00:24
How To Open #SharePoint List Hyperlink Column In Modal #Popup Window https://t.co/EQ7HkoZDkX

Twitter January 15, 00:24
Quick Introduction To #Asp.NetCore And It’s Features https://t.co/zAXObHCFpH

Twitter January 15, 00:22
How To Configure #PerformancePoint Services To Use Secure Store In #SharePoint 2013 https://t.co/LEwnUoI7EY

Twitter January 15, 00:21
How To Block Or Disable #Office365 Services https://t.co/Yvp2VPFIRP

Follow us @SharePointPals
Note: For Customization and Configuration, CheckOutRecent Tweets Documentation