How to use Angular JS ng-include functionality to load partial view in ASP.Net MVC


Tarun Kumar Chatterjee
.Net – Technology Specialist
Published On :   01 Dec 2015
Visit Count
Today :  11    Total :   7716



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

Categories