Como renderizo a vista parcial usando jquery?
Podemos renderizar a vista parcial assim:
<% Html.RenderPartial("UserDetails"); %>
Como podemos fazer o mesmo usando jquery?
Como renderizo a vista parcial usando jquery?
Podemos renderizar a vista parcial assim:
<% Html.RenderPartial("UserDetails"); %>
Como podemos fazer o mesmo usando jquery?
Respostas:
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, detailsDiv
para 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>
Eu usei o carregamento do ajax para fazer isso:
$('#user_content').load('@Url.Action("UserDetails","User")');
UserDetails
nome de uma ação é não uma visão parcial, certo?
@Url.Action("ActionName","ControllerName", new { area = "AreaName" } )
, em vez de fazer handcoding .
@tvanfosson arrasa com sua resposta.
No entanto, eu sugeriria uma melhoria dentro de js e uma pequena verificação de controlador.
Quando usamos o @Url
helper 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);
}
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 :-)
<div class="renderaction fade-in" ...></div>
elementos.
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.
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);
}
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");
}
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);
}