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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

UserDetails частичное представление

<div id="detailsDiv">
    <!-- ...content... -->
</div>

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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

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

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }