如何在MVC razor中使用模型绑定级联下拉列表。 [英] How to bind cascading dropdown list using model in MVC razor.

问题描述

我是mvc的新手。我想使用模型数据绑定下拉列表。



1）国家下拉

2）州下降

3）城市下拉





国家列表中的第一次数据填写，州和城市下拉列表数据设置为空。但是在国家的变更事件中，州数据没有约束力。我发送了试过的代码。请给出解决方案。



我尝试了什么：



型号 - ----

Hi I am newer in mvc . I want to bind drop down list using model data .

1)Country Dropdown
2)State Dropdown
3)City Dropdown


first time data in country list filled, and in state and city drop down list data set to empty. but on change event of country , state data are not binding. I have send the code which tried. Please give solution.

What I have tried:

Model-----

public class MyClass
{
    public int  Id  { get; set; }
    public string Name { get; set; }
    public string Email{ get; set; }
    public int  CountryId { get; set; }
    public int  StateId{ get; set; }
    public int  CityId { get; set; }
    public SelectList CountryList { get; set; }
    public SelectList CityList { get; set; }
    public SelectList StateList { get; set; }
}

------------查看---------------- --------

------------View ------------------------

@model MyProject.models.MyClass

@Html.DropDownListFor(model =>
    model.CountryId, 
    new SelectList(Model.CountryList, "Value", "Text"),
    new 
    {
        @id = "ddlCountry",
        @placeholder = "...",
        @Class = "chzn-select",
        onchange="FillRegion();"
    })

@Html.DropDownListFor(model =>
    model.StateId,
    new SelectList(Model.CountryList, "Value", "Text"),
    new 
    {
        @id = "ddlCountry",
        @placeholder = "...",
        @Class = "chzn-select", onchange="FillRegion();"
    })

@Html.DropDownListFor(model =>
    model.CityId,
    new SelectList(Model.CountryList, "Value", "Text"),
    new
    {
        @id = "ddlCountry",
        @placeholder = "...",
        @Class = "chzn-select",
        onchange="FillRegion();"
    })

Controller COde -------------

Controller COde-------------

public ActionResult AddCompanyBranch()
{
    MyClass model= new MyClass();
    SelectListItem selListItem = new SelectListItem() { Value = "0", Text = "--Select--" };
    List<selectlistitem> newList = new List<selectlistitem>();
    newList.Add(selListItem);
    model.CountryList = listCountry; // Get Country List from Data base
    model.StateList = new SelectList(newList, "Value", "Text", "0"); // set Empty Data first time
    model.CityList = new SelectList(newList, "Value", "Text", "0");  // set Empty Data first time
    return View(model); 
}

[HttpPost]
public JsonResult ddCountry_SelectedIndexChanged(string CountryId)
{
    return Json(bindState( CountryId));
}

[HttpPost]
public JsonResult ddlState_SelectedIndexChanged(string stateId)
{
    JsonResult result = null;
    if (stateId != "0")
        result = Json(bindCity(stateId));

    return result;
}

function FillState() {

    var Region = $('#ddlCountry').val();
    $.ajax({
        type: "POST",
        url: '@Url.Action("ddlCountry_SelectedIndexChanged", "Company")',
        data: { CountryId: Id},
        success: function (data) {
            $("#ddlState").empty();  
            var items = [];
            //items.push("<option>--Select--</option>");
            $.each(data, function () {
                items.push("<option value=" + this.Value + ">" + this.Text + "</option>");
            });
            $("#ddlState").html(items.join(' '));
        }
    });
}

function FillCity() {
    var stateId = $('#ddlState').val();
    $.ajax({
        type: "POST",
        url: '@Url.Action("ddlState_SelectedIndexChanged", "Company")',
        data: { stateId: stateId},
        success: function (data) {
            $("#ddlCity").empty();  
            var items = [];
            //items.push("<option>--Select--</option>");
            $.each(data, function () {
                items.push("<option value=" + this.Value + ">" + this.Text + "</option>");
            });
            $("#ddlCity").html(items.join(' '));
        }
    });
}

推荐答案

（' #ddlCountry'）。val（）;

('#ddlCountry').val();

.ajax（{
type： POST，
url：' @ Url.Action（ddlCountry_SelectedIndexChanged，公司）'，
数据：{CountryId：Id}，
成功： function （数据）{

.ajax({ type: "POST", url: '@Url.Action("ddlCountry_SelectedIndexChanged", "Company")', data: { CountryId: Id}, success: function (data) {

（ ＃ddlState）。empty（）;
var items = [];
// items.push（< option> - Select - < / option>）;

("#ddlState").empty(); var items = []; //items.push("<option>--Select--</option>");

这篇关于如何在MVC razor中使用模型绑定级联下拉列表。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！