This tutorial will help you to learn Cascading Dropdownlist Batch and Section Using ASP.NET MVC JQUERY AngularJS Javascript.

Steps:

Step-1:

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

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

• In the CourseListView() Action Result Mouse right button Select Add View > Click Add Button> CourseListView.cshtml  page has been created.
• Add Another Action result CourseEntry() with writing the below code.

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

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

Step-2:

• Modify   CourseEntry.cshtml page with writing the below code.

<div ng-app="ABCApp" ng-controller="CourseController" data-ng-init="GetOneRecord(@Convert.ToInt32(Request.QueryString["MasterId"]))">
    <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">Course Entry </h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Course/CourseListView">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>Batch Name</label>
                            <select class="form-control" ng-model="CourseDAO.BatchId" ng-change="LoadSectionByBatchID(CourseDAO.BatchId)">
                                <option ng-repeat="e in Batch" value="{{e.BatchId}}">{{e.BatchName}}</option>
                            </select>
                        </div>
                    </div>
                </div>


                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Section Name</label>
                            <select class="form-control" ng-model="CourseDAO.SectionId">
                                <option ng-repeat="e in Section" value="{{e.SectionId}}">{{e.SectionName}}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Course Name</label>
                            <input type="text" ng-model="CourseDAO.CourseName" 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="{{btnSaveTextCo}}" />
                    </div>
                </div>



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

<script src="~/Scripts/AngularController/CourseControllerJS.js"></script>

Step-3:

• Add ddlLoadBatch() JsonResult for Batch Name in  CourseController.cs.
• Go to Solution Explorer > Controllers Folder> CourseController>  in this controller with writing the below code.

        public JsonResult ddlLoadBatch()
        {
            DataSet ds = aDal.BatchDDLLoadDAL();
            List<BatchDAO> lists = new List<BatchDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new BatchDAO
                {
                    BatchId = Convert.ToInt32(dr["BatchId"]),

                    BatchName = (dr["BatchName"].ToString())
                });
            }

            return Json(lists, JsonRequestBehavior.AllowGet);
         }

Step-4:

• Create  CourseDAL.cs  class.
• Go to Solution Explorer > DAL Folder > CourseDAL.cs  Class with writing the below code.

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

        public DataSet BatchDDLLoadDAL()
        {
            SqlCommand com = new SqlCommand("sp_BatchDDLLoad", conn);
            com.CommandType = CommandType.StoredProcedure;
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet dss = new DataSet();
            da.Fill(dss);
            return dss;
        }

Step-5:

• Create CourseControllerJS.js file.
• Go to Solution Explorer > Scripts Folder.> AngularController Folder> Create   ‘CourseControllerJS.js> for   Batch Name Load    with writing the below code.

    $http.get("/Course/ddlLoadBatch").then(function (d) {
        $scope.Batch = d.data;
    }, function (error) {
        alert("Faild");
    });
    });

• When you select Batch Name dropdownlist then Section name will be loaded from the database against Batch Name.

Step-6:

• Add ddlLoadSectonbyBatchID() JsonResult for section Name in  CourseController.cs.
• Go to Solution Explorer > Controllers Folder> CourseController>  in this controller with writing the below code.

        public JsonResult ddlLoadSectonbyBatchID(int BatchId)
        {
            DataSet ds = aDal.SectionByBathIdDDLLoadDAL(BatchId);
            List<SectionDAO> lists = new List<SectionDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new SectionDAO
                {
                    SectionId = Convert.ToInt32(dr["SectionId"]),
                    SectionName = (dr["SectionName"].ToString())

                });
            }
            return Json(lists, JsonRequestBehavior.AllowGet);
        }

Step-7:

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

    public class SectionDAO
    {
        public int SectionId { get; set; }
        public string SL { get; set; }
        public string SectionName { get; set; }
        public int BatchId { get; set; }
        public string BatchName { get; set; }
    }

Step-8:

• Add SectionByBathIdDDLLoadDAL() in  CourseDAL.cs  class.
• Go to Solution Explorer > DAL Folder > CourseDAL.cs  Class with writing the below code.

        public DataSet SectionByBathIdDDLLoadDAL(int BatchId)
        {
            SqlCommand com = new SqlCommand("sp_SectionByBatchIdDDLLoad", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@BatchId", BatchId);
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet dss = new DataSet();
            da.Fill(dss);
            return dss;
        }

Step-9:

• Create store Procedure for Section Name.
• Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_SectionByBatchIdDDLLoad with writing the below code.

create proc [dbo].[sp_SectionByBatchIdDDLLoad]
@BatchId int 
as 
begin

select SectionId,SectionName from  tblSection where  BatchId=@BatchId  order by SectionName
end

Step-10:

• In  CourseControllerJS.js  add LoadSectionByBatchID Function.
• Go to Solution Explorer > Scripts Folder > CourseControllerJS.js  with writing the below code.

      $scope.LoadSectionByBatchID = function(BatchId) {
        $http.get("/Course/ddlLoadSectonbyBatchID?BatchId=" + BatchId).then(function(d) {
            $scope.Section = d.data;
        }, function(error) {
            alert("Faild");
        });
    }; 

Step-11: Run Application.