Asp.net mvc 在不回发的情况下向列表中添加多个项目

我的模型有一个列表属性，在视图中，我需要能够向其中添加无限数量的字符串。 到目前为止，它还不起作用，而我让它起作用的糟糕想法是：每次添加一个字符串，都会有一个回发。新字符串位于ViewModel的“newString”属性（不是列表）中。然后，HttpPost方法将“newString”保存到数据库中，用数据库中存储的所有字符串重新填充列表“allStrings”，并返回包含所有字符串的视图和一个emtpy文本框以添加另一个字符串

这对我来说不是一个好的解决方案，因为：

• 如果用户想要添加多个字符串，会有很多回发
• 如果用户向其项目（供应商）添加了一些字符串，则所有这些字符串都将保存到数据库中。当他决定不想保存供应商时，所有存储的字符串都是无用的，需要从数据库中删除

我没有实现这一点，因为我知道有更好的解决方案，但我就是找不到。这就是我所拥有的：

ViewModel：

public class SupplierViewModel
{
    public Supplier Supplier { get; set; }
    public List<string> allStrings;
    public string newString { get; set; }
}

观点：

   <div class="editor-label">
        @Html.LabelFor(model => model.allStrings)
    </div>

    @for (int i = 0; i < Model.allStrings.Count; i++)
    {
        <div class="editor-label">
            @Html.EditorFor(model => model.allStrings[i])
        </div>
    }

    <div class="editor-label">
        @Html.EditorFor(model => model.newString)
    </div>

@LabelFor（model=>model.allStrings）
@for（int i=0；imodel.allStrings[i]）
}
@EditorFor（model=>model.newString）

请注意，在这个实现的版本中，没有任何字符串保存到数据库中，并且在每次回发后都会清除列表。视图上只显示一个字符串（最后添加的字符串）

基本上，问题是：如何让用户在尽可能少的回发和数据库交互的情况下添加尽可能多的字符串

---

提前感谢

您可以使用jquery动态添加新元素，这些元素将发布回您的收藏。为文本框生成的html类似于

<input type="text" name="allStrings[0]" .../>
<input type="text" name="allStrings[1]" .../>

剧本

var container = $('#strings');
$('#addstring').click(function() {
  var index = container.children('input').length;
  var clone = $('#newstring').clone();
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  container .append(clone.html());
});

请参阅工作示例

---

请注意，您的模型不再需要

公共字符串newString{get；set；}

属性，当您发回集合时，集合将包含文本框的所有值。

您可以使用jquery动态添加新元素，以发回集合。为文本框生成的html类似于

<input type="text" name="allStrings[0]" .../>
<input type="text" name="allStrings[1]" .../>

剧本

var container = $('#strings');
$('#addstring').click(function() {
  var index = container.children('input').length;
  var clone = $('#newstring').clone();
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  container .append(clone.html());
});

请参阅工作示例

---

请注意，您的模型不再需要

公共字符串newString{get；set；}

属性，当您发回集合时，集合将包含文本框的所有值。

您可以使用jquery动态添加新元素，以发回集合。为文本框生成的html类似于

<input type="text" name="allStrings[0]" .../>
<input type="text" name="allStrings[1]" .../>

剧本

var container = $('#strings');
$('#addstring').click(function() {
  var index = container.children('input').length;
  var clone = $('#newstring').clone();
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  container .append(clone.html());
});

请参阅工作示例

---

请注意，您的模型不再需要

公共字符串newString{get；set；}

属性，当您发回集合时，集合将包含文本框的所有值。

您可以使用jquery动态添加新元素，以发回集合。为文本框生成的html类似于

<input type="text" name="allStrings[0]" .../>
<input type="text" name="allStrings[1]" .../>

剧本

var container = $('#strings');
$('#addstring').click(function() {
  var index = container.children('input').length;
  var clone = $('#newstring').clone();
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  container .append(clone.html());
});

请参阅工作示例

---

---

---

注意，您的模型不再需要

公共字符串newString{get；set；}

属性，当您发回时，您的集合将包含文本框的所有值。

发布完整的HTMLY您可以使用javascript/jquery轻松做到这一点。这可以接受吗？@oHoodie使用Ajax.BeginForm而不是Html.BeginForm@FrebinFrancis这对我有什么好处？我需要包括/安装什么才能使用它？@oHoodie它将在不回发的情况下发布数据您的完整HTMLY您可以使用javascript/jquery轻松做到这一点。这可以接受吗？@oHoodie使用Ajax.BeginForm而不是Html.BeginForm@FrebinFrancis这对我有什么好处？我需要包括/安装什么才能使用它？@oHoodie它将在不回发的情况下发布数据您的完整HTMLY您可以使用javascript/jquery轻松做到这一点。这可以接受吗？@oHoodie使用Ajax.BeginForm而不是Html.BeginForm@FrebinFrancis这对我有什么好处？我需要包括/安装什么才能使用它？@oHoodie它将在不回发的情况下发布数据您的完整HTMLY您可以使用javascript/jquery轻松做到这一点。这可以接受吗？@oHoodie使用Ajax.BeginForm而不是Html.BeginForm@FrebinFrancis这对我有什么用？我需要包括/安装什么才能使用它？@oHoodie它将在不使用postbacksweet的情况下发布数据小提琴正好显示了我需要的东西！我唯一需要添加的是再次删除添加字符串的功能。你能告诉我你会怎么做吗？很抱歉，我的js/jquery技能非常有限。我现在吃午饭，但我肯定会在午饭后尝试使用。默认情况下，集合索引器必须以零开始，并且是连续的，所以如果您在中间删除一个项目（即每个文本框都有一个关联的“删除”按钮），那么您需要重新命名控件名称（因此索引器开始于零并且是连续的）。或者，您需要为索引属性添加特殊的隐藏输入。请看一看和相关的注释，以帮助您理解。我尝试了很长时间，但都没有成功：/js函数已执行，但没有创建克隆，也没有错误。我还必须包括code.jquery.com/jquery-1.9.1.min.js“>。我忘了包括任何其他需要的内容吗？看看小提琴-它可以工作。你当然需要jquery（但不要使用min版本-你无法调试它）。我只能假设您没有正确复制代码。这应该不是问题，但首先，将脚本放在页面底部

标记之间的主视图中，并对其进行测试。添加断点，以便您可以调试它并检查控制台是否有任何错误。您还可以添加

console.log（）

语句打印出变量的值，以帮助调试。这把小提琴正好显示了我需要的东西！我唯一需要添加的是乐趣