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 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" %>





    

    
    

    
    


    
    

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 GetStudent()
        {
            List lstStudents = new List()
                {
				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" %>




    
Id Name Credit Semester
{{student.id}} {{student.name}} {{student.credits}} {{student.semester}}

Look at the page, here I add ng-controller and ng-app and ng-repeat. If you have little idea about angularJs, you must understand the page. Now just run the application and you will get following output.

Output

*If you don’t clear in any portion or any suggestion, please leave your comment here. To run the application download required packages.

Please share, if it is helpfulShare on FacebookShare on LinkedInTweet about this on TwitterShare on Google+Email this to someonePrint this page

3 thoughts on “Retrieving a collection of objects with page methods and AngularJS in ASP.NET Web form

  1. ayuf says:

    What is the difference between using the pagemethods and angularjs calling using $http?is it the right way to develop the application or need to use the web api with web project which is the best solution for developing the web application?

  2. fraz says:

    hi,

    i wonder how can i get list of products from database based on category id

    app.factory(‘category’, function (pageMethods, $rootScope) {
    var result = [];
    pageMethods.GetCategory(function (data) {
    data.forEach(function (item) {
    result.push({ id: item.Id, name: item.Name});
    });
    $rootScope.$apply();
    });
    return result;
    })

    app.factory(‘products’, function (pageMethods, $rootScope) {
    var result = [];
    pageMethods.GetProductsByCategory(CategoryId,function (data) {
    data.forEach(function (item) {
    result.push({ id: item.Id, name: item.Name});
    });
    $rootScope.$apply();
    });
    return result;
    })
    how to call on category click and pass the id to function and show result in product list.
    category id =?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>