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

Posted 2023-05-08

【中文标题】将数据绑定到 ListBox 并将列表发布到数据库 mvc5

【英文标题】：Binding data to a ListBox and posting the list to database mvc5

【发布时间】：2016-01-02 02:17:19

【问题描述】：

我正在使用代码优先方法开发一个 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; 

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

【问题讨论】：

您当前的代码没有意义。 typevalue 是 IEnumerable<string>，因此您不能使用 new SelectList(Model.typevalue, "Id", "Text" - string 不包含属性 Id 和 Text。你在为哪一点苦苦挣扎？ onclick="disableBtn()" 是什么？

@Stephen Muecke，感谢您的回复 :) 我想做的正是我的问题。我认为“Id”和“Text”是指列表中特定条目的序列号和文本。我想在列表框中插入一些文本。此视图中还有许多其他字段，但我对其进行了简要介绍并仅在此处列出相关内容。请忽略 onclick，因为我错误地把它放在这里。我正在努力通过文本框将数据绑定到列表框并将最终列表提交给DB。我没有为此开发正确的 jquery 脚本。谢谢你帮助我...

$('#typevalue').append($('<option></option>').text($('#abc').val())); 将向列表框添加一个新选项。但我不确定您是否了解 <select multiple> 的工作原理 - 它只回发所选选项的值，因此除非您专门选择其中的部分或全部，否则不会回发任何内容。

当我尝试渲染此视图时，我从 listboxfor helper 收到“值不能为空”错误。列表框应该如何在视图中编码？是的，我不知道。我想发布整个列表而不选择。我认为我将 listboxfor 放在视图中的方式是错误的。请帮我纠正这个问题。

那是因为你的new SelectList(Model.typevalue, "Id", "Text") 我之前提到过。它应该只是“new SelectList(Model.typevalue)”，但即使这样也不是正确的做法。您应该有一个属性用于所选项目，一个属性用于初始显示的选项

【参考方案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> 元素）仅回发其选定选项的值，因此除非在提交表单时选择所有选项，否则您将无法获得预期的结果。

您希望从 cmets 动态添加新项目以添加到 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

【讨论】：

@Stephen Muecke，抱歉回复晚了。今天停电，之后无法参加提问。无论如何，非常感谢您的解决方案。明天我会通知你这个。

@ Stephen Muecke，我对小提琴进行了裁判，是的，我想这样做。我试过你的解决方案。在“foreach（Model.typevalue 中的var item）”处，我收到错误“对象引用未设置为对象的实例”。但是我在控制器中创建了一个视图模型对象并将其绑定到视图数据，因为我将它传递给了部分视图。你能告诉我会是什么问题吗？

那是因为typevalue 为空。如果您最初没有元素，那么您至少需要在将模型传递给视图之前将其初始化为控制器中的空列表 - 例如var model = new AttributeViewModel() typevalue = new List<string> ; return View(model);

是的，这就是问题所在。现在它运行良好。谢谢你。我还需要另一个帮助。现在我想捕获所有这些文本并将它们发送到数据库（每条记录作为表中的单独原始数据）。你能帮我实现这个目标吗？

当然，但是你需要问一个更详细的新问题:)