Визуализация частичного представления с использованием jQuery в ASP.NET MVC

223

Как мне сделать частичное представление, используя jquery?

Мы можем сделать частичное представление следующим образом:

<% Html.RenderPartial("UserDetails"); %>

Как мы можем сделать то же самое, используя jquery?

Прасад
источник
Вы также можете посмотреть статью ниже. tugberkugurlu.com/archive/… Это следует за другим подходом и улучшает путь.
Tugberk
Глупый вопрос. Является ли UserDetails частичным представлением в виде cshtml-страницы: UserDetails.cshtml? Я пытаюсь загрузить частичное представление. И обычно я бы использовал: @ Html.Partial ("~ / Views / PartialViews / FirstPartialViewTwo.cshtml")
Джордж Гешвенд
1
@ GeorgeGeschwend, Здесь нет ничего глупого, пока кто-то не может ответить на это. UserDetails (UserDetails.cshtml) - это частичное представление внутри контроллера пользователя. Как и в комментариях к помеченному ответу, лучше использовать Url.Action вместо жесткого кодирования полного пути представления.
Прасад

Ответы:

286

Вы не можете визуализировать частичное представление, используя только jQuery. Однако вы можете вызвать метод (действие), который будет отображать для вас частичное представление, и добавить его на страницу с помощью jQuery / AJAX. Ниже у нас есть обработчик нажатия кнопки, который загружает URL-адрес действия из атрибута данных на кнопке и запускает запрос GET, чтобы заменить DIV, содержащийся в частичном представлении, на обновленное содержимое.

$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    var $detailDiv = $('#detailsDiv'),
        url = $(this).data('url');

    $.get(url, function(data) {
        $detailDiv.replaceWith(data);         
    });
});

где пользовательский контроллер имеет действие с именем details, которое выполняет:

public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}

Это предполагает, что ваше частичное представление является контейнером с идентификатором detailsDiv так что вы просто заменяете всю вещь содержимым результата вызова.

Кнопка родительского просмотра

 <button data-url='@Url.Action("details","user", new { id = Model.ID } )'
         class="js-reload-details">Reload</button>

Userимя контроллера и имя detailsдействия в @Url.Action(). UserDetails частичное представление

<div id="detailsDiv">
    <!-- ...content... -->
</div>
tvanfosson
источник
Я получаю плохой запрос с этим примером кода, который вы дали. Я скопировал как есть и просто изменил действие контроллера, на которое он должен перейти. Я не уверен, что "пользователь" для.
chobo2
1
Я просто использовал некоторые «вероятные» имена контроллеров и действий, так как вы не включили код, который мы могли бы использовать. Просто замените «детали» вашим действием, а «пользователя» - именем вашего контроллера.
tvanfosson
1
Еще раз спасибо за отличный ответ tvanfosson.
Любая идея, как это будет работать с Razor? пробовал $ .get ("@ Url.Action (\" Manifest \ ", \" Upload \ ", new {id =" + key + "})", функция (data) {$ ("<div />") .replaceWith (data);});
Патрик Ли Скотт
1
@Zapnologica - если вы перезагружаете всю таблицу, вам может потребоваться повторно применить плагин, поскольку элементы DOM, к которым он был первоначально подключен, были заменены. Возможно, было бы лучше подключить его к методу, который возвращает данные в виде JSON, datatables.net/examples/data_sources/server_side.html
tvanfosson
152

Я использовал ajax load для этого:

$('#user_content').load('@Url.Action("UserDetails","User")');
Прасад
источник
46
Как правило, я думаю, что лучше использовать хелпер Url.Action вместо жесткого кодирования пути. Это сломается, если ваш веб-сайт находится в подкаталоге, а не в корневом каталоге. Использование помощника устраняет эту проблему и позволяет добавлять параметры с динамически установленными значениями.
tvanfosson
18
Вы можете сделать $ ('# user_content'). Load ('@ Url.Content ("~ / User / UserDetails")'), чтобы обойти это - я часто использую этот метод, если мне нужен javascript, чтобы ударить по параметрам строки запроса в конце URL
Шоусон
В этом ответе UserDetailsназвание действия, а не частичное представление, верно?
Максим В. Павлов
4
@Prasad: Urls всегда должны быть оценены с использованием @Url.Action("ActionName","ControllerName", new { area = "AreaName" } )вместо делать Handcoding .
Имад Алазани
3
@PKKG. @ Url.Action () оценивается только в Razor. это не работает, если OP хочет поместить свой код в отдельный файл js и сослаться на него.
Майкл
60

@tvanfosson ошеломляет своим ответом.

Тем не менее, я бы предложил улучшение в js и небольшую проверку контроллера.

Когда мы используем @Urlпомощник для вызова действия, мы собираемся получить отформатированный HTML. Было бы лучше обновить содержимое ( .html), а не фактический элемент (.replaceWith ).

Подробнее об этом: в чем разница между replaceQith () и html () в jQuery?

$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
    $('#detailsDiv').html(data);
}); 

Это особенно полезно в деревьях, где содержимое может быть изменено несколько раз.

На контроллере мы можем повторно использовать действие в зависимости от запрашивающей стороны:

public ActionResult Details( int id )
{
    var model = GetFooModel();
    if (Request.IsAjaxRequest())
    {
        return PartialView( "UserDetails", model );
    }
    return View(model);
}
Custodio
источник
11

Еще одна вещь, которую вы можете попробовать (основываясь на ответе tvanfosson):

<div class="renderaction fade-in" 
    data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>

А затем в разделе сценариев вашей страницы:

<script type="text/javascript">
    $(function () {
        $(".renderaction").each(function (i, n) {
            var $n = $(n),
                url = $n.attr('data-actionurl'),
                $this = $(this);

            $.get(url, function (data) {
                $this.html(data);
            });
        });
    });

</script>

Это делает ваш @ Html.RenderAction с помощью ajax.

И чтобы сделать все это фанатским sjmansy, вы можете добавить эффект постепенного появления, используя этот css:

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity: 0; /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    -o-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

Человек я люблю MVC :-)

Питер
источник
Почему каждый из вас работал? Как это устроено? Есть ли что-то вроде: data-actionurl = "@ Url.Action (" details "," user ", new {id = Model.ID} data-actionurl =" Another Action "?
user3818229
Нет, каждая функция перебирает все html-элементы, которые имеют атрибут data-actionurl, и заполняет его, вызывая ajax-запрос для метода действия. Итак, несколько <div class="renderaction fade-in" ...></div>элементов.
Питер
9

Вам нужно создать Action на вашем контроллере, который возвращает результат визуализации частичного представления или элемента управления «UserDetails». Затем просто используйте Http Get или Post из jQuery, чтобы вызвать Action для отображения отображаемого html.

Крис Питчманн
источник
Как установить интервал времени для обновления обновленных данных в этой функции jQuery
Neeraj Mehta
5

Использование стандартного вызова Ajax для достижения того же результата

        $.ajax({
            url: '@Url.Action("_SearchStudents")?NationalId=' + $('#NationalId').val(),
            type: 'GET',
            error: function (xhr) {
                alert('Error: ' + xhr.statusText);

            },
            success: function (result) {

                $('#divSearchResult').html(result);
            }
        });




public ActionResult _SearchStudents(string NationalId)
        {

           //.......

            return PartialView("_SearchStudents", model);
        }
DevC
источник
0

Я сделал это так

$(document).ready(function(){
    $("#yourid").click(function(){
        $(this).load('@Url.Action("Details")');
    });
});

Метод деталей:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }
Фургон
источник
0

Если вам нужно сослаться на динамически генерируемое значение, вы также можете добавить параметры строки запроса после @ URL.Action, например, так:

    var id = $(this).attr('id');
    var value = $(this).attr('value');
    $('#user_content').load('@Url.Action("UserDetails","User")?Param1=' + id + "&Param2=" + value);


    public ActionResult Details( int id, string value )
    {
        var model = GetFooModel();
        if (Request.IsAjaxRequest())
        {
            return PartialView( "UserDetails", model );
        }
        return View(model);
    }
Райдер Харрисон
источник