asp.net-mvc - MVC POST 到 Controller 操作并从 ListView 传递参数？

Question

我正在做一个项目，另一个开发人员有一些这样的代码......

<script type="text/javascript">
    function submitForm() {
        document.forms[0].submit();
    }
</script>       


@foreach (var product in Model)
{
    using (Html.BeginForm("SelectProduct", "Home", new {productId = product.Id}))
    {
    <tr>
        <td>
            <a href="#" id="submit_form" onclick="submitForm();">@product.Id</a>
        </td>
        <td>
            @product.Name
        </td>
    </tr>
    }
}

它构建了一个 2 列表，其中包含可点击的产品 ID 和产品名称。
单击 productId 时，它会发布到家庭 Controller 上的 SelectProduct 操作

[HttpPost]
public ActionResult SelectProduct(Guid productId)
{
   ...
}

我喜欢这个，因为它是一个 POST 并且不会在 url\querystring 中发送 productId。
(我更改了此示例的代码，这些 arnt 实际上是 productIds 和 id 更喜欢在 url 中没有这些数据)

但我不喜欢这个因为...

它不起作用，因为它总是发布表单[0]

不确定我喜欢它如何为每个产品创建一个表单

它搞乱了我正在处理的 jquery 移动 ListView ，格式很奇怪。我不完全确定为什么，但因为形式而思考。

相比之下，我有一个带有 anchor 标记的以下 ListView ，并且呈现得很好。

<ul data-role="listview" data-inset="true" data-dividertheme="b">
    <li><a href="@Url.Action("Index", "SomeControllerA")">Some Controller A</a> </li>
    <li><a href="@Url.Action("Index", "SomeControllerB")">Some Controller B</a> </li>
    <li><a href="@Url.Action("Index", "SomeControllerC")">Some Controller C</a> </li>
</ul>

所以我的问题是...

如何在不使用单独的重复表单的情况下制作具有相同功能的类似产品表/列表(即单击 productID 并 POST 到传递 productId 但不在查询字符串中的 Controller 操作)？

我在想也许只有 1 个表单，但不知何故正确的 productID 被传递给 Controller ​​。这样我就可以在@foreach(模型中的var product)之外拥有Html.BeginForm。

我想我正在尝试做一些类似于 LinkBut​​ton 过去在网格中所做的 Web 表单。
就像我想要 ActionLinks 但我想要它们 POST 而不是 GET。

感谢任何帮助。

谢谢!

Answer 1

您的代码 a 有许多错误点。我建议使用 ajax 的替代方法

1. 使用 foreach 您可以在一个页面内制作多个表单。并在提交时提交第一个表单( document.forms[0].submit() )。独自的

重写你的html如下

@foreach (var product in Model)
{

<tr>
    <td>
        <a href="#" id="submit_form" onclick="submitForm(@product.Id);"></a>
    </td>
    <td>
        @product.Name
    </td>
</tr>

}

并使用 jquery 对服务器进行 ajax 调用。

var productid;
        function submitForm(productid) {

        $.ajax({
            type: 'GET',
            url: "/Home/SelectProduct?productId="+productid,

            contentType: "application/json; charset=utf-8",
            success: function (_results) {
               $("#resultdiv").html(_results);
            },
            error: function (_results) {
            }
        });
    }

并接受 productid 作为查询字符串

var ProductId=HttpContext.Request.QueryString["productId"]

2.如果你遵循同样的方法......
您希望查询字符串作为操作方法中的参数。这是错的

你可以这样接受。
(在以下代码段 using (Html.BeginForm("SelectProduct", "Home", new {productId = product.Id})) 中，您添加的 productId 属性可以作为服务器端方法中的查询字符串被接受。)

var ProductId=HttpContext.Request.QueryString["productId"]