如何使用按钮单击事件 MVC 添加新表？

Question

我有一个带有文本框的表格，要求提供姓名和地址以供参考。如果需要，我希望用户能够添加更多内容，而不仅限于一个。如何通过单击“getMore”按钮将新表格添加到表单中？

<table style="width:50%;">
            <tr>
                <th colspan="2">Reference</th>
            </tr>
            <tr>
                <td>Name</td>
                <td><input id="txtRefName" type="text" /></td>
            </tr>
            <tr>
                <td>Address</td>
                <td><input id="txtRefAddress" type="text" /></td>
            </tr>
            <tr>
                <td>City</td>
                <td><input id="txtRefCity" type="text" /></td>
            </tr>
            <tr>
                <td>State</td>
                <td><input id="txtRefState" type="text" /></td>
            </tr>
            <tr>
                <td>Zip</td>
                <td><input id="txtRefZip" type="text" /></td>
            </tr>            
            <tr>
                <td>Phone</td>
                <td>(H)<input id="txtOtherHPhone" type="text" /><br />
                    (W)<input id="txtOtherWPhone" type="text" />
                </td>
            </tr>
        </table>
        <br />
    <asp:Label ID="Label1" runat="server" Width="30%"></asp:Label>
    <input  type="button" name="getPrev" value="Prev" onclick="history.back(-1)" />
    <asp:Label ID="Label2" runat="server" Width="10%"></asp:Label>  
    <input type="submit" name="getMore" value="More..." />
    <asp:Label ID="Label3" runat="server" Width="10%"></asp:Label>

Answer 1

只需检查this article。您可以毫无痛苦地绑定到引用列表。您现在需要做的只是稍微修改您的控制器并使用 javascript 将另一个表添加到 html 并在单击按钮时更新标识符。使用 jQuery 很容易做到。

Answer 2

一种方法是设置您的操作方法以接受已发布的控件，将数据提交到数据库，并使用添加的表重新创建视图（类似于 Web 表单中的回发）。回发可以包装在 AJAXForm 中，以帮助使其成为丰富的用户界面。

您还可以使用 DOM 以编程方式创建表格，方法是使用 DOM 创建表格、行、单元格和控件元素。

最后，JQuery 可以通过 AJAX 将部分视图流式传输到客户端。您可以将表格设置为部分视图，在单击链接时将其流式传输到客户端。

这些选项中的任何一个对您有吸引力吗？那我可以给你更多的细节。

编辑：要使用 JQUery，您可以向控制器添加一个操作方法，例如：

public class TestController {
public ActionResult GetAsync()
{
     return PartialView("MyView");
}
}

在视图中，使用jquery，你可以这样做：

$.get("/Test/GetAsync", function(data) {
    //Data is html so we just need to clear the previous result (if needed)
    //And add the new data

    $("#paneltoshow").html(data);
    //or use an alternate approach like:
    $("<div/>").html(data).appendTo("#paneltoappendto");
});

查看 JQuery.com，文档选项卡以获取更多信息（操作选项卡，手边没有链接，抱歉）。