Part-19: User Registration & Insert semester Info using AngularJS in ASP.NET MVC

11/16/2021 9:31:39 AM

In this post, I will show User Registration & Trimester Info Insert using AngularJS in ASP.NET MVC JavaScript JQUERY. Here I will cover the UX design user interface using bootstrap and insert receive form data using jquery angularjs and passing this data to server and save this data using store procedure. Fetch json data using jquery and angularjs.

Steps:

Step-1:

Design UserRegistration.cshtml Page for User Insert.
Go to Solution Explorer > VIEWS Folder>UserInfo Folder> in this page with writing the below code.


<div ng-app="ABCApp" ng-controller="UserInfoController" >
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">User Registration</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../UserInfo/UserRegistrationList">List View</a></li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">


                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>
                                User Name</label>
                                <input type="text" ng-model="UserDAO.UserName" class="form-control" />
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>
                                Login Name</label>
                                <input type="text" ng-model="UserDAO.LoginName" class="form-control" />
                        </div>
                    </div>
                </div>


                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>
                                Password</label>
                                <input type="text" ng-model="UserDAO.Password" class="form-control" />
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Active Status</label>
                            <select class="form-control" ng-model="UserDAO.UserType">
                                <option value="Admin">Admin </option>
                                <option value="Student">Student </option>

                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Active Status</label>
                            <select class="form-control" ng-model="UserDAO.ActiveStatus">
                                <option value="true">Active </option>
                                <option value="false">Inactive </option>

                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-3">
                        <input type="button" ng-click="SaveData()" class="btn btn-primary" value="{{btnSaveTextBatch}}" />
                    </div>
                </div>



            </div>
        </section>
    </div>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/AngularController/UserInfoControllerJS.js"></script>

Step-2:

For insert data UserInfoControllerJS.js Add Some codes.
Go to Solution Explorer > Scripts Folder.> AngularController Folder> ‘UserInfoControllerJS.js’>in this JS file with writing the below code.

 $scope.btnSaveTextBatch = "Save"; 
 $scope.SaveData = function () {

        if ($scope.btnSaveTextBatch == "Save") {
            $scope.btnSaveTextBatch = "Saving.....";
            $http({
                method: 'POST',
                url: '/UserInfo/Save_Info',
                data: $scope.UserDAO
            }).success(function (a) {
                $scope.btnSaveTextBatch = "Save";
                $scope.UserDAO = null;
                alert(a);
            }).error(function () {
                alert("Faild");
            });
        }
    }

Step-3:

Add Save_Info() JsonResult UserInfoController.cs Controller.
Go to Solution Explorer > Controllers Folder > UserInfoController.css with writing the below code.

        public JsonResult Save_Info(UserDAO aDao)
        {
            string Mes = "";
            try
            {
                aDal.AddNewInfoDAL(aDao);
                Mes = "Operation Successful!!";
            }
            catch (Exception e)
            {
                Mes = "Operation Faild!!";
            }
            return Json(Mes, JsonRequestBehavior.AllowGet);
        }

Step-4:

Add AddNewInfoDAL() in UserInfoDAL.css class.
Go to Solution Explorer > DAL Folder > UserInfoDAL.css Class with writing the below code.

        public void AddNewInfoDAL(UserDAO aDao)
        {
            SqlCommand com = new SqlCommand("sp_Insert_User", conn);
            com.CommandType = CommandType.StoredProcedure;
             com.Parameters.AddWithValue("@LoginName", aDao.LoginName);
             com.Parameters.AddWithValue("@UserName", aDao.UserName);
             com.Parameters.AddWithValue("@Password", aDao.Password);
             com.Parameters.AddWithValue("@UserType", aDao.UserType);
             com.Parameters.AddWithValue("@ActiveStatus", aDao.ActiveStatus);
            conn.Open();
            com.ExecuteNonQuery();
            conn.Close();
        }

Step-5:

Create store Procedure for Course Get One Record.
Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_Insert_User with writing the below code.

create PROCEDURE [dbo].[sp_Insert_User]
	-- Add the parameters for the stored procedure here
	 @UserName nvarchar(500)=null ,
	 @LoginName nvarchar(500)=null ,

	 @Password nvarchar(500)=null ,
	 @UserType nvarchar(500)=null ,
	 @ActiveStatus nvarchar(500)=null 
 
AS
BEGIN
	INSERT INTO [dbo].[tblUser]
           ([UserName]
           ,[LoginName]
           ,[Password]
           ,[UserType]
      
           ,[ActiveStatus])
     VALUES
           (@UserName 
           ,@LoginName 
           ,@Password 
           ,@UserType 
           
           ,@ActiveStatus)
 
END

# Trimester Info Insert

Step-6:

Add Controller TrimesterInfoController.cs.
Go to Solution Explorer > Controllers Folder> Add > Controller> Select MVC 5 Controller-Empty> Click ‘Add’ button> Give Controller Name ’ TrimesterInfoController’ > in this controller with writing the below code.

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

In the TrimesterEntry() Action Result Mouse right button Select Add View > Click Add Button> TrimesterEntry.cshtml page has been created.

Step-7:

Design TrimesterEntry.cshtml Page for Trimester Insert.
Go to Solution Explorer > VIEWS Folder> TrimesterInfo Folder> in this page with writing the below code.



<div ng-app="ABCApp" ng-controller="TrimesterInfoController">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Trimester Info</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Batch/ListView">List View</a></li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">


                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Trimeste Name</label>
                            <input type="text" ng-model="TrimesterDAO.TrimesterInfoName" class="form-control" />
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-3">
                        <input type="button" ng-click="SaveData()" class="btn btn-primary" value="{{btnSaveTextBatch}}" />
                    </div>
                </div>



            </div>
        </section>
    </div>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/AngularController/TrimesterInfoControllerJS.js"></script>

Step-8:

Add SaveData() Function in TrimesterInfoControllerJS.js.
Go to Solution Explorer > Scripts Folder.> AngularController Folder> ‘TrimesterInfoControllerJS.js’> for Insert Trimester Information with writing the below code.

var MyApp = angular.module("ABCApp", []);
MyApp.controller("TrimesterInfoController", function($scope, $http) {
    $scope.btnSaveTextBatch = "Save";
    $scope.SaveData = function () {

        if ($scope.btnSaveTextBatch == "Save") {
            $scope.btnSaveTextBatch = "Saving.....";
            $http({
                method: 'POST',
                url: '/TrimesterInfo/Save_Info',
                data: $scope.TrimesterDAO
            }).success(function(a) {
                $scope.btnSaveTextBatch = "Save";
                $scope.TrimesterDAO = null;
                alert(a);
            }).error(function() {
                alert("Faild");
            });
        } 
    };
});

Step-9:

Add Save_Info() JsonResult TrimesterInfoController.cs Controller.

        public JsonResult Save_Info(TrimesterDAO aDao)
        {
            string Mes = "";
            try
            {
                aDal.AddNewInfoDAL(aDao);
                Mes = "Operation Successful!!";
            }
            catch (Exception e)
            {
                Mes = "Operation Faild!!";
            }
            return Json(Mes, JsonRequestBehavior.AllowGet);
        }

Step-10:

Add AddNewInfoDAL() in TrimesterInfoDAL.css class.
Go to Solution Explorer > DAL Folder > TrimesterInfoDAL.css Class with writing the below code.

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);

        public void AddNewInfoDAL(TrimesterDAO aDao)
        {
            SqlCommand com = new SqlCommand("sp_Insert_TrimesterInfo", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@TrimesterInfoName", aDao.TrimesterInfoName);
            conn.Open();
            com.ExecuteNonQuery();
            conn.Close();
        }

Step-11:

Create store Procedure for Course Get One Record.
Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_Insert_TrimesterInfo with writing the below code.

create PROCEDURE [dbo].[sp_Insert_TrimesterInfo]
	-- Add the parameters for the stored procedure here
	 @TrimesterInfoName nvarchar(500)=null 
	 
AS
BEGIN
	-- SET NOCOUNT ON added to prevent extra result sets from
	INSERT INTO [dbo].tblTrimesterInfo
           (TrimesterInfoName)
     VALUES
           (@TrimesterInfoName)
END

Step-12:

Create TrimesterDAO.cs Class.
Go to Solution Explorer > DAO Folder> create TrimesterDAO> in this class with writing the below code.

public class TrimesterDAO
    {
        public int TrimesterInfoId { get; set; }
        public string SL { get; set; }
        public string TrimesterInfoName { get; set; }
    }

Step-13: Run Application.

About Teacher

Reza Karim

Software Engineer

More about him

Comments

Save Reset

{{data.CreatedOn}} {{data.ProfileName}}

reply

{{item.CreatedOn}} {{item.ProfileName}}

SMS-27: Student profile create and browse profile using Store procedure AngularJS Jquery ASP.NET

SMS-28: Student Result show by search trimester and myasp server registration and login using Jquery & Angular js in ASP.NET MVC

SMS-26: Student Marks list show by search student name and trimester Jquery & Angular js in ASP.NET MVC

SMS-25: Student Course Mark multiple data save using jquery with Stored Procedure & Angular js in ASP.NET MVC

0 Comments

AngularJS

27 Articles