ورود / ثبت نام
0
0

پر کردن DropDownList با استفاده از JSON در MVC

626 بازدید
پر کردن DropDownList

پر کردن 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 دارید.

موفق باشید !

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=18156
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد پر کردن DropDownList با استفاده از JSON در MVC

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.