如何在MVC4中点击按钮后不重新加载,从子视图重定向到父视图?

时间:2016-02-11 04:40:52

标签: javascript c# jquery ajax asp.net-mvc-4

如何在按钮从 ChildView 点击 Parentview 时停止重新加载页面。那是

CustomerView

CustomerView

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

AreaPartialView

AreaPartialView

如果我点击区域附近的添加按钮,则会重定向到 AreaPartialView (LocalHost / Customer / AreaPartialView)。在区域部分视图中,我输入值并单击创建按钮,将数据保存在数据库中,并重定向到同一客户视图。现在我的问题是,如果我输入客户名称,街道,位置,地点,别名,然后我只选择该区域。现在该区域没有列在Dropdown中,我需要添加它,所以我点击该区域附近的添加按钮。它重定向到区域部分视图,我输入值,然后单击创建按钮。当我从区域部分视图中单击“创建”按钮时,它会在重新加载页面的同时重定向到“同一客户”视图。所以我的数据都丢失了,我输入了客户名称,街道,位置,地点,别名,所以我必须再次输入详细信息。这是我的问题。我不希望页面从部分视图重定向到CutomerView时重新加载,所以我决定使用ajax。但问题仍未解决,请任何人更正我的代码。

我的PartialView ChildView

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

1 个答案:

答案 0 :(得分:0)

像这种方法一样填写下拉列表,它不会重新加载页面,所有其他归档数据将保持不变。

 $.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