与PartialView A交互时如何从PartialView A切换到PartialView B?

时间:2018-11-06 06:54:14

标签: javascript asp.net .net asp.net-mvc asp.net-mvc-5

在右侧窗格中,有一个ParentPage显示PartialViewA。 在PartialViewA中有一个下拉列表。选择某些值后,我想将PartialViewA替换为PartialViewB。这可能吗?我该怎么办?

我尝试过:PartialViewA:)

<script>
    $(document).ready(function () {
        alert('aa');
        $("#drpisEmpty").change(function () {
            if ($(this).val() == "loaded") {
                alert($(this).val());
            }
            else {              
                window.location.href = '@Url.Action("PartialViewB", "ParentController", new { CargoType = "PartialViewA" })';

            }
        });
    });
</script>

CallCargoTypePartialView:(ParentController)

  public ActionResult CallCargoTypePartialView(string CargoType)
        {
            if (CargoType == "PartialViewA")
            {
                return View("_PartialViewA");
            }
            else if (CargoType == "PartialViewB")
            {
                return View("_PartialViewB");
            }
            return View("_PartialViewA");
        }

我面临的问题是,当我从PartialViewB或verce中调用PartialViewA时,整个页面(连同父项)都被PartialView的外部替换。

1 个答案:

答案 0 :(得分:1)

此行出现问题:

window.location.href = '@Url.Action("PartialViewB", "ParentController", new { CargoType = "PartialViewA" })';

通过使用location.href,您将用控制器操作返回的页面替换现有页面中的整个元素,因此现有视图被新视图覆盖。

假设您具有以下设置:

<div id="partial">
    @Html.Partial("_PartialViewA")
</div>

然后,您需要在else块内执行AJAX回调,并将其附加到success由先前部分视图的占位符标记的结果内,如下例所示:

<script>
    $(document).ready(function () {
        alert('aa');
        $("#drpisEmpty").change(function () {
            if ($(this).val() == "loaded") {
                alert($(this).val());
            }
            else {              
                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("CallCargoTypePartialView", "ParentController")',
                    data: { CargoType: "PartialViewB" }, // example passed data
                    success: function (result) {
                        // replace first partial view with the second one
                        $('#target').html(result);
                    },
                    error: function (...) {
                        // error handling
                    }
                });

            }
        });
    });
</script>

还要注意,您应该返回PartialView()而不是View()

public ActionResult CallCargoTypePartialView(string CargoType)
{
   if (CargoType == "PartialViewA")
   {
       return PartialView("_PartialViewA");
   }
   else if (CargoType == "PartialViewB")
   {
       return PartialView("_PartialViewB");
   }
   return PartialView("_PartialViewA");
}