Question

我有一个主要表单，其中包含两个部分视图： “_ OrderDetail” ， “_ OrderDetailList”

“_ OrderDetailList” 有一个名为 “OrderDetailForm”的表单 。当我提交OrderDetailForm的按钮时，我想将其数据发送到操作并返回具有引导网格的 “_ OrderDetailList” 。我想在主窗体中加载“_OrderDetailList”而不刷新页面。

主要表格：

@using (Html.BeginForm(null, null, FormMethod.Post, new { role = "form" ,id="MainForm"}))
{
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

   /////some helpers...

<div class="clr"></div>


 <div id="stuffOrderDetail">

   @Html.Partial("_OrderDetail")
   </div>
 <div id="stuffOrderDetail">
 @Html.Partial("_OrderDetailList")
        </div>

<div class="box-footer">
            <input type="submit" value="ثبت" class="btn btn-primary" />
        </div>

    }

_OrderDetail PartialView ：

    @using (Html.BeginForm(null,null, FormMethod.Post, new { role = "form", @id = "OrderDetailForm" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
 //some fields...
   <div class="box-footer">
          <input type="submit" id="OrderDetailAddBtn" value="اضافه" class="btnbtn-success" />
        <input type="button" id="OrderDetailDeleteBtn" value="حذف" class="btn btn-danger" />

    </div>

脚本：

<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script>  

$("#OrderDetailForm").submit(function (ev) {
    $.ajax({
        url: '@Url.Action("AddOrderDetail", "Orders", new { area = "adminsarea" })',
                type: 'post',
                success: function (result) {
                    $("#stuffOrderDetailList").html(result);
                }
            });
        ev.preventDefault();
  //      return false;
    });
  </script>
  @Scripts.Render("~/bundles/jqueryval")

操作

 [HttpPost]
public ActionResult AddOrderDetail(OrderDetailViewModel orderDetail)
    {
        List<OrderDetailViewModel> orderDetailList = new List<OrderDetailViewModel>();

 ////some code....

        return PartialView("_OrderDetailList", orderDetailList);
    }

当我点击“_OrderDetail”提交按钮时，主页会刷新，任何内容都无法从动作中获取。我该怎么解决？感谢...

如何在不刷新主表单的情况下发送局部视图表单并加载另一个部分视图？

0 个答案: