将字段动态添加到剃须刀表格

问题描述：

我有一个剃须刀窗体，其中包含我想动态添加项目的项目列表/表格。您可以从下拉列表中选择项目，单击“添加”，然后将下拉列表中的项目添加到列表中。然后，当我提交表单并且我的控制器的HttpPost方法可以处理输入时，我希望通过POST发送所有这些内容。将字段动态添加到剃须刀表格

有没有办法动态地添加字段，仍然能够接受它们作为HttpPost函数中的参数？

答

<form>元素中包含的每个combobox/hiddenfield/textbox/...都会在提交时发布。如果您在运行中创建它们或将它们默认为就绪，则无关紧要。然而，最大的区别在于，对于动态创建的那些，您无法真正利用我们习惯的那种整洁的绑定。您还必须手动执行验证等。

然后你就会有这样的方法：

public ActionResult HandleMyPost(FormCollection form) 
{ 
    // enumerate through the FormCollection, perform validation etc. 
}

FormCollection on MSDN

答

第一个答案是在正确的，你可以遍历一个集合的形式获得内的动态插入字段的值你的表单元素。我只想补充一点，你可以利用的一些的整齐绑定。

下面的代码接受针对该操作发布的文本框的动态列表。此示例中的每个文本框都与dynamicField具有相同的名称。 MVC很好地将这些绑定到一个字符串数组中。

完整.NET小提琴：https://dotnetfiddle.net/5ckOGu

示例代码（片段为清楚起见）动态地添加样本场

  @using (Html.BeginForm()) 
      { 
       @Html.AntiForgeryToken() 

       <div id="fields"></div> 

       <button>Submit</button> 
      } 


      <div style="color:blue"><b>Data:</b> @ViewBag.Data</div> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      var $fields = $('#fields'); 
      $('#btnAddField').click(function(e) { 
       e.preventDefault(); 
       $('<input type="text" name="dynamicField" /><br/>').appendTo($fields); 
      }); 
     }); 

    </script>

示例代码从动作接受在后的动态字段。

[HttpPost] 
    public ActionResult Index(string[] dynamicField) 
    { 
     ViewBag.Data = string.Join(",", dynamicField ?? new string[] {}); 
     return View(); 
    }

输出

sample screenshot

的屏幕截图

将字段动态添加到剃须刀表格

相关推荐