我正在使用代码优先方法开发 mvc5 应用程序。在我的一个 View 中,我有一个文本框、一个添加按钮、一个保存按钮、一个删除按钮和一个列表框。
当我在文本框(文本)中输入一个值并单击添加按钮时,它应该被添加到列表框中并显示文本。因此,此列表框中将有多个文本。而且我应该能够使用删除按钮删除列表框中的一条记录。
之后我想将此列表发布到服务器。我想,这种情况下的大部分任务都可以使用 Jquery 来完成。
到目前为止我做了什么
在_Attribute中创建部分 View
@model eKnittingData.AttributeViewModel
@using (Html.BeginForm("Save", "Attribute"))
{
@Html.TextBox("abc")
<input type="button" name="AddText" value="Add Text" id="AddText" />
@Html.ListBoxFor(a => a.typevalue, new SelectList(Model.typevalue, "Id", "Text"))
<input type="submit" value="Save" id="btn" class="btn btn-success" onclick="disableBtn()" />
}
附加项目的脚本
<script>
$('#AddText').click(function () {
$('#typevalue').append(
new Option($('input[name=abc]').val()));
});
</script>
属性 View 模型
public class AttributeViewModel
{
public IEnumerable<String> typevalue { get; set; }
}
但这不起作用。请指导我如何执行此操作(包括删除功能和最终发布功能)。提前致谢!
最佳答案
您的代码和实现存在一些问题。 @Html.ListBoxFor(a => a.typevalue, new SelectList(Model.typevalue, "Id", "Text"))
不起作用,因为 typevalue
是 IEnumerable<String>
和string
不包含名为 Id
的属性和Text
。虽然你可以只使用 @Html.ListBoxFor(a => a.typevalue, null)
从您尝试做的事情来看,列表框不合适。列表框( <select multiple>
元素)仅回发其所选选项的值,因此除非在提交表单时选择了所有选项,否则您将不会获得预期的结果。
从评论中您想要动态添加新项目以添加到 typevalue
集合,并有能力删除它们。你的 html 应该类似于
@using (Html.BeginForm("Save", "Attribute"))
{
<input type="text" id="newtypevalue" />
<input type="button" value="Add Text" id="addtypevalue" />
<div id="typevaluelist">
// Generate inputs for existing items and in case of returning the view
foreach(var item in Model.typevalue)
{
<div class="typevalue">
<input type="text" name="typevalue" value="@item" />
<button type="button" class="delete">Delete</button>
</div>
}
</div>
....
}
// Hidden template for adding new items (outside the form element)
<div id="new" style="display:none;">
<div class="typevalue">
<input type="text" name="typevalue" />
<button type="button" class="delete">Delete</button>
</div>
</div>
并添加以下脚本用于添加和删除项目
$('#addtypevalue').click(function() {
var clone = $('#new').clone().children('div'); // copy the template
clone.find('input').val($('#newtypevalue').val()); // update text
$('#typevaluelist').append(clone); // add it to the DOM
$('#newtypevalue').val(''); // clear initial text box
});
$('#typevaluelist').on('click', '.delete', function() {
$(this).closest('.typevalue').remove(); // remove it from the DOM
});
关于jquery - 将数据绑定(bind)到 ListBox 并将列表发布到数据库 mvc5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32948359/