將數據綁定到 ListBox 並將列表發布到數據庫 mvc5

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>

屬性視圖模型

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集合的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
});

參考這個小提琴