Jquery 关闭模式后，在不同的局部视图上渲染数据

我已经回顾了许多例子，但仍然无法使其发挥作用

我试图在模式关闭后返回数据对象以显示在不同的局部视图上，而不刷新页面

@using (Html.BeginForm("CreateWebOrder", null, FormMethod.Get))
{
    <div class="row">
        <div class="col-lg-6">

            @*//@Html.Partial("_DisplayShipToInfo", Model)*@

            @if (Model.Ship_To_Name == null && Model.WebOrderDetails.Count == 0)
            {
                <div class="pull-left col-lg-1">
                    <a class="btn btn-success" data-modal="" href="/WebOrder/CreateShipTo" id="btnCreate">
                        <span class="glyphicon glyphicon-plus"></span>
                    </a>
                </div>
                  **<div id="partialDiv">
                     @Html.Partial("_DisplayShipToInfo", Model)
                  </div>**
            }
            else
            {
                @Html.Partial("_DisplayShipToInfo", Model)
            }
        </div>

        <div class="col-lg-6" data-posey-ajax="true" data-posey-target="#DisplayBillToInfo">
            @Html.Partial("_DisplayBillToInfo", Model)
        </div>
    </div>
}

---

我认为最简单的方法是切换到“Ajax.BeginForm”，然后按照以下方式编写“Create”方法：

public async Task<ActionResult> Create(WebOrderVM webOrderVM)
{
    if (ModelState.IsValid)
    {
        Mapper.CreateMap<WebOrder, WebOrderVM>();

        WebOrder webOrder = Mapper.DynamicMap<WebOrder>(webOrderVM);

        db.WebOrders.Add(webOrder);
        await db.SaveChangesAsync();
    }

    if (this.Request.IsAjaxRequest)
        return PartialView("~/Views/Orders/Partial/_DisplayShipToInfo.cshtml", webOrderVM);
    else
        return View("OrderPage", webOrderVM);
}

“Ajax.BeginForm”应该是这样的：

@using (Ajax.BeginForm(
    "Create", "WebOrder", null,
    new AjaxOptions {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "partialDiv",
        OnBegin = function () { /* show progress dialog */ },
        OnComplete = function () { /* hide progress dialog */ }
    }))
{
    ...
    <div id="partialDiv">
        <!-- ajax result rendered here -->
    </div>
    ...
}

这是因为'Ajax.beginnform'targets'\u DisplayShipToInfo'所以当'POST'返回呈现的'div'标记时将被替换

---

注意：“ajax.beginnform”必须包含“jQuery.unobtrusive ajax.js”才能工作。

您能否澄清为什么“Create”控制器方法返回“JsonResult”而不是“PartialResult”？我最近实现了类似的行为，从“Html.BeginForm”切换到“Ajax.BeginForm”，然后如果“this.Request.IsAjaxRequest”==“true”，则返回“PartialResult”。这应该是ActionResult，而不是JsonResultHi。。。我不想改变这个。我几乎让它工作了。问题与页面刷新有关。我只需要刷新_DisplayShipTo partial view.RThomspon，我已更新以更好地反映您的具体问题。我非常感谢您的帮助。好吧，它可以工作，但不是我希望它工作的方式。在主视图上我有一个按钮。当用户单击按钮时，模态显示_AddShipToInfo局部视图。我试图做的是替换用户单击以显示模式的按钮，并将该按钮替换为_displayshiptopartial view。您给我的示例显示一个模式_displayshiptopartial view。模式关闭后。如何将_DisplayShipTo放置在按钮的同一位置@Html.Partial_DisplayShipToInfo，Model抱歉，我本想早点更新的。只需将'UpdateTargetId'更改为'partialDiv'，或更改所需任何元素的'id'，'Ajax.BeginForm'将用返回的HTML替换该元素。

function bindForm(dialog) {
    $('form', dialog).submit(function () {
        $('#progress').show();
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result.success) {
                    $('#myModal').modal('hide');
                    $('#progress').hide();
                    **$("#partialDiv").html(result)**
                    location.reload();
                } else {
                    $('#progress').hide();
                    $('#myModalContent').html(result);
                    bindForm();
                }
            }
        });
        return false;
    });

public async Task<ActionResult> Create(WebOrderVM webOrderVM)
{
    if (ModelState.IsValid)
    {
        Mapper.CreateMap<WebOrder, WebOrderVM>();

        WebOrder webOrder = Mapper.DynamicMap<WebOrder>(webOrderVM);

        db.WebOrders.Add(webOrder);
        await db.SaveChangesAsync();
    }

    if (this.Request.IsAjaxRequest)
        return PartialView("~/Views/Orders/Partial/_DisplayShipToInfo.cshtml", webOrderVM);
    else
        return View("OrderPage", webOrderVM);
}

@using (Ajax.BeginForm(
    "Create", "WebOrder", null,
    new AjaxOptions {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "partialDiv",
        OnBegin = function () { /* show progress dialog */ },
        OnComplete = function () { /* hide progress dialog */ }
    }))
{
    ...
    <div id="partialDiv">
        <!-- ajax result rendered here -->
    </div>
    ...
}