关闭模态后，在不同的部分视图上渲染数据

Question

我已经复习了很多例子，但仍然没有能够使它工作。

我试图返回数据对象显示在不同的部分视图后，模态已关闭而不刷新页面。

@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>
}

我创建了一个局部视图"_AddShipToInfo"来添加数据。

和我有另一个局部视图"_DisplayShipToInfo"显示数据。

显示局部视图"_DisplayShipToInfo"包含以下内容:

@model PoseySqlApp.ViewModels.WebOrderVM
<div>
    <div>
        @Html.DisplayFor(model => model.Ship_To_Name)
    </div>
    <div>
        @Html.DisplayFor(model => model.Ship_To_Address_1)
    </div>
    <div>
        @Html.DisplayFor(model => model.Ship_To_Address_2)
    </div>
    <div>
        @Html.DisplayFor(model => model.Ship_To_City_Name)
        @Html.DisplayFor(model => model.Ship_To_State_Code)
        @Html.DisplayFor(model => model.Ship_To_Zip_Code)
    </div>
</div>

控制器动作正在返回数据对象。

    public async Task<JsonResult> Create(WebOrderVM webOrderVM)
    {
        if (ModelState.IsValid)
        {
            Mapper.CreateMap<WebOrder, WebOrderVM>();
            WebOrder webOrder = Mapper.DynamicMap<WebOrder>(webOrderVM);
            db.WebOrders.Add(webOrder);
            await db.SaveChangesAsync();
            return Json(new {webOrder, success = true });
        }
        return Json(webOrderVM, JsonRequestBehavior.AllowGet);
    }

如何从jquery中获得数据对象来呈现部分视图"_DisplayShipTo"。

Jquery

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;
    });

Answer 1

我认为最简单的方法是切换到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。BeginForm' target '_DisplayShipToInfo'，所以当'POST'返回渲染的'div'标签将被替换。

注意:你必须包含' jquery . unobtrusiusive - Ajax. js'为'Ajax. js'。