Как переключиться на PartialView A на PartialView B при взаимодействии с PartialView A? - PullRequest
Новая
       13

Как переключиться на PartialView A на PartialView B при взаимодействии с PartialView A?

0 голосов
/ 06 ноября 2018

Существует ParentPage, который отображает PartialViewA в правой панели. В пределах PartialViewA есть выпадающий список. При выборе определенного значения я хочу заменить PartialViewA на PartialViewB. Это возможно? Как мне это сделать?

Я пытался: (* 1 010 *:) * +1011 * 

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

Проблема, с которой я сталкиваюсь, заключается в том, что когда я вызываю PartialViewA из PartialViewB или наоборот, вся страница (вместе с родителем) заменяется только выходом PartialView.

1 Ответ

0 голосов
/ 06 ноября 2018

Проблема возникает в этой строке: 

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

Используя location.href, вы заменяете целые элементы существующей страницы на возвращенную страницу из действия контроллера, поэтому существующее представление перезаписывается новым.

Предполагается, что у вас есть эта настройка: 

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

Затем необходимо выполнить обратный вызов AJAX внутри блока else и добавить его в результат 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");
}
...