Mahedee Hasan

Mahedee Hasan

I am a Microsoft MVP (9th times), programmer, software developer, software architect, consultant, author, researcher, technical blogger, technical speaker, trainer and learner. I have more than 15 years experience in the field of software design and development.

Introduction To AngularJs And Bootstrap In ASP.NET Web Form

2 minute read

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="AngularWeb.Site" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head 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">
        <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.

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('studentInfo', [
  { id: 1, name: 'Mahedee Hasan', credit:20, semester: '8th' },
  { id: 2, name: 'Enamul Haque', credit: 15, semester: '7th' },
  { id: 2, name: 'Arefin Billah', credit: 15, semester: '6th' },
  { id: 3, name: 'Zahid Hasan', credit: 12, semester: '7th' }
]);

studentCtrl.js

app.controller('studentsCtrl', function ($scope, studentInfo) {
    $scope.studentInfo = studentInfo;
});

App.js for just declaring application module, data.js for hardcoded data by javascript and studentCtrl.js is the main angular controller.

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.


<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularWeb.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 studentInfo">
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
            </tr>
        </table>
    </div>
</asp:Content>

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 code. Now just run the application and you will get following output. Happy programming.

Source code

You May Also Enjoy