如何在 MVC4 中单击按钮后从子视图重定向到父视图而不重新加载？

Question

您好，当按钮从 ChildView 到 Parentview 时，如何停止页面重新加载。那就是

客户视图

CustomerView

在我的 CustomerView 中，我有一个名为 Area 的字段，并且在该区域附近我创建了一个添加按钮。假设我输入客户详细信息并选择区域并且该区域未在下拉列表中列出。所以我需要添加区域。所以我点击添加按钮。它从客户视图重定向到区域局部视图。我已经为该区域字段创建了一个区域局部视图。

区域部分视图

AreaPartialView

如果我单击 area 附近的添加按钮，它会重定向到 AreaPartialView (LocalHost/Customer/AreaPartialView)。在区域部分视图中，我输入值并单击 创建 按钮，它将数据保存在 DB 中，并重定向到相同的客户视图。现在我的问题是，如果我输入 CustomerName ，Street，Location，Place，Alias 然后只有我选择了 area 。现在该区域未在下拉列表中列出，这意味着我需要添加它，因此我单击该区域附近的添加按钮。它重定向到区域部分视图，我输入值并单击创建按钮。当我从区域部分视图中单击创建按钮时，它会在重新加载页面的同时重定向到同一客户视图。所以我在客户名称、街道、位置、地点、别名中输入的数据都丢失了，所以我必须再次输入详细信息。这是我的问题。我不想页面从部分视图重定向到 CutomerView 时重新加载，所以我决定使用 ajax。但是问题仍然没有解决，所以请任何人纠正我的代码。

我的部分视图 子视图

<div class="col-xs-12">
    <div class="container">
        <div class="col-sm-4">
            <div class="form-group">
                @Html.LabelFor(model => model.DisplayName, new { @class = "control-label" })
                @Html.TextBoxFor(model => model.DisplayName, new { @class = "form-control", type = "text" })
                @Html.ValidationMessageFor(model => model.DisplayName)
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                @Html.LabelFor(model => model.PrintName, new { @class = "control-label" })
                @Html.TextBoxFor(model => model.PrintName, new { @class = "form-control", type = "text" })
                @Html.ValidationMessageFor(model => model.PrintName)
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                @Html.Label("City")
                @Html.DropDownList("CityID", "Select")
            </div>
        </div>
    </div>
</div>
<p>
    <input type="submit" id="btncreate" value="Create" onclick='window.location ="@Url.Action("Create", "Customer" )"' />
</p>
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script>
    $("#btncreate").click(function () {
        $.ajax({
            url: "Customer/Create",
            type: "get",
            data: $("Customer").serialize(),
            success: function (result) {
                $("#ShowPartailView").html(result);
            }
        });
    });
</script>

}

实际上，我对 ajax 的了解并不多。所以我不知道我用什么代替了数据：$("?").serialize(), 所以请任何人检查我的 ajax 代码并给我正确的解决方案。

我的控制器编码来保存在局部视图中输入的数据

    public PartialViewResult ShowPartailView()
    {
        ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName");
        return PartialView("ShowPartailView");
    }


    [HttpPost]
    public ActionResult ShowPartailView(Area area)
    {
        ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName");
        if (ModelState.IsValid)
        {
            area.AreaID = Guid.NewGuid();
            area.IsActive = true;
            area.IsDeleted = false;
            area.CreatedDate = DateTime.Now;
            area.EditedDate = DateTime.Now;
            area.LastActiveOn = DateTime.Now;
            area.RowID = Guid.NewGuid();
            area.CreatedSessionID = Guid.NewGuid();
            area.EditedSessionID = Guid.NewGuid();
            area.OfflineMode = false;
            area.OfflineID = Guid.NewGuid();

            db.Areas.Add(area);
            db.SaveChanges();

        };


        return RedirectToAction("Create", "Customer"); 
    }

我的客户查看 ParentView

<div id="Area">
    <div class="col-sm-4">
        <div class="form-group">
            @Html.LabelFor(model => model.Area)
            @Html.DropDownList("AreaID", "Select")
            <input type='button' id=btnArea name=btnadd value='Add' onclick='window.location ="@Url.Action("ShowPartailView", "Customer" )"' />
        </div>
    </div>
</div>

Answer 1

像这种方法一样填写下拉菜单，它不会重新加载页面，所有其他已提交的数据将保持不变。

 $.ajax({
         type: "GET",
         url: "test/filldropdown",
         data: data,
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (jsonResult) {
               $.each(jQuery.parseJSON(jsonResult), function () {
               myDropDownList.append($("<option></option>").val(this['FieldDescription']).html(this['FieldCode']));
         });
        },
         failure: function (response) {
                    alert(response.d);
                }
       });

Click for an Example