توضیحات و دانلود

DropDownList وابسته با استفاده از jQuery AJAX در ASP.Net MVC
0 0
DropDownList وابسته با استفاده از jQuery AJAX در ASP.Net MVC

با سلام در این مقاله با یک مثال توضیح خواهیم داد که چگونه می توان Cascading سریالی یعنی DropDownLists وابسته کشور ، استان و شهر را با استفاده از jQuery AJAX در ASP.Net MVC Razor ایجاد کرد.
کشور ، ایالت و شهر وابسته  با استفاده از jQuery AJAX در ASP.Net MVC Razor از پایگاه داده ایجاد می شوند.
بانک اطلاعات
سه جدول کشورها ، ایالت و شهر با طرح زیر ساخته شده اند.
جدول کشورها

جدول استان

جدول شهرها

توجه : می توانید جدول بانک اطلاعاتی SQL را با کلیک روی لینک دانلود کنید. فایل SQL را بارگیری کنید
فضاهای نام
باید نامهای زیر را وارد کنید.

using System.Configuration;
using System.Data.SqlClient;
using System.Collections.Generic;

Model
کلاس Model زیر از سه ویژگی Generic List Collection کلاس SelectListItem (که یک کلاس ASP.Net MVC داخلی است و دارای کلیه خواص مورد نیاز برای جمع آوری یک DropDownList است) برای نگهداری فایل های کشور ، استان و شهر است.
کلاس Model همچنین شامل سه ویژگی نوع Integer برای نگهداری از مقادیر کشور ، استان و شهر انتخاب شده است.

public class CascadingModel
{
    public CascadingModel()
    {
        this.Countries = new List<SelectListItem>();
        this.States = new List<SelectListItem>();
        this.Cities = new List<SelectListItem>();
    }
 
    public List<SelectListItem> Countries { get; set; }
    public List<SelectListItem> States { get; set; }
    public List<SelectListItem> Cities { get; set; }
 
    public int CountryId { get; set; }
    public int StateId { get; set; }
    public int CityId { get; set; }
}

Controller
Controller از سه روش تشکیل شده است :
روش انجام عملیات GET
در داخل این روش ، DropDownList کشورها با استفاده از روش PopulateDropDown ایجاد می شوند که SQL query را به عنوان پارامتر اجرا و یک لیست عمومی از کلاس SelectListItem را اجرا می کند .
لیست کشورها به ویژگی کشورها از کلاس Model اختصاص داده شده است که در نهایت به View باز می گردد.
روش انجام عملیات AJAX
این روش هنگامی عملی می شود که ارتباط جی کوئری AJAX از View در مورد رویداد تغییر یافته DropDownLists کشور و استان انجام شود.
این پارامتر نوع و مقدار را می پذیرد و براساس نوع کشور ، لیست استان یا شهرها به ترتیب از بانک اطلاعاتی گرفته شده و به عنوان JSON به View باز می گردد.
روش انجام عملیات POST
این روش ، ارتباط حاصل از عملکرد POST را از View دریافت می کند و با کلیک بر روی دکمه ارسال ، اجرا می شود.
با ارسال فرم ، مقادیر ارسال شده در سه متغیر یعنی کشور ، استان و شهر ذخیره می شوند.
با استفاده از این مقادیر ، کشورها ، استان ها و شهرها دوباره در شی کلاس Model جمع می شوند که به View باز می گردند.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        CascadingModel model = new CascadingModel();
        model.Countries = PopulateDropDown("SELECT CountryId, CountryName FROM Countries", "CountryName", "CountryId");
        return View(model);
    }
 
    [HttpPost]
    public JsonResult AjaxMethod(string type, int value)
    {
        CascadingModel model = new CascadingModel();
        switch (type)
        {
            case "CountryId":
                model.States = PopulateDropDown("SELECT StateId, StateName FROM States WHERE CountryId = " + value, "StateName", "StateId");
                break;
            case "StateId":
                model.Cities = PopulateDropDown("SELECT CityId, CityName FROM Cities WHERE StateId = " + value, "CityName", "CityId");
                break;
        }
        return Json(model);
    }
 
    [HttpPost]
    public ActionResult Index(int countryId, int stateId, int cityId)
    {
        CascadingModel model = new CascadingModel();
        model.Countries = PopulateDropDown("SELECT CountryId, CountryName FROM Countries", "CountryName", "CountryId");
        model.States = PopulateDropDown("SELECT StateId, StateName FROM States WHERE CountryId = " + countryId, "StateName", "StateId");
        model.Cities = PopulateDropDown("SELECT CityId, CityName FROM Cities WHERE StateId = " + stateId, "CityName", "CityID");
        return View(model);
    }
 
    private static List<SelectListItem> PopulateDropDown(string query, string textColumn, string valueColumn)
    {
        List<SelectListItem> items = new List<SelectListItem>();
        string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        items.Add(new SelectListItem
                        {
                            Text = sdr[textColumn].ToString(),
                            Value = sdr[valueColumn].ToString()
                        });
                    }
                }
                con.Close();
            }
        }
 
        return items;
    }
}

View
در داخل View ، در اولین خط کلاس CascadingModel به عنوان Model برای View اعلام می شود.
View شامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.
ActionName - نام عمل در این حالت  Index است.
ControllerName - نام Controller در این حالت  Home است.
FormMethod - این روش فرم یعنی GET یا POST را مشخص می کند. در این حالت روی POST تنظیم می شود.
در داخل فرم ، DropDownLists کشور ، استان و شهر با استفاده از عملکرد DropDownListFor HTML Helper ایجاد می شوند.
به هر DropDownList یک رویداد jQuery OnChange اختصاص داده شده است. فراخوانی AJAX به روش AjaxMethod Action انجام شده و براساس مقدار نوع ، DropDownList  از نتایج ایجاد می شود.
در داخل jQuery document رویداد handler، اگر هر سه DropDownLists ایجاد شده باشند ، مقادیر انتخاب شده با استفاده از جعبه پیام هشدار JavaScript نمایش داده می شوند.

@model Cascading_DropDownList_MVC.Models.CascadingModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @Html.DropDownListFor(m => m.CountryId, Model.Countries, "Please select")
        <br/>
        <br/>
        @Html.DropDownListFor(m => m.StateId, Model.States, "Please select")
        <br/>
        <br/>
        @Html.DropDownListFor(m => m.CityId, Model.Cities, "Please select")
        <br/>
        <br/>
        <input type="submit" value="Submit"/>
    }
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("select").each(function () {
                if ($(this).find("option").length <= 1) {
                    $(this).attr("disabled", "disabled");
                }
            });
 
            $("select").change(function () {
                var value = 0;
                if ($(this).val() != "") {
                    value = $(this).val();
                }
                var id = $(this).attr("id");
                $.ajax({
                    type: "POST",
                    url: "/Home/AjaxMethod",
                    data: '{type: "' + id + '", value: ' + value + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var dropDownId;
                        var list;
                        switch (id) {
                            case "CountryId":
                                list = response.States;
                                DisableDropDown("#StateId");
                                DisableDropDown("#CityId");
                                PopulateDropDown("#StateId", list);
                                break;
                            case "StateId":
                                dropDownId = "#CityId";
                                list = response.Cities;
                                DisableDropDown("#CityId");
                                PopulateDropDown("#CityId", list);
                                break;
                        }
                       
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
 
        function DisableDropDown(dropDownId) {
            $(dropDownId).attr("disabled", "disabled");
            $(dropDownId).empty().append('<option selected="selected" value="0">Please select</option>');
        }
 
        function PopulateDropDown(dropDownId, list) {
            if (list != null && list.length > 0) {
                $(dropDownId).removeAttr("disabled");
                $.each(list, function () {
                    $(dropDownId).append($("<option></option>").val(this['Value']).html(this['Text']));
                });
            }
        }
 
        $(function () {
            if ($("#CountryId").val() != "" && $("#StateId").val() != "" && $("#CityId").val() != "") {
                var message = "Country: " + $("#CountryId option:selected").text();
                message += "\nState: " + $("#StateId option:selected").text();
                message += "\nCity: " + $("#CityId option:selected").text();
                alert(message);
            }
        });
    </script>
</body>
</html>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :