Renderizar vista parcial usando jQuery no asp.net MVC

223

Como renderizo a vista parcial usando jquery?

Podemos renderizar a vista parcial assim:

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

Como podemos fazer o mesmo usando jquery?

Prasad
fonte
Você também pode dar uma olhada no artigo abaixo. tugberkugurlu.com/archive/… Segue uma abordagem diferente e aprimora o caminho.
tugberk
Pergunta estúpida. O UserDetails é uma exibição parcial como uma página cshtml: UserDetails.cshtml? Estou tentando carregar uma vista parcial. E normalmente eu usaria: @ Html.Partial ("~ / Views / PartialViews / FirstPartialViewTwo.cshtml")
George Geschwend
1
@GeorgeGeschwend, Nada é estúpido aqui, até que alguém possa responder a isso. UserDetails (UserDetails.cshtml) é a Vista Parcial dentro do Controlador de Usuário. Como nos comentários da resposta marcada, é melhor usar Url.Action em vez de codificar o caminho completo da exibição.
Prasad

Respostas:

286

Você não pode renderizar uma vista parcial usando apenas jQuery. Você pode, no entanto, chamar um método (ação) que renderize a exibição parcial para você e a adicione à página usando jQuery / AJAX. Abaixo, temos um manipulador de cliques de botão que carrega a URL da ação de um atributo de dados no botão e dispara uma solicitação GET para substituir o DIV contido na exibição parcial pelo conteúdo atualizado.

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

onde o controlador do usuário tem uma ação chamada detalhes que faz:

public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}

Isso pressupõe que sua visualização parcial seja um contêiner com o ID, detailsDivpara que você substitua a coisa toda pelo conteúdo do resultado da chamada.

Botão de exibição dos pais

 <button data-url='@Url.Action("details","user", new { id = Model.ID } )'
         class="js-reload-details">Reload</button>

Useré o nome do controlador e detailsé o nome da ação em @Url.Action(). Visualização parcial UserDetails

<div id="detailsDiv">
    <!-- ...content... -->
</div>
tvanfosson
fonte
Eu continuo recebendo solicitações ruins com este código de exemplo que você deu. Copiei como está e apenas alterei a ação do Controller para a qual deveria ir. Não sei para que serve o "usuário".
Chobo2
1
Acabei de usar alguns nomes de ação e controlador "prováveis", já que você não incluiu nenhum código pelo qual pudéssemos seguir. Apenas substitua "detalhes" por sua ação e "usuário" pelo nome do seu controlador.
Tvanfosson 08/11/2009
1
Obrigado novamente por uma ótima resposta tvanfosson.
alguma idéia de como isso funcionaria com o Razor? tentou $ .get ("@ Url.Action (\" Manifest \ ", \" Upload \ ", novo {id =" + key + "}))", função (dados) {$ ("<div />") .replaceWith (data);});
Patrick Lee Scott
1
@ Zapnologica - se você estiver recarregando a tabela inteira, talvez seja necessário reaplicar o plug-in, pois os elementos DOM aos quais ele estava originalmente conectado foram substituídos. Poderia ser melhor para conectá-lo a um método que retorna os dados como JSON, datatables.net/examples/data_sources/server_side.html
tvanfosson
152

Eu usei o carregamento do ajax para fazer isso:

$('#user_content').load('@Url.Action("UserDetails","User")');
Prasad
fonte
46
Geralmente, acho que é melhor você usar o auxiliar Url.Action em vez de codificar o caminho. Isso será interrompido se o site estiver em um subdiretório e não na raiz. O uso do auxiliar corrige esse problema e permite adicionar parâmetros com valores definidos dinamicamente.
tvanfosson
18
Você pode fazer $ ('# user_content'). Load ('@ Url.Content ("~ / User / UserDetails")') para contornar isso - eu geralmente uso esse método se eu precisar do javascript para dar um tapa nos parâmetros de string de consulta no final do URL
Shawson 30/04
Nesta resposta, o UserDetailsnome de uma ação é não uma visão parcial, certo?
Maxim V. Pavlov
4
@Prasad: Urls deve sempre ser avaliada utilizando @Url.Action("ActionName","ControllerName", new { area = "AreaName" } ), em vez de fazer handcoding .
Imad Alazani
3
@PKKG. @ Url.Action () é avaliado apenas no Razor. isso não funciona se o OP quiser colocar seu código em um arquivo js separado e fazer referência a ele.
Michael
60

@tvanfosson arrasa com sua resposta.

No entanto, eu sugeriria uma melhoria dentro de js e uma pequena verificação de controlador.

Quando usamos o @Urlhelper para chamar uma ação, receberemos um html formatado. Seria melhor atualizar o conteúdo ( .html) e não o elemento real ( .replaceWith).

Mais informações em: Qual é a diferença entre replaceWith () do jQuery () e html ()?

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

Isso é especialmente útil em árvores, onde o conteúdo pode ser alterado várias vezes.

No controlador, podemos reutilizar a ação, dependendo do solicitante:

public ActionResult Details( int id )
{
    var model = GetFooModel();
    if (Request.IsAjaxRequest())
    {
        return PartialView( "UserDetails", model );
    }
    return View(model);
}
Custodio
fonte
11

Outra coisa que você pode tentar (com base na resposta do tvanfosson) é:

<div class="renderaction fade-in" 
    data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>

E então na seção de scripts da sua página:

<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>

Isso renderiza seu @ Html.RenderAction usando ajax.

E para tornar tudo sans-manha, você pode adicionar um efeito de desvanecimento usando este 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;
}

Cara eu amo mvc :-)

Peter
fonte
Por que você cada função? Como funciona? Você usa algo como: data-actionurl = "@ Url.Action (" detalhes "," usuário ", novo {id = Model.ID} data-actionurl =" Outra ação "?
user3818229
Não, cada função faz um loop em todos os elementos html que possuem o atributo data-actionurl e o preenche invocando uma solicitação ajax para o método de ação. Então, vários <div class="renderaction fade-in" ...></div>elementos.
Peter
9

Você precisará criar uma Ação no seu Controller que retorne o resultado renderizado da exibição ou controle parcial "UserDetails". Em seguida, basta usar um Http Get ou Post do jQuery para chamar a Action para que o html renderizado seja exibido.

Chris Pietschmann
fonte
Como definir intervalo de tempo para atualizar os dados atualizados nesta função jQuery
Neeraj Mehta
5

Usando chamada Ajax padrão para obter o mesmo resultado

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

Eu fiz assim.

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

Detalhes Método:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }
Uma carrinha
fonte
0

Se você precisar fazer referência a um valor gerado dinamicamente, também poderá anexar parâmetros de sequência de caracteres de consulta após o @ 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);
    }
Rider Harrison
fonte