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.
Select Web -> ASP.NET Web Application then provide a name & then click on OK.
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:
Now select the value from dropdown and the partial view will be loaded accordingly.
Happy Coding
Tarun Kumar Chatterjee
Leave a comment