在具有动态内容 mvc3 的部分视图中添加下拉列表
Add drop down lists in partial view with dynamic content mvc3
我花了几天时间找到解决问题的方法,但我完全无法找到.
我正在做的是为数据库创建一个搜索页面。我不确定搜索有多详细,所以我使用 ajax/部分视图来添加搜索条件(我的意思是尝试,因为这是不起作用的部分)。
我可能犯了一个我不知道的愚蠢错误...
它可以在没有 ajax/部分视图的情况下工作,但这并不能真正满足我的项目的目的(不够详细).
我的代码如下:
这就是我的ajax所谓的部分视图:
<script src="@Url.Content("~/Scripts/jScript1.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{
@Ajax.ActionLink("Add search criteria",
"AddSearch", new AjaxOptions
{
UpdateTargetId = "search",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod = "POST",
OnSuccess = "DBUpdate"
})
<div id="search">
</div>
<input type="submit" value="Search" />
}
我的部分观点:
@model MvcApplication1.Models.search
<div id="a">
@Html.DropDownListFor(x => x.Table, Model.Tables, "-- Select Table --")
@Html.DropDownListFor(x => x.Type, Enumerable.Empty<SelectListItem>(), "-- Select Type --")
@Html.DropDownListFor(x => x.Name, Enumerable.Empty<SelectListItem>(), "-- Select Name --")
@Html.EditorFor(x => x.less)
@Html.EditorFor(x => x.equ)
@Html.EditorFor(x => x.more)
</div>
和我的 js 文件:
function DBUpdate() {
$('#Table').change(function () {
var selectedTable = $(this).val();
if (selectedTable != null && selectedTable != '') {
$.getJSON('@Url.Action("Types")', { Table: selectedTable }, function (types) {
var typesSelect = $('#Type');
typesSelect.empty();
$.each(types, function (index, types) {
typesSelect.append($('<option/>', {
value: types.value,
text: types.text
}));
});
});
}
});
$('#Type').change(function () {
var selectedType = $(this).val();
var selectedTable = $('#Table').val();
if (selectedType != null && selectedType != '') {
$.getJSON('@Url.Action("Names")', { Type: selectedType, Table: selectedTable }, function (names) {
var namesSelect = $('#Name');
namesSelect.empty();
$.each(names, function (index, names) {
namesSelect.append($('<option/>', {
value: names.value,
text: names.text
}));
});
});
}
});
}
提前感谢您的所有帮助
丹尼尔
您的代码存在几个问题:
- 您正在尝试在单独的javascript文件中使用服务器端帮助程序,例如
@Url.Action("Types")
,这显然是不可能的。
您正在使用 id 选择器, - 例如
$('#Table')
和$('#Type')
但您可能有多个行,因此多个下拉列表具有相同的 id =>这些是错误的选择器 =>您不再知道您正在选择哪个元素。
因此,让我们开始解决这些问题。
首先,我们首先修改部分:
@model search
<div>
@Html.DropDownListFor(
x => x.Table,
Model.Tables,
"-- Select Table --",
new {
id = Guid.NewGuid(),
@class = "tables",
data_url = Url.Action("Types")
}
)
@Html.DropDownListFor(
x => x.Type,
Enumerable.Empty<SelectListItem>(),
"-- Select Type --",
new {
id = Guid.NewGuid(),
@class = "types",
data_url = Url.Action("Names")
}
)
@Html.DropDownListFor(
x => x.Name,
Enumerable.Empty<SelectListItem>(),
"-- Select Name --",
new {
id = Guid.NewGuid(),
@class = "names"
}
)
@Html.EditorFor(x => x.less)
@Html.EditorFor(x => x.equ)
@Html.EditorFor(x => x.more)
</div>
请注意,我已经将类属性应用于下拉列表,以便我可以更轻松地在 javascript 中选择它们。我还将 url 关联到前 2 个下拉列表,以便我们稍后可以将它们级联到相应的控制器操作。
谈到级联,让我们编写一个jQuery插件:
(function ($) {
$.fn.cascade = function (options) {
var defaults = {
additionalParameters: function() {
return { };
}
};
var opts = $.extend(defaults, options);
return this.each(function () {
$(this).change(function () {
var selectedValue = $(this).val();
var params = opts.additionalParameters() || {};
params[opts.paramName] = selectedValue;
$.getJSON($(this).data('url'), params, function (items) {
opts.childSelect.empty();
$.each(items, function (index, item) {
opts.childSelect.append(
$('<option/>')
.attr('value', item.value)
.text(item.text)
);
});
});
});
});
};
})(jQuery);
有了这个插件,我们现在可以继续修改主视图:
@using (Html.BeginForm())
{
@Html.ActionLink(
"Add search criteria",
"AddSearch",
null,
new { id = "add" }
)
<div id="search"></div>
<input type="submit" value="Search" />
}
剩下的就是订阅锚点的点击事件(请注意,我使用了普通Html.ActionLink
而不是Ajax.ActionLink
)并附加我们的插件:
$(function () {
$('#add').click(function () {
$.post(this.href, function (result) {
var $result = $(result);
$('#search').append($result);
var tablesSelect = $('.tables', $result);
var typesSelect = $('.types', $result);
tablesSelect.cascade({
paramName: 'table',
childSelect: $('.types', $result)
});
typesSelect.cascade({
paramName: 'type',
additionalParameters: function () {
return { table: tablesSelect.val() };
},
childSelect: $('.names', $result)
});
});
return false;
});
});
所有这些都可以在单独的javascript文件中发生。这显然假设我们有 2 个相应的控制器操作,这些操作将返回级联下拉列表的 JSON 值。
以下只是模拟,以便您可以看到输入/输出的内容。您当然会用更现实的值替换虚拟值:
public ActionResult Types(string table)
{
var model = Enumerable.Range(1, 5).Select(x => new
{
value = x,
text = "type " + x
});
return Json(model, JsonRequestBehavior.AllowGet);
}
public ActionResult Names(string type, string table)
{
var model = Enumerable.Range(1, 2).Select(x => new
{
value = x,
text = "name " + x
});
return Json(model, JsonRequestBehavior.AllowGet);
}
尝试将change
函数包装在 document.ready() 中
$.document.ready(function () {
$('#Table').change(function () {
.....
$('#Type').change(function () {
....
});
如果不这样做,则 change 事件可能绑定到页面上尚不存在的元素 - 这意味着它永远不会被绑定。
编辑
尝试将其添加到主视图
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
相关文章:
- 如何使用jQuery选择下拉列表的值
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- Javascript按钮下拉列表
- jQuery表单添加不适用于下拉列表
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 禁用jQuery中的下拉列表
- 如何在按钮中显示下拉列表中选定的元素
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 如何使用PHP和JS级联三个下拉列表
- 在具有动态内容 mvc3 的部分视图中添加下拉列表
- 秘银 - 如何从 API 填充视图的下拉列表
- 忽略包含下拉列表的网格视图单元格
- 在AngularJs中,如何根据从下拉列表中选择的值来控制视图
- 将项目添加到位于另一个分部视图中的下拉列表中,而不刷新视图
- 如何从MVC视图发送下拉列表选择值到控制器的变量ViewData
- 如何从主页面访问部分视图下拉列表的选定值
- Kendo UI 下拉列表在挖空视图模型更新时未更新
- 如何使用 javascript 从网格视图下拉列表中获取所选值
- 模型视图控制器-动态下拉列表和它的选项使用javascript在表行
- MVC更新局部视图下拉列表