mvc 下拉更改不会触发
mvc dropdow change does not trigger
我尝试在 mvc 页面上使用 3 个下拉列表,如果我更改 ddl 1,ddl 2 中的值应该更改,而 ddl 2 的更改应该更改 ddl 3 中的值。到目前为止,我有这段代码.... ddl 1 的值已设置,但如果我更改 ddl 1 中的值,则不会发生任何事情。 ddl 2 没有得到任何值并且 "public JsonResult GetPapperByTypeId(int typeId)" 根本没有被触发。
我在这里错过了什么?
主视图
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "myForm", name = "papper_search" }))
{
@Html.DropDownList("PrintType", ViewData["papperType"] as List<SelectListItem>, new { @class = "form-control" })
<br />
<br />
@Html.DropDownList("Papper", new SelectList(string.Empty, "Value", "Text"), "Please select a paper", new { @class = "form-control" })
<br />
<br />
@Html.DropDownList("PapperType", new SelectList(string.Empty, "Value", "Text"), "Please select a type", new { @class = "form-control" })
}
<script type="text/javascript" src="@Url.Content("~/js/jquery.min.js")"></script>
<script type="text/jscript">
$(function ()
{
$('#PrintType').change(function ()
{
$.getJSON('/Home/GetPapperByTypeId/' + $('#PrintType').val(), function (data)
{
var items = '<option>Select Papper</option>';
$.each(data, function (i, printtype)
{
items += "<option value='" + printtype.Value + "'>" + printtype.Text + "</option>";
});
$('#Papper').html(items);
});
});
$('#Papper').change(function ()
{
$.getJSON('/Home/Citylist/' + $('#Papper').val(), function (data)
{
var items = '<option>Select PapperType</option>';
$.each(data, function (i, pappertype)
{
items += "<option value='" + pappertype.Value + "'>" + pappertype.Text + "</option>";
});
$('#PapperType').html(items);
});
});
});
</script>
家庭控制器
public ActionResult Index()
{
var li = new List<SelectListItem>
{
new SelectListItem {Text = "Select", Value = "0"},
new SelectListItem {Text = "Plain paper", Value = "1"},
new SelectListItem {Text = "Heavy paper", Value = "2"},
};
ViewData["papperType"] = li;
}
//Action result for ajax call
public JsonResult GetPapperByTypeId(int typeId)
{
var objallPappers = GetAllPappers().Where(m => m.TypeId == typeId).ToList();
var obgpapper = new SelectList(objallPappers, "Id", "Name", 0);
return Json(obgpapper, JsonRequestBehavior.AllowGet);
}
public List<Papper> GetAllPappers()
{
var objPapper = new List<Papper>
{
new Papper {Id = 1, TypeId = 1, Name = "papper-1"},
new Papper {Id = 2, TypeId = 2, Name = "papper-1"},
new Papper {Id = 3, TypeId = 4, Name = "papper-1"},
new Papper {Id = 4, TypeId = 1, Name = "papper-2"},
new Papper {Id = 5, TypeId = 1, Name = "papper-3"},
new Papper {Id = 6, TypeId = 4, Name = "papper-2"}
};
return objPapper;
}
问题:在这行代码
$.getJSON('/Home/GetPapperByTypeId/' + $('#PrintType').val(), function (data)
实际问题是这样的/Home/GetPapperByTypeId/' + $('#PrintType').val()
这将以 URL 结束,例如 /Home/GetPapperByTypeId/SomeValue
解决方案:你想要的是URL像/Home/GetPapperByTypeId/?typeId=SomeValue
注意添加到查询字符串中的 ?typeId=。因为您的控制器 Action 需要一个名称为 typeId
的参数
public JsonResult GetPapperByTypeId(int typeId)
所以将 jquery 中的语法更改为
$.getJSON('/Home/GetPapperByTypeId/?typeId=' + $('#PrintType').val(), function (data)
您在这行代码中遇到了类似的问题。
$.getJSON('/Home/Citylist/' + $('#Papper').val(), function (data)
也解决这个问题..
我尝试在 mvc 页面上使用 3 个下拉列表,如果我更改 ddl 1,ddl 2 中的值应该更改,而 ddl 2 的更改应该更改 ddl 3 中的值。到目前为止,我有这段代码.... ddl 1 的值已设置,但如果我更改 ddl 1 中的值,则不会发生任何事情。 ddl 2 没有得到任何值并且 "public JsonResult GetPapperByTypeId(int typeId)" 根本没有被触发。
我在这里错过了什么?
主视图
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "myForm", name = "papper_search" }))
{
@Html.DropDownList("PrintType", ViewData["papperType"] as List<SelectListItem>, new { @class = "form-control" })
<br />
<br />
@Html.DropDownList("Papper", new SelectList(string.Empty, "Value", "Text"), "Please select a paper", new { @class = "form-control" })
<br />
<br />
@Html.DropDownList("PapperType", new SelectList(string.Empty, "Value", "Text"), "Please select a type", new { @class = "form-control" })
}
<script type="text/javascript" src="@Url.Content("~/js/jquery.min.js")"></script>
<script type="text/jscript">
$(function ()
{
$('#PrintType').change(function ()
{
$.getJSON('/Home/GetPapperByTypeId/' + $('#PrintType').val(), function (data)
{
var items = '<option>Select Papper</option>';
$.each(data, function (i, printtype)
{
items += "<option value='" + printtype.Value + "'>" + printtype.Text + "</option>";
});
$('#Papper').html(items);
});
});
$('#Papper').change(function ()
{
$.getJSON('/Home/Citylist/' + $('#Papper').val(), function (data)
{
var items = '<option>Select PapperType</option>';
$.each(data, function (i, pappertype)
{
items += "<option value='" + pappertype.Value + "'>" + pappertype.Text + "</option>";
});
$('#PapperType').html(items);
});
});
});
</script>
家庭控制器
public ActionResult Index()
{
var li = new List<SelectListItem>
{
new SelectListItem {Text = "Select", Value = "0"},
new SelectListItem {Text = "Plain paper", Value = "1"},
new SelectListItem {Text = "Heavy paper", Value = "2"},
};
ViewData["papperType"] = li;
}
//Action result for ajax call
public JsonResult GetPapperByTypeId(int typeId)
{
var objallPappers = GetAllPappers().Where(m => m.TypeId == typeId).ToList();
var obgpapper = new SelectList(objallPappers, "Id", "Name", 0);
return Json(obgpapper, JsonRequestBehavior.AllowGet);
}
public List<Papper> GetAllPappers()
{
var objPapper = new List<Papper>
{
new Papper {Id = 1, TypeId = 1, Name = "papper-1"},
new Papper {Id = 2, TypeId = 2, Name = "papper-1"},
new Papper {Id = 3, TypeId = 4, Name = "papper-1"},
new Papper {Id = 4, TypeId = 1, Name = "papper-2"},
new Papper {Id = 5, TypeId = 1, Name = "papper-3"},
new Papper {Id = 6, TypeId = 4, Name = "papper-2"}
};
return objPapper;
}
问题:在这行代码
$.getJSON('/Home/GetPapperByTypeId/' + $('#PrintType').val(), function (data)
实际问题是这样的/Home/GetPapperByTypeId/' + $('#PrintType').val()
这将以 URL 结束,例如 /Home/GetPapperByTypeId/SomeValue
解决方案:你想要的是URL像/Home/GetPapperByTypeId/?typeId=SomeValue
注意添加到查询字符串中的 ?typeId=。因为您的控制器 Action 需要一个名称为 typeId
public JsonResult GetPapperByTypeId(int typeId)
所以将 jquery 中的语法更改为
$.getJSON('/Home/GetPapperByTypeId/?typeId=' + $('#PrintType').val(), function (data)
您在这行代码中遇到了类似的问题。
$.getJSON('/Home/Citylist/' + $('#Papper').val(), function (data)
也解决这个问题..