Загрузка частичного представления в ASP.NET MVC с использованием JavaScript

У меня есть около 15 частичных представлений, которые мне нужно отобразить на основе выбора вкладки меню пользователя. По сути, у меня есть эти 15 вкладок меню сбоку, и, основываясь на щелчке пользователя по этим вкладкам, я буду отображать содержимое этой вкладки на странице.

Также я использую нокаут здесь.

Итак, у меня есть эти 15 наблюдаемых нокаутов (self.tab_A(), self.tab_B(), ...self.tab_N()) заполняется при первой загрузке страницы.

Код у меня есть что-то вроде этого. Вот мнение.

<ul id="tabs">
    <li>
        <a data-bind="click: function(){ $root.ShowHideDiv(tab_A.id); }" style="cursor: pointer;">
           Tab A
        </a>
    </li>

    <li>
        <a data-bind="click: function(){ $root.ShowHideDiv(tab_B.id); }" style="cursor: pointer;">
         Tab B
        </a>
    </li>
    ...
    ...
</ul>

Частичные представления предварительно загружены, но скрыты от просмотра пользователем.

<ul>
    <li id="tab_A" style="display: none" class="hiddenDivs">
        @{Html.RenderPartial("~/Views/Claims/FroiReport/_Insurer.cshtml");}
    </li>

    <li id="tab_B" style="display: none" class="hiddenDivs">
        @{Html.RenderPartial("~/Views/Claims/FroiReport/_Insurer.cshtml");}
    </li>
</ul>

Отображение div с использованием скрипта на событие клика.

 self.ShowHideDiv = function (tabToShow) {
        console.log(tabToShow);
        $('.hiddenDivs').html('');
        $('#' + tabToShow).show();
    };

Теперь проблема в том, что пользовательский интерфейс, использующий этот код, работает нормально для 3-4 представлений, но дизайн для оставшихся представлений ломается, возможно, из-за того, что слишком много скрытых элементов div (я не уверен здесь).

Итак, я искал другие варианты, где я буду загружать конкретный вид только во время выполнения. Когда пользователь нажимает на вкладку, получить частичное представление и загрузить его.

Следовательно, я попробовал что-то вроде этого:

self.ShowHideDiv = function (tabToShow) {
    $('.hiddenDivs').html('');
    var view = getValueFromDict(dict, tabToShow); //gets the needed view from a dictionary in "~/Views/Products/CoolProducts/_ItemOne.cshtml" format
    $('.hiddenDivs').load('/Claims/ReturnPartialView/?partialViewName=' + view);
};

Но это не работает, так как у меня нет никакого Action/Controller, связанного с этими представлениями, я не могу загрузить представление напрямую, используя javascript/jquery.

Другой вариант, который я пробовал, - создание контроллера, который возвращает частичное представление.

public ActionResult ReturnPartialView(string partialViewName)
        {
            return PartialView(partialViewName);
        }

и называя это так:

self.ShowHideDiv = function (tabToShow) {
    $('.hiddenDivs').html('');
    var view = getValueFromDict(dict, tabToShow);
    $('.hiddenDivs').load('/MyController/ReturnPartialView/?partialViewName=' + view);
}

Теперь это загружает нужное мне представление, но наблюдаемая KnockOut, связанная с этим представлением, становится нулевой, делая это.

Я слышал, что шаблоны KO можно использовать для моего сценария, но я еще не пробовал шаблоны KO, чтобы решить эту проблему (что я собираюсь рассмотреть далее). Я хотел бы видеть, есть ли у кого-нибудь решение моей проблемы без использования шаблонов KO.

Большое спасибо за ваше терпение, чтобы попытаться понять это.

Источник

3 ответа

Вы можете сделать это с помощью jQuery в два этапа. Сначала, с вашей точки зрения, нажмите на требуемое действие контроллера после того, как dom будет готов или когда произойдет событие. У меня есть диспетчер вызовов здесь после того, как дом готов. Вы можете нажать "get" или "post", как пожелаете.
Здесь, в $.ajax, я использовал (async: false), так что оператор, который я сейчас вызываю, должен быть выполнен до того, как будет выполнен следующий оператор в функции.

<script>
    $(document).ready(function () { 
        $.ajax({
            url: '/Controller/ActionNAme',
            type: 'POST',
            async: false,
            data: { ModelField: value},
            success: function (result) {
                $("#your_desired_div_id").html(result);
            }
        });
    });
</script>

Вот действие. Действие возвращает модель представления в качестве результата функции ajax.post, а в функции записи ajax содержимое your_desired_div_id изменяется с частичным содержимым представления.

 [HttpPost]
        public ActionResult ActionNAme  (ModelName ModelField)
        {
            var dBList= (from myTable in db.tableModel where myTable .column == ModelField.column  select  myTable).ToList();
                 return PartialView("_PartialView", dBList) 

        }
Источник

У вас должно быть действие контроллера, которое возвращает частичное представление.

public ActionResult MyPartialView()
    {
        return PartialView("_MyPartialView", new MyPartialViewModel());
    }

Вы можете вызвать этот метод контроллера из JavaScript. Убедитесь, что частичное представление существует в папке Views в папке, которая соответствует имени вашего контроллера.

Надеюсь, поможет!

Источник

То же самое было объяснено здесь..

https://cmatskas.com/update-an-mvc-partial-view-with-ajax/

Источник
Другие вопросы по тегам