如何使用 JavaScript 從 Html.BeginForm() ASP.NET MVC 獲取值

Question

我想在按下“添加”按鈕后顯示用戶輸入的值。 但我不知道為什么我的代碼顯示未定義而不是值。

我將模型對象的多個實例作為列表傳遞給控制器​​。

這是我的觀點：

 @model List<MVCModel.Models.Student> <b>Result</b> @ViewBag.s <br /> @using (Html.BeginForm("Form", "Home", FormMethod.Post)) { <table> <tbody id="GenaratorList"> <tr> @{ int counter = 0; <td>Enter Name: </td> <td>@Html.TextBoxFor(m => m[counter].Name)</td> <td>Enter Age: </td> <td>@Html.TextBoxFor(m => m[counter].Age)</td> <td><input type="button" value="Add" onclick="addGenarator()" /></td> </tr> counter++; } <tbody> </table> <input type="submit" value="Submit Form"/> } <script> count = 0; function addGenarator() { var Name = $('#Name').val(); var Age = $('#Age').val(); var Student = "studentModels[" + count + "]"; $('#GenaratorList').append('<tr><td><input id="' + Student + '.Name" Name="' + Student + '.Name" type="text" class="form-control" readonly value="' + Name + '"></td><td><input id="' + Student + '.Age" Age="' + Student + '.Age" type="text" class="form-control" readonly value="' + Age + '"></td></tr>'); $('#Name,#Age').val(''); count++; } </script>

Answer 1

您尚未為文本框分配 ID，請分配 ID

 @model List<MVCModel.Models.Student> <b>Result</b> @ViewBag.s <br /> @using (Html.BeginForm("Form", "Home", FormMethod.Post)) { <table> <tbody id="GenaratorList"> <tr> @{ int counter = 0; <td>Enter Name: </td> <td>@Html.TextBoxFor(m => m[counter].Name, new {id = "Name"})</td> <td>Enter Age: </td> <td>@Html.TextBoxFor(m => m[counter].Age, new {id = "Age"})</td> <td><input type="button" value="Add" onclick="addGenarator()" /></td> </tr> counter++; } <tbody> </table> <input type="submit" value="Submit Form"/> } <script> count = 0; function addGenarator() { var Name = $('#Name').val(); var Age = $('#Age').val(); var Student = "studentModels[" + count + "]"; $('#GenaratorList').append('<tr><td><input id="' + Student + '.Name" Name="' + Student + '.Name" type="text" class="form-control" readonly value="' + Name + '"></td><td><input id="' + Student + '.Age" Age="' + Student + '.Age" type="text" class="form-control" readonly value="' + Age + '"></td></tr>'); $('#Name,#Age').val(''); count++; } </script>

Answer 2

您的表單 (HttpPost) API 應該會收到一個請求正文，其中包含一個名為 s 的數組。 您將根據您的 JS 代碼將數組作為（名稱）studentModels 傳遞。 而且您錯過了每個 Age 輸入的 name 屬性。

確保 View 中的數組名稱必須與 Controller 參數名稱匹配。 使用這個腳本

    <script>
    count = 0;
    function addGenarator() {
        var Name = $('#Name').val();
        var Age = $('#Age').val();
        var Student = "s[" + count + "]";

        var html = `
        <tr>
            <td><input id="${Student}.Name" name="${Student}.Name" type="text" class="form-control" readonly value="${Name}" /></td>
            <td><input id="${Student}.Age" name="${Student}.Age" type="text" class="form-control" readonly value="${Age}" /></td>
        </tr>
    `;
        $('#GenaratorList').append(html);
        $('#Name,#Age').val('');
        count++;
    }
</script>