Отрисовка частичного представления с помощью jQuery в ASP.NET MVC

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

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

@tvanfosson потрясает своим ответом.

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

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

Подробнее о: В чем разница между replaceWith () и 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 :-)

Вам нужно будет создать действие на вашем контроллере, которое возвращает результат визуализации частичного представления или элемента управления «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-адреса @. Действуйте следующим образом:

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