我如何使用MVC5中的另一个下拉列表绑定下拉列表？ [英] How I bind dropdownlist using another dropdownlist in MVC5?

问题描述

当我从另一个下拉列表中选择值时，我想在drowpdownlist中绑定数据。



这是我的代码： -



// --------模型------- //

// DeviceProduct模型//

i want bind data in drowpdownlist when i choose value from another dropdownlist.

This is My Code:-

//--------Model-------//
// DeviceProduct Model //

[Table("DeviceProduct")]
    public partial class DeviceProduct
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        public DeviceProduct()
        {
            this.DeviceInfoe = new HashSet<DeviceInfo>();
            this.DeviceModel = new HashSet<DeviceModel>();
        }
        public int ID { get; set; }
        public string Code { get; set; }
        public string Name { get; set; }

        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<DeviceInfo> DeviceInfoe { get; set; }
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<DeviceModel> DeviceModel { get; set; }
    }

// DeviceModel模型//

// DeviceModel Model //

[Table("DeviceModel")]
public partial class DeviceModel
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public DeviceModel()
    {
        this.DeviceInfoe = new HashSet<DeviceInfo>();
    }
    public int ID { get; set; }
    public Nullable<int> DeviceProductID { get; set; }
    public string Code { get; set; }
    public string Name { get; set; }

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<DeviceInfo> DeviceInfoe { get; set; }
    public virtual DeviceProduct DeviceProduct { get; set; }
}

//在控制器中//

// in Controller //

public ActionResult NewDeviceInfo()
       {
           ViewBag.DeviceProductList = db.DeviceProduct;
           return PartialView("NewDeviceInfo");
       }

       [HttpPost]
       [ValidateAntiForgeryToken]
       public ActionResult NewDeviceInfo(DeviceInfo deviceInfo)
       {
           return view();
       }

       public ActionResult FillDeviceModel(int productId)
       {
           var deviceModels = db.DeviceModel.Where(c => c.DeviceProductID ==  productId);
           return Json(deviceModels, JsonRequestBehavior.AllowGet);
       }

//在视野中//

// in view //

<div class="form-group col-lg-6">
                            @Html.LabelFor(m => m.DeviceProduct.Name, new { @class = "col-lg-2 control-label" })
                            <div class="col-lg-8">
                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                @Html.DropDownListFor(m => m.DeviceProduct, new SelectList(ViewBag.DeviceProductList, "ID", "Name"), WhiteWhaleLanguage.PleaseSelect, new { @class = "form-control" , @onchange="FillDeviceModel()" })
                                @Html.ValidationMessage("UserErrorMsg", htmlAttributes: new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group col-lg-5">
                            @Html.LabelFor(m => m.DeviceModel.Name, new { @class = "col-lg-2 control-label" })
                            <div class="col-lg-9">
                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                @Html.DropDownListFor(m => m.DeviceModel, new SelectList(Enumerable.Empty<SelectListItem>(), "ID", "Name"), WhiteWhaleLanguage.PleaseSelect, new { @class = "form-control" })
                                @Html.ValidationMessage("UserErrorMsg", htmlAttributes: new { @class = "text-danger" })
                            </div>
                        </div>

< br $>
//脚本代码//



函数FillDeviceModel（）

{

var deviceproductid = $（'＃DeviceProduct'）。val（）;

$ .ajax（{

url：'/ ClientsNotifications / FillDeviceModel'，

类型：GET，

数据类型：JSON，

数据：{DeviceProductID：deviceproductid}，

成功：功能（deviceModels）{

$（＃DeviceModel）。html（）;

$ .each（deviceModels，function（i，devicemodel）{

$（＃DeviceModel）。追加（

$（'< option>< / option>'）。val（DeviceM odel.ID）.html（DeviceModel.Name））;

}）

}，

错误：function（）

{

alert（Whooaaa！出了点问题......）

}

}）;

}





我尝试了什么：



i写这段代码但它不起作用，哪里是问题？

// script code //

function FillDeviceModel()
{
var deviceproductid = $('#DeviceProduct').val();
$.ajax({
url: '/ClientsNotifications/FillDeviceModel',
type: "GET",
datatype: "JSON",
data: { DeviceProductID: deviceproductid },
success: function (deviceModels) {
$("#DeviceModel").html("");
$.each(deviceModels, function (i, devicemodel) {
$("#DeviceModel").append(
$('<option></option>').val(DeviceModel.ID).html(DeviceModel.Name));
})
},
error: function()
{
alert("Whooaaa! Something went wrong..")
}
});
}


What I have tried:

i write this code but it's do't work, where's the problem?

推荐答案

（'＃DeviceProduct'）。val（）;

('#DeviceProduct').val();

.ajax（{

url：'/ ClientsNotifications / FillDeviceModel'，

类型：GET，

数据类型：JSON，

data：{DeviceProductID：deviceproductid}，

成功：函数（deviceModels）{

.ajax({
url: '/ClientsNotifications/FillDeviceModel',
type: "GET",
datatype: "JSON",
data: { DeviceProductID: deviceproductid },
success: function (deviceModels) {

（＃DeviceModel）。html（ ）;

("#DeviceModel").html("");

这篇关于我如何使用MVC5中的另一个下拉列表绑定下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！