Retrieving A Collection Of Objects With Page Methods And AngularJS In ASP.NET Web Form
Page Methods are asp.net web form feature. It is an easy way to communicate with the server. You can communicate with server using Page Methods and can do anything you like but mind it is not restful form of communication. In this solution I used visual studio 2012 and bootstrap. So let’s start to retrieve a collection of objects with Page Methods and AngularJS in ASP.NET web forms.
Step 1: Create a ASP.NET Web Forms Application
- Open visual studio, Got to File->New->Project
- Select Template -> Visual C# -> Web -> ASP.NET Empty web application, set location and click OK
Step 2: Install required packages
Run the following command in Package Manager Console (Tools->Library Package Manager->Package Manager Console) to install required package. Make sure your internet connection is enabled.
PM> Install-Package AngularJS.Core
PM> Install-Package AngularJS.Resource
PM> Install-Package bootstrap
Step 3: Design the Master Page
Add required references for bootstrap and AngularJS and design master page using bootstrap as follows. You can use theme. For details visit the article Easy way to design web layout by bootstrap theme
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebMathodAngular.Site" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ASP.NET with Angular</a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
</ul>
</div>
</div>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"></asp:ScriptManager>
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-resource.min.js"></script>
<script src="scripts/app/app.js"></script>
<script src="scripts/app/data.js"></script>
<script src="scripts/app/studentsCtrl.js"></script>
</body>
</html>
Here you must see that I used the reference of app.js, data.js. studentCtrl.js which are not defined yet. Soon, I will create those files. Another thing that you must set EnablePageMethod=”True”
Step 4: Create Application module, data and angular controller
Create app.js, data.js and studentCtrl.js in scripts -> app folder. Content are given below.
app.js
var app = angular.module('app', ['ngResource']);
data.js
app.value('pageMethods', PageMethods);
app.factory('student', function (pageMethods, $rootScope) {
var result = [];
pageMethods.GetStudent(function (data) {
data.forEach(function (item) {
result.push({ id: item.Id, name: item.Name, semester: item.Semester, credits: item.Credits});
});
$rootScope.$apply();
});
return result;
})
studentCtrl.js
app.controller('studentsCtrl', function ($scope, student) {
$scope.student = student;
});
Here, App.js for just declaring application module, data.js for retrieving data using Page Methods and studentCtrl.js is the main angular controller. You must see, in data.js I have declare pageMethods and call a Page Method name “GetStudent”. This is not yet defines. I will create this method in next Step.
Step 4: Create a Page for View
- Create a page name Default.aspx, just right click on the application -> Add -> New item -> Web form using master page. Select Master page and type page name as Default.aspx. Now modify the page as follows.
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebMathodAngular
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static List<Student> GetStudent()
{
List<Student> lstStudents = new List<Student>()
{
new Student { Id= 1, Name= "Mahedee Hasan", Semester="5th", Credits= 15},
new Student { Id= 2, Name= "Robiul Alam", Semester="4th", Credits= 20},
new Student { Id= 3, Name= "Amit Karmaker", Semester="7th", Credits= 12 },
new Student { Id= 4, Name= "Zahid Hasan", Semester="8th", Credits= 18},
new Student { Id= 5, Name= "Shafiqul Islam", Semester="6th", Credits= 15},
};
return lstStudents;
}
}
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public string Semester { get; set; }
public int Credits { get; set; }
}
}
In Deafult.aspx.cs file, you must see, I have created a Page Method which is annoted by WebMethod. This method returns a list of Students object.
Default.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebMathodAngular.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="container" ng-controller="studentsCtrl" ng-app="app">
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Credit</th>
<th>Semester</th>
</tr>
</thead>
<tr ng-repeat="student in student">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
</asp:Content>
Look at the page, here I have added ng-controller, ng-app and ng-repeat. If you have little idea about angularJs, you must understand it. Now just run the application and see the output. I need to download required packages to run the application.