Html.BeginForm中的Ajax.BeginForm [英] Ajax.BeginForm inside Html.BeginForm

问题描述

我有一个用于编辑内容的视图，例如Orders.订单中的订单项可以任意添加.因此是一个主视图和嵌套的局部视图.

I have a view that is used for editing stuff, say Orders. Orders have line items that can be added arbitrarily. So a main view and nested partialviews.

每个partial应该具有一个ajax形式，用于调整每个订单项或其他任何数量的数量.

Each partial should have an ajax form for tweaking quantities of each line item or whatever.

因此:

Html.BeginForm()
{%>
    Ship to: blah blah blah  
    <%
    Ajax.BeginForm("EditLineItem", "Order", new { OrderLineItemID = Model.ObjectID }, itemAjaxOptions))
    {
        Item qty blah blah blah

        <--! (ajax form's submit button, etc.)-->
    }
    %>
    <--! (ajax form's submit button, etc.)-->
<%
}

我有一个看起来像这样的控制器:

I have a controller that looks like this:

[ActionName("Edit")]
[AcceptVerbs(HttpVerbs.Post)]
[ValidateAntiForgeryToken]
public ActionResult Edit(int orderID)
{
    blah, blah
}

[ActionName("EditLineItem")]
[AcceptVerbs(HttpVerbs.Post)]
[ValidateAntiForgeryToken]
public ActionResult EditLineItem(Guid orderLineItemID)
{
    blah, blah
}

我的麻烦是，当我提交Ajax表单时，我得到了Edit方法而不是EditLineItem方法.两条路线都被映射.是否有一些我不知道的陷阱，例如您不能在HTML表单内提交Ajax表单"?

My trouble is that when I submit the Ajax form, I get the Edit method instead of the EditLineItem methods. Both routes are mapped. Is there some gotcha like "you can't submit an Ajax form inside of an Html form" that I don't know about?

推荐答案

我前一阵子尝试了完全相同的方法.不管我做什么，都不会提交AJAX.因此，我认为答案是:是的，您不能在常规html表单内放置AJAX表单的提交按钮.

I tried the exact same thing a while ago. No matter what I did, it wouldn't do the AJAX submit. So I think the answer is: yes, you can't put a submit button for an AJAX form inside a regular html form.

但是，为什么要将部分提交与全部提交合并? 此imo最简单的解决方法是将JSON请求与jQuery一起使用.

But, why would you have partial submits merged with full submits? The easiest workaround to this imo would be to use JSON requests with jQuery.

例如，在更改下拉列表(id = Order)时更新数量跨度文本:

for instance, updating a quantity span text when you change a dropdownlist (id=Order):

<script type="text/javascript">
    $(document).ready(function() {
        $('select#Order').change(function() {
            $.getJSON('/Orders/UpdateQty/' + this.value, {},
              function(data) {
                  $('#qty').html(data);
              });
        });
    });

</script>

以及订单"控制器中的代码:

And the code in the "Orders" controller:

public class OrdersController : Controller
{
    public ActionResult UpdateQty(int id)
    {
        return Json(yourLibrary.getQuantities(id));
    }
}

此链接可能会有所帮助. 问候

This Link might help. Regards

所以..该链接不再存在.但是，由于有了互联网的备用机器，我们有了

So.. the link no longer exists. But thanks to the internet wayback machine, we have this copy :)

这篇关于Html.BeginForm中的Ajax.BeginForm的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！