如何在与 PartialView A 交互时从 PartialView A 切换到 PartialView B？答案

【问题标题】：How to switch to PartialView A to PartialView B on interaction with PartialView A?如何在与 PartialView A 交互时从 PartialView A 切换到 PartialView B？
【发布时间】：2019-04-09 13:23:40
【问题描述】：

有一个ParentPage，它在右侧窗格中显示PartialViewA。在PartialViewA 中有一个下拉菜单。在选择某个值时，我想用PartialViewB 替换PartialViewA。这可能吗？我该怎么做？

我试过了： (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 中调用 PartialViewA 时，或者相反，整个页面（连同父页面）被替换为仅 PartialView 的输出。

【问题讨论】：

您需要使用ajax调用返回部分视图的服务器方法，并将其附加到成功回调中的DOM。

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

【解决方案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");
}

【讨论】：