3

使用我的一些 MVC 3 Razor 视图时，我发现需要嵌套表单，这是不可能的（在 HTML 中不允许）。

有一个表格，针对特定操作，包含一个表格。但是在 some/all/one_particular tablerow 我需要针对一个单独的操作。例如：

@using (Html.BeginForm("EditPersons"))
{
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        @for (int i=0; i < Model.Persons.Count; i++)
        {
            <tr>
                <td>@Html.TextBox(...)</td>
                <td>@Html.TextBox(...)</td>
            </tr>
        }
            <tr>
                <td></td>
                <td>
                    @using (Html.BeginForm("AddPerson")
                    {
                        <input type="submit" value="Add person" />
                    }
                </td>
            </tr>
    </table>
}

现在，我显然可以将“添加人员”按钮放在整个表格下方，但是我如何让它与第二个表格列对齐？

另外，我可以让“添加人员”按钮在隐藏字段中放置一些“命令”，并让 EditPersons 操作检查是否应该添加人员或为现有人员保存更新的数据，但我觉得这有点击败单一目的行为的范式（与可怕的老式 ASP“自发”形式相反）。

那么，我该如何解决呢？

4

4 回答 4

2

嗨，我不明白您如何需要 2 个表单以及为什么需要使用服务器端技术。

我确信有人能够使用 asp.net mvc 技术找到解决方案，但就我而言，javascript 会轻而易举地做到这一点。因此，您希望能够在提交整个表单之前向服务器发送一些值，或者您可能希望表单的某些部分以不同的方式工作，而不是作为一个整体工作。没关系。无论哪种方式 javascript 都是您的语言，请考虑对您的代码进行这些更改（使用 jQuery）：

@using (Html.BeginForm("EditPersons"))
{
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        @for (int i=0; i < Model.Persons.Count; i++)
        {
            <tr>
                <td>@Html.TextBox(...)</td>
                <td>@Html.TextBox(...)</td>
            </tr>
        }

        <tr>
            <td><input type="text" id="field" name="field"/></td>
            <td>
                <input type="button" id="btnAddPerson" value="Add person" />
            </td>
        </tr>
        <tr><td colspan="2"><input type="submit" value="send the whole thing" /></td></tr>

 }
 <script>
    $(document).ready(function(){
        $("#btnAddPerson").click(function(event){
            event.stopPropagation();
            $.post("/actionTohandle/addperson", { person : $("#field").val()}, function(data){
                //do something with the result
            })
        })
    })
 </script>

如果单击添加人员按钮，它将向服务器端发送 POST 请求，FormCollection 对象将只有一个键，即 collection["field"]。我正在调用的操作 (AddPerson) 在 ActionToHandleController 上。另一方面，如果您单击提交按钮，您将在（我猜）PersonsController 上调用 EditPersons。因此，您可以在 2 个不同的位置（控制器）上执行 2 个不同的操作。相同的形式。这个例子只是冰山一角。这是 ASP.NET MVC 的一大特色，您拥有更多的灵活性，并且并非所有内容都必须作为服务器端脚本处理。

于 2012-10-10T01:25:49.280 回答
0

仅供参考，将表单标签放在表格中（即环绕 tr 标签）是不合法的 HTML。它适用于某些（大多数？）浏览器，但不能保证它会起作用，也不能保证移动浏览器会支持它。

那么问你如何做一些无效的事情来避免做其他同样无效的事情到底有什么意义呢？

正确的方法是将表格包装在一个表格中。然后，您在每一行上使用提交按钮，但您给每个按钮一个稍微不同的 id，例如“Submit_1”，然后您确定哪个行按钮被点击了哪个按钮，哪个按钮出现在发布的值中。

其他可能性是让 JavaScript 在您单击按钮时执行：

<input type="button" onclick="SubmitMyForm(15)" />

您有一个名为 SubmitMyForm 的方法，该方法采用行号参数（或您要使用的任何其他标识符，也许您可​​以使用 jquery 提取数据属性值来标识行）。

最后，在表格的底部，您可以调用不同的方法，例如“AddPerson”，它将修改表单的操作属性，然后调用 form.submit() 并将其发布到不同的操作。虽然老实说，在大多数情况下，您不需要为此发帖。您只需使用重定向到新页面的链接即可。

在任何情况下，您都不需要嵌套表单（无效），即使将 tr 包装在表单中是合法的（实际上并非如此）。

于 2012-10-09T23:02:33.673 回答
0

目前尚不清楚您要通过这种形式实现什么......我想说应该只有一种形式：编辑或创建 - 哪个应该决定您的服务器（或客户端）逻辑。但是，如果您确实需要两个“嵌套”表单，则可以考虑使用 jquery .ajax 方法调用操作

于 2012-10-10T00:30:50.277 回答
0

我目前正在做类似的事情。我将要执行的操作存储在输入元素中。

<input type="submit" value="Add person" data-action"/AddPerson">

然后通过订阅单击或提交表单Action=""，使用.Data()将表单更改为数据操作。

于 2012-10-09T22:46:36.050 回答