در این مقاله یاد خواهید گرفت که چگونه توسط AngularJS در MVC یک DropDown List بسازید

 قبل از شروع یک نکته لازم به ذکر است که بهترین روش آموزش ، آموزش به صورت تصویری می باشد و این مقاله برای کسانی می باشد که با mvc  آشنایی داشته باشند تصاویر کاملا واضح و گویا هستند و از توضیحات اضافی پرهیز شده و مثال هم در کنار پروژه برای دانلود قرار دارد.

ساخت DropDown List آبشاری در MVC توسط AngularJS

برنامه vs خود را باز کنید و  مسیر زیر  را طی کنید:

"File" -> "New" -> "Project...".

پس از ایجاد پروژه باید رفرنس های AngularJS را اضافه کنیم برای انجام این کار در پنجره Solution Explorer  روی نام پروژه کلیک راست کرده و Manage NuGet Packages.را انتخاب کنید:

در سمت راست باید Angularjs  را جستجو کنید :

پس از پیدا شدن باید روی دکمه install  کلیک کنید تا به پروژه اضافه شود:

زمانی که نصب به درستی انجام شود تصویر زیر را مشاهده خواهید کرد:

حال نوبت به اضافه کردن مدل entity  به پروژه فرا می رسد رو پوشه Model  کلیک راست کنید سپس گزینه Add و بعد گزینه ADO.NET Entity Data Model  را انتخاب کنید:

مراحل اضافه کردن مدل را به صورت گام به گام از طریق تصویر آموزش خواهیم داد :

'این گزینه برای ساخت مدل از روی پایگاه داده استفاده میشود.حال باید تنظیمات اتصال به پایگاه داده و انتخاب نام پایگاه داده را انجام دهیم :

چک باکس آخر بیانگر این است که رشته اتصال شما در فایل web.Config  ذخیره شود یا خیر

در این قسمت جداول و ویو ها و روال ها را میتوانید انتخاب کنیدکه در این مثال همانطور که مشاهده میکنید سه جدول انتخاب شده اند چک باکس اول برای رعایت کردن اسم جمع می باشد  یعنی اگر شما جدولی به اسم  Person داشته باشید اگر این گزینه را انتخاب کنید نام جدولتان در مدل entity  به  people  تغییر خواهد کرد گزینه دوم برای ارتباط جداول با یکدیگر می باشد و گزینه سوم برای اضافه کردن روال ها و توابع است

بعد از انتخاب دکمه finish  مدل شما به شکل زیر خواهد شد:

حال روی پوشه کنترلر کلیک راست کنید و یک کنترل جدید از نوع empty  ایجاد کنید در ابتدا یک شی از روی مدل entity  خود بسازید  سپس متد زیر را برای بدست آوردن اسامی کشورها از پایگاه داده بنویسید:

 public JsonResult GetCountry()  
        {  
            var CountryList = db.Country.ToList();  
            return this.Json(CountryList, JsonRequestBehavior.AllowGet);  
        }   

حال زمانی که یک کشور انتخاب میشود برای بدست آوردن زیر مجموعه هایش باید برای متد بالا را در حالت post  بنویسیم:

        [HttpPost]  
        public JsonResult GetStates(int CountryID)  
        {  
            var StateList = db.State.Where(m => m.CountryID == CountryID).ToList();  
  
            return this.Json(StateList);  
        }   

پس کد کامل کنترلر به شکل زیر خواهد شد:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
using CascadingDropDownInMVC4WithAngularJS.Models;  
  
namespace CascadingDropDownInMVC4WithAngularJS.Controllers  
{  
    public class EmployeeController : Controller  
    {  
      EmployeeManagementEntities db=new EmployeeManagementEntities();  
  
        public ActionResult Index()  
        {  
            return View();  
        }  
                  
        public JsonResult GetCountry()  
        {  
            var CountryList = db.Country.ToList();  
            return this.Json(CountryList, JsonRequestBehavior.AllowGet);  
        }  
  
        [HttpPost]  
        public JsonResult GetStates(int CountryID)  
        {  
            var StateList = db.State.Where(m => m.CountryID == CountryID).ToList();  
  
            return this.Json(StateList);  
        }  
    }  
} 

برای متد index  یک ویو بسازید روی تابع index  کلیک راست کرده و گزینه add view  را انتخاب کنید در بالای ویو باید رفرنس angular  را به ویو خود اختصاص بدهیم سپس نیاز به یک اسکریپت برای تعامل با کنترلر داریم که شامل دو حالت می باشد یکی get  که نام کشور ها را بازیابی می کند و دیگر post مه زیر مجموعه های مربوط به آن کشور می آورد:

    @Scripts.Render("~/Scripts/angular.min.js")  
      
    <script type="text/javascript">  
        //Module  
        var myApp = angular.module('myApp', []);  
      
        //Controller  
        myApp.controller('MainCtrl', ['$scope', '$http',  
            function ($scope, $http) {  
                //$http service for Getting the Country  
                $http({  
                    method: 'GET',  
                    url: '/Employee/GetCountry'  
                }).  
                success(function (data) {  
                    $scope.country = data;  
                });  
      
                //$http service for getting States  
                $scope.GetStates = function () {  
                    if ($scope.countr) {  
                        $http({  
                            method: 'POST',  
                            url: '/Employee/GetStates/',  
                            data: JSON.stringify({ CountryID: $scope.countr })  
                        }).  
                        success(function (data) {  
                            $scope.states = data;  
                        });  
                    }  
                    else {  
                        $scope.cities = null;  
                    }  
                }  
            }]);  
    </script>  
      
    <div data-ng-app="myApp">  
        <div data-ng-controller="MainCtrl">  
            <div class="editor-label">  
                <label>Name</label>  
            </div>  
            <div class="editor-field">  
                @Html.TextBox("Name")  
            </div>  
            <div class="editor-label">  
                <label>Country</label><br />  
            </div>  
            <div class="editor-field">  
                <select data-ng-model="countr"  
                    data-ng-options="c.CountryID as c.CountryName for c in country"  
                    data-ng-change="GetStates()">  
                    <option value="">--Select Country--</option>  
                </select><br />  
            </div>  
            <div class="editor-label"><br />  
                <label>State</label><br />  
            </div>  
            <div class="editor-field">  
                <select data-ng-model="state" data-ng-disabled="!states"  
                    data-ng-options="s.StateID as s.StateName for s in states">  
                    <option value="">--Select State--</option>  
                </select>  
            </div>  
      
      
        </div>  
    </div>  

حالا میتوانید برنامه خود را اجرا کنید.