我如何使用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屋!