پر کردن DropDownList

ما بیشتر وقت ها نیاز به پر کردن DropDownList به وسیله Json Data درASP.net MVC داریم.بنابراین و با توجه به نیاز بالا من تصمیم به نوشتن این مقاله گرفتم. اجازه بدید تا گام به گام خلق کردن یک برنامه MVC ساده را یاد بگیریم. با من همراه باشید …

پر کردن DropDownList

گام ۱:ساختن یک برنامه MVC

  1. ”Start” ،سپس “ALL Programs” و انتخاب کنید “Microsoft Visual Studio 2015”
  2. ”File” ،سپس “New” وکلیک “Project” سپس انتخاب , “ASP.Net Web Application Template” سپس اسم برای پروژه گذاشته و سپس OK کنید.
  3. گزینه 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 دارید.

موفق باشید !

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.