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

Ответ 1

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

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

Ответ 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) {
        $detailDiv.replaceWith(data);         
    });
});

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

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>

Ответ 3

@tvanfosson скалы с его ответом.

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

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

Подробнее о: В чем разница между jQuery's replaceWith() и html()?

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

Ответ 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.

И для того, чтобы сделать это все fany 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: -)

Ответ 5

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

Ответ 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);
        }

Ответ 7

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

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

Подробный метод:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

Ответ 8

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