Визуализация частичного представления с помощью jQuery in 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) {
        $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>

@tvanfosson качается с его ответом.

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

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

на: в чем разница между jQuery replaceWith() и html()?

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

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

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

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.

и чтобы сделать все это fansy 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, чтобы вызвать действие, чтобы получить отображаемый HTML-код будет отображаться.

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

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

Способ Детали:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }