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

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

您还可以使用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，文档选项卡以获取更多信息（操作选项卡，没有方便的链接，抱歉）。

Answer 2

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

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

2 个答案: