動態添加字段到Razor表單

Question

我有一個Razor表單，其中包含我想要動態添加項目的項目列表/表格。 您可以從下拉列表中選擇項目，單擊“添加”，下拉列表中的項目將添加到列表中。 然后，當我提交表單並且我的控制器的HttpPost方法可以處理輸入時，我希望所有這些都通過POST發送。

有沒有辦法動態添加字段，仍然能夠接受它們作為HttpPost函數中的參數？

Answer 1

第一個答案是正確的，因為您可以遍歷表單集合以獲取表單元素中動態插入字段的值。 我只是想補充一點，你可以利用一些整潔的綁定。

下面的代碼接受針對操作發布的動態文本框的動態列表。 此示例中的每個文本框都與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();
    } 

輸出截圖

Answer 2

<form>元素中包含的每個組合框/ hiddenfield / textbox / ...都會在提交時發布。 如果您在運行中創建它們或默認情況下准備好它們並不重要。 然而，最大的區別在於，動態創建的那些不能真正利用我們習慣的那種整潔的綁定。 您還必須手動執行驗證等。

然后你會有一個像這樣的方法：

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

MSDN上的FormCollection