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

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

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

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

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

Вы не можете визуализировать частичное представление, используя только 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>

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

$('#user_content').load('@Url.Action("UserDetails","User")');

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

Еще одна вещь, которую вы можете попробовать (основываясь на ответе 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 :-)

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

Использование стандартного вызова 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);
        }

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

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

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

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

Если вам нужно сослаться на динамически генерируемое значение, вы также можете добавить параметры строки запроса после @ 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);
    }