Render Partial View Using jQuery in ASP.NET MVC
Jak wyrenderować częściowy widok za pomocą jquery?
Możemy renderować widok częściowy w następujący sposób:
<% Html.RenderPartial("UserDetails"); %>
Jak możemy zrobić to samo używając jquery?
6 answers
Nie można renderować częściowego widoku używając tylko jQuery. Możesz jednak wywołać metodę (akcję), która wyrenderuje częściowy widok i dodać go do strony za pomocą jQuery/AJAX. Poniżej Mamy funkcję obsługi kliknięć przycisków, która ładuje adres url dla akcji z atrybutu data na przycisku i odpala żądanie GET, aby zastąpić DIV zawarty w widoku częściowym zaktualizowaną zawartością.
$('.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);
});
});
Gdzie kontroler użytkownika posiada akcję o nazwie details, która czy:
public ActionResult Details( int id )
{
var model = ...get user from db using id...
return PartialView( "UserDetails", model );
}
Zakłada się, że widok częściowy jest kontenerem o identyfikatorze detailsDiv
, więc wystarczy zastąpić całość zawartością wyniku wywołania.
Przycisk Widoku Nadrzędnego
<button data-url='@Url.Action("details","user", new { id = Model.ID } )'
class="js-reload-details">Reload</button>
Userdetails partial view
<div id="detailsDiv">
<!-- ...content... -->
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-09 23:25:00
Użyłem do tego Ajax load:
$('#user_content').load('@Url.Action("UserDetails","User")');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-01 17:46:51
@Tvanfosson rządzi swoją odpowiedzią.
Jednak sugerowałbym poprawę w js i małą kontrolę kontrolera.
Kiedy użyjemy helpera @Url
do wywołania akcji, otrzymamy sformatowany html. Lepiej byłoby zaktualizować zawartość (.html
), a nie rzeczywisty element (.replaceWith
).
Więcej o at: Jaka jest różnica między jQuery () i html ()?
$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
$('#detailsDiv').html(data);
});
Jest to szczególnie przydatne w drzewach, gdzie zawartość może być zmieniany kilka razy.
W kontrolerze możemy ponownie użyć akcji w zależności od requestera:
public ActionResult Details( int id )
{
var model = GetFooModel();
if (Request.IsAjaxRequest())
{
return PartialView( "UserDetails", model );
}
return View(model);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:32
Kolejną rzeczą, którą możesz spróbować (na podstawie odpowiedzi tvanfossona) jest to:
<div class="renderaction fade-in"
data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>
A następnie w sekcji Skrypty Twojej strony:
<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>
To renderuje twój @ Html.Renderowanie przy użyciu ajax.
I aby wszystko było fansy sjmansy możesz dodać efekt fade-in używając tego 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;
}
Man I love mvc: -)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-29 14:58:08
Musisz utworzyć akcję na kontrolerze, która zwróci renderowany wynik częściowego widoku lub kontrolki" UserDetails". Następnie wystarczy użyć HTTP Get lub Post z jQuery, aby wywołać akcję, aby wyświetlić renderowany html.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-15 03:25:40
Zrobiłem to tak.
$(document).ready(function(){
$("#yourid").click(function(){
$(this).load('@Url.Action("Details")');
});
});
Szczegóły Metody:
public IActionResult Details()
{
return PartialView("Your Partial View");
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-19 05:43:16