ساخت DropDown List آبشاری در MVC توسط AngularJS
چهارشنبه 27 اسفند 1393در این مقاله یاد خواهید گرفت که چگونه توسط 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>
حالا میتوانید برنامه خود را اجرا کنید.
- ASP.net MVC
- 2k بازدید
- 3 تشکر