ما بیشتر وقت ها نیاز به پر کردن DropDownList به وسیله Json Data درASP.net MVC داریم.بنابراین و با توجه به نیاز بالا من تصمیم به نوشتن این مقاله گرفتم. اجازه بدید تا گام به گام خلق کردن یک برنامه MVC ساده را یاد بگیریم. با من همراه باشید …
پر کردن DropDownList
گام ۱:ساختن یک برنامه MVC
- ”Start” ،سپس “ALL Programs” و انتخاب کنید “Microsoft Visual Studio 2015”
- ”File” ،سپس “New” وکلیک “Project” سپس انتخاب , “ASP.Net Web Application Template” سپس اسم برای پروژه گذاشته و سپس OK کنید.
- گزینه MVC Empty Application را انتخاب کنید و سپس Ok کنید.
گام ۲:اضافه کردن Model Class
بر روی model فولدر پروژه MVC ساخته شده ، کلیک راست کنید و فایل کلاس به نام EmpModel.cs را اضافه کنید و دو کلاس مانند زیر خلق میکنیم:
using System.ComponentModel.DataAnnotations
namespace BindDropDownListUsingJSON.Models
{
//Model property to the dropdownlist to get selected value
public class EmpModel
{
[Display(Name = "Select City")]
public string City { get; set; }
}
//to bind list of records to dropdownlist
public class DDLOptions
{
public int Id { get; set; }
public string CityName { get; set; }
}
}
گام ۳:اضافه کردن Control Class
بر روی فولدر Control در برنامه MVC ، راست کلیک کنید، یک کلاس به اسم Home یا هر چیزی که میخواهید به صورت زیر ایجاد کنید.
حالا بعد از انتخاب کردن Control Template , بر روی دکمه Add کلیک کنید ، سپس پنجره زیر (شکل) ظاهر می شود.
به Control اسم اختصاص دهید و بر روی دکمه add کلیک کنید،حالا فایل HomeController.cs باز کرده و کد زیر را در Home Controller Class به صورت زیر بنویسید:
using BindDropDownListUsingJSON.Models
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace BindDropDownListUsingJSON.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
//Return json list of cities
[HttpGet]
public JsonResult CityList()
{
List<DDLOptions> obj = new List<DDLOptions>()
{
new DDLOptions {Id=1, CityName="Latur" },
new DDLOptions {Id=2, CityName="Pune" },
new DDLOptions {Id=4, CityName="Mumbai"},
new DDLOptions {Id=5, CityName="New Delhi" }
}.ToList();
return Json(obj, JsonRequestBehavior.AllowGet);
}
}
}
در بالا (منظور بلاک کد دوم) ما دو روش کاری درست کردیم ، یکی در return view به اسم Index و دیگری نتایج json را به نام CityList برمیگرداند.
به یاد آورید به جای رفتن به DataBase ، من یک لیست از رکورد ها تهیه کرده و به عنوان json بر گرداند.
اگرچه شما می توانید این لیست از DataBase را یکی کرده اما در این مثال فرض شد که این لیست از DataBase میاد.
[divider style=”solid” top=”20″ bottom=”20″]پیشنهاد میکنم : مقاله ی آموزشی کار با Json در JQuery و MVC
[divider style="solid" top="20" bottom="20"]
گام ۴:اضافه کردن View
view را که در کلاس EmpModel به اسم Index.cshtml می باشد، به صورت زیر اضافه کنید:
بعد از کلیک کردن بر روی دکمه add ،view ساخته می شود.
برای صدا زدن CityList jason action method ، تابع jQuery Ajax زیر را درست کنید:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%20%0A%20%20%20%20%20%20%0A%20%20%20%20%24(document).ready(function%20()%20%20%0A%20%20%20%20%7B%20%20%20%20%2F%2Fcall%20the%20CityList%20json%20result%20method%20%20%0A%20%20%20%20%20%20%20%20%24.getJSON(%22%2FHome%2FCityList%22%2C%20function%20(data)%20%20%0A%20%20%20%20%20%20%20%20%7B%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%24.each(data%2C%20function%20(i%2C%20data)%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%20%20%20%20%20%2F%2F%20bind%20the%20dropdown%20list%20using%20json%20result%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('%3Coption%3E'%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3A%20data.Id%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20data.CityName%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D).html(data.CityName).appendTo(%22%23City%22)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%0A%20%20%20%20%20%20%20%20%7D)%20%20%0A%20%20%20%20%20%20%20%20%2F%2FGet%20the%20selected%20text%20on%20button%20click%20%20%0A%20%20%20%20%20%20%20%20%24(%22%23btnSave%22).click(function%20()%20%7B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20txt%20%3D%20%24(%22%23City%20option%3Aselected%22).text()%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20assign%20the%20selected%20value%20to%20span%20to%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fshow%20to%20the%20end%20user%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23Spnmsg%22).text(%22Your%20Selected%20City%20is%20%22%20%2B%20txt)%3B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20false%3B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%7D)%20%20%0A%20%20%0A%20%20%20%20%7D)%3B%20%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" />
برای کار کردن تابع بالا (بالا منظور بلاک کد سوم) به صورت معمول،ما نیاز به فایل jQuery زیر برای رفرنس داده شدن در بالای view یا در صفحه layout داریم .
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22~%2FScripts%2Fjquery-1.10.2.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" />
بعد از اضافه کردن کد های ضروری ، فایل ها و منطق کد Index.cshtml شبیه زیر می شود :
@model BindDropDownListUsingJSON.Models.EmpModel
@{
ViewBag.Title = "www.compilemode.com";
}
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22~%2FScripts%2Fjquery-1.10.2.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script;" title="script;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%20%0A%20%20%20%20%20%20%0A%20%20%20%20%24(document).ready(function%20()%20%20%0A%20%20%20%20%7B%20%20%20%20%2F%2Fcall%20the%20CityList%20json%20result%20method%20%20%0A%20%20%20%20%20%20%20%20%24.getJSON(%22%2FHome%2FCityList%22%2C%20function%20(data)%20%20%0A%20%20%20%20%20%20%20%20%7B%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%24.each(data%2C%20function%20(i%2C%20data)%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%20%20%20%20%20%2F%2F%20bind%20the%20dropdown%20list%20using%20json%20result%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('%3Coption%3E'%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3A%20data.Id%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20data.CityName%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D).html(data.CityName).appendTo(%22%23City%22)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%0A%20%20%20%20%20%20%20%20%7D)%20%20%0A%20%20%20%20%20%20%20%20%2F%2FGet%20the%20selected%20text%20on%20button%20click%20%20%0A%20%20%20%20%20%20%20%20%24(%22%23btnSave%22).click(function%20()%20%7B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20txt%20%3D%20%24(%22%23City%20option%3Aselected%22).text()%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20assign%20the%20selected%20value%20to%20span%20to%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fshow%20to%20the%20end%20user%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23Spnmsg%22).text(%22Your%20Selected%20City%20is%20%22%20%2B%20txt)%3B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20false%3B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%7D)%20%20%0A%20%20%0A%20%20%20%20%7D)%3B%20%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script;" title="script;" />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-12">
@Html.DropDownListFor(model => model.City, Enumerable.Empty<SelectListItem>(), new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" id="btnSave" class="btn btn-primary" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10 text-success">
<span id="Spnmsg"></span>
</div>
</div>
</div>
}
گام ۵:اجرا کردن برنامه
بعد از اجرا کردن برنامه، خروجی به صورت اسکرین شات زیر می باشد:
در اسکرین شات اول ،شما رکورد های Drop down list می بینید که از json data تجمیع شده است.
حالا هر city را از رکورد های drop down list انتخاب کنید و بر روی دکمه Save کلیک کنید، خروجی به صورت زیر می باشد:
از تمام مثال های بالا ، امیدوارم شما چگونگی یکی کردن drop down list با استفاده از json data در ASP.net MVC رایاد گرفته باشید.
نکته: شما نیاز به استفاده از jQuery Library دارید.
موفق باشید !
دیدگاه‌ها