代码之家 › 专栏 › 技术社区 › MrM

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

asp.net-mvc html asp.net .net c#

MrM · 技术社区 · 14 年前

我有一个带有文本框的表格,询问姓名和地址以供参考。如果需要的话,我希望用户能够添加更多内容,而不仅仅是一个。如何通过单击“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>

2 回复 | 直到 14 年前

zihotki 14 年前

检查一下就行了 this article 。您可以绑定到引用列表,而不会感到任何痛苦。现在您只需要稍微修改一下控制器,并使用javascript将另一个表添加到HTML中,单击按钮即可更新标识符。使用jquery很容易。

Brian Mains 14 年前

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

您还可以使用JavaScript以编程方式创建表,方法是使用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,文档选项卡了解更多信息(操作选项卡,没有现成的链接,抱歉)。