Question

我正在使用代码优先方法开发mvc5应用程序。在我的一个视图中，我有一个文本框，一个添加按钮，一个保存按钮，一个删除按钮和一个列表框。

当我在文本框（文本）中输入值并单击“添加”按钮时，应将其添加到列表框并显示文本。因此，此列表框中将有多个文本。而且我应该能够使用删除按钮删除列表框中的记录/记录。

之后我想将此列表发布到服务器。这个场景中的大多数任务都可以使用Jquery来完成。

到目前为止我做了什么

_AttributeCreate局部视图

中的

@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>

AttributeViewModel

public class AttributeViewModel
{
    public IEnumerable<String> typevalue { get; set; }
}

但这不起作用。请指导我如何执行此操作（包括删除功能和最终发布功能）。提前致谢！

Answer 1

您的代码和实现存在一些问题。 @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
});

参考this fiddle

将数据绑定到ListBox并将列表发布到数据库mvc5

1 个答案: