AngularJS With ASP.NET MVC

               AngularJS With ASP.NET MVC

 
                                        What is Angularjs ?


AngularJS is a framework for creating dynamic web application. Using AngularJS  we can create single page dynamic web application. AngularJS provides feature for data binding in HTML page. AngularJS code is unit testable. AngularJS provides developers options to write client side application in a MVC way.

The following is directives which is used in AngulerJs :

• ng-app: It is entry point of AngularJS to the page. It shows that the application is AngularJS app.
• ng-controller:  It attaches to view to defines which controller is used.
• ng-repeat: It creates loop in view like foreach loop.
• module: It is use retrieve all angular module.
• $http: It is HttpRequest object for requesting external data.
• $http.get: It reads json data. It takes parameter url.

     Here we are explain how insert operation can be perform using Angularjs with mvc using sql server database with store procedure

Step 1 : Create mvc web aplication

Step 2 : Create database like following tbEmployee table

Step 3 :Now Create Store procedure for insert Employee data

ALTER PROCEDURE [dbo].[SP_InsertEmployee]
@EmpID int,
@Name nvarchar(20),
@City nvarchar(20),
@Phone nvarchar(20)

AS
BEGIN
insert into tbEmployee(Name,City,Phone)values(@Name,@City,@Phone);

END

Step 4: Now Create controller and create JsonResult  Method to insert data to database

        public ActionResult AddEmployee()
        {
              return View();
        }

        public JsonResult AddEmployee1(BAL.Employee emp)
        {
            if (emp != null)
            {
                string st = string.Empty;
                con.Open();
                SqlCommand cmd = new SqlCommand("SP_InsertEmployee", con);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.Add("@EmpID", SqlDbType.Int);
                cmd.Parameters.Add("@Name", SqlDbType.NVarChar);
                cmd.Parameters.Add("@City", SqlDbType.NVarChar);
                cmd.Parameters.Add("@Phone", SqlDbType.NVarChar);

                cmd.Parameters["@EmpID"].Value = 0;
                cmd.Parameters["@Name"].Value = emp.Name;
                cmd.Parameters["@City"].Value = emp.City;
                cmd.Parameters["@Phone"].Value = emp.Phone;
                cmd.ExecuteNonQuery();
                con.Close();
                st = "success";
               return Json(st,JsonRequestBehavior.AllowGet) ;

            }
            else
            {
                return Json("fail", JsonRequestBehavior.AllowGet);
            }
        }

Step 5 : Now Create Modul.js  file and add following code to call the controller,using this service data can be transfer between controller to view and database.

var app = angular.module("HomeApp",[]);

app.controller("EmployeeController", function ($scope, $http) {
    $scope.btntext = "Save";
    $scope.Savedata = function () {
        $http({
            method: 'post',
            url: '/Employee/AddEmployee1',
            data:$scope.register
        }).success(function (d) {
            $scope.register = null;
            alert(d);
        }).error(function () { alert('Failed');})

    }

})

Step 6 : Now add Employee.cshtml  view and add AngularJs Plugin for calling the Angular services at Head tag of html as following.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>

<script src="/AngularScript/Module.js"></script>

<div ng-app="HomeApp" ng-controller="EmployeeController">
    <div class="divList">
        <p><b><i>Register Employee</i></b></p>
    </div>
    <table class="table">
        <tr>
            <td>Name</td>
            <td>
                <input type="text" ng-model="register.Name" />
            </td>
        </tr>
        <tr>
            <td>City</td>
            <td>
                <input type="text" ng-model="register.City" />
            </td>
        </tr>
        <tr>
            <td>Phone</td>
            <td>
                <input type="text" ng-model="register.Phone" />
            </td>

        </tr>
        <tr>
            <td>Action</td>

            <td>
                <input type="button" class="btn btn-default" value="Submit" ng-click="Savedata()" />
            </td>
        </tr>
    </table>

</div>

Step 7 : Now run project And view the result

Register Employee

Name
City
Phone
Action

Note :

If need this project code than comment below with your Email Id, so we are able to sent above project code



See Other Tutorial :

* AngularJS CRUD Operation : Select Insert Edit Update and Delete using AngularJS in ASP.Net MVC

*  AngularJS With ASP.NET MVC

*  Convert Rows to columns using 'Pivot' in SQL Server

*  Mvc Registration page With user exist using Ajax method

*  MVC 4 How to Perform Insert Update Delete Edit Select Operation

*  MVC4 Edit,update,Delete,cancel inside gridview using sql database

*  MVC 4 Gridview To Display Data Using SQL Server Database With Simple code

*  Login page in asp.net Mvc4 Web application

*  Mvc4 How to bind Dropdown List using Sql Database

* Gridview find control in asp.net

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email