Czy można uruchomić funkcję javascript po renderowaniu częściowym w MVC Asp.net?

Question

Pozwolę sobie odpowiedzieć na to pytanie, ponieważ jestem nowy w MVC.

Mam instancji, w której renderuję siatkę devexpress w częściowym widoku.

@Html.Partial("MyGridPartial", Model) 

Muszę uruchomić funkcję javascript w momencie, gdy model został zapełniony za pomocą renderowania częściowego widoku. Próbowałem to zrobić przez to. :

settings.ClientSideEvents.EndCallback 

Mogę dostać się do tego punktu, ale w tym czasie nie mam samego modelu zaludnionego, więc to nie robi dobrze. Zastanawiam się, czy ktoś jest świadomy ogólnego sposobu kopania/dołączania do renderowania częściowego widoku, aby przeskoczyć do jakiegoś kodu JavaScript javascript.

Answer 1

Jeśli renderujesz to częściowe jako część normalnego przepływu renderowanego widoku, odpowiedź brzmi NIE.

Powód tego jest częściowy jest konwertowany na ciąg znaków, zanim widok rodzica zostanie wyrenderowany. W tym momencie żadna ze znaczników nie została zauważona przez przeglądarkę, nie przeczytano jscript.

Jeśli, z drugiej strony, to sprawiło, że częściowe w funkcji jQuery Ready:

$(document).ready(function() {

Myślę, że trzeba użyć Akcja Partial (Częściowe że jest wywoływana za pomocą metody działania) . Akcja partials można nazwać obrębie funkcji JQuery gotowości poprzez odniesienie url (restfully):

$('#divMyGridPartial').load('/Grids/MyGridPartial/{id}'); 

i każdy śledzić funkcje JScript/jQuery można nazwać w gotowej serii.

Inną zaletą akcji Częściowej jest model utworzony w ramach metody działania i może być tworzony kontekstowo do tego, czego potrzebujesz (najlepiej wyłączając przekazany identyfikator).

Answer 2

Jeśli jest to PartialView, który renderujesz w widoku na Servinie, metoda Dave'a będzie działać najlepiej. Po prostu podłącz swój kod do zdarzenia przygotowanego w DOM.

$(document).ready(function(){ 
    //Javascript logic to fire goes here 
}); 

lub jeśli prever wersję skróconą ...

$(function(){ 
    //Javascript logic to fire goes here 
}); 

Jeśli renderowanie częściowego widoku, który jest ładowany za pośrednictwem Ajax następnie ta sama metoda zadziała. jQuery uruchomi javascript w html przekazanym klientowi przez Ajax, gdy zostanie on dołączony do DOM, jeśli dobrze pamiętam (nie krępuj się, przetestuj to po prostu przechodzę przez pamięć o tym, że wystrzelił raz przyłączony do DOM, ale wierzę w to jest cechą metody load()), zakładając, że javascript, który chcesz uruchomić, znajduje się w odpowiedzi. Jeśli znajduje się na stronie nadrzędnej wysyłającej żądanie Ajax, najlepiej jest podłączyć go do pełnego wydarzenia.(Mam wypełniania parametr po stronie klienta tutaj)

$("#wrapperAwaitingContent").load("/Grids/MyGridPartial", {id: null /*parameters*/}, function(text, status, xhr){ 
    //Javascript logic to fire goes here 
}); 

Dla mnie url używane w zaproszeniu .load() został rozwiązany za pomocą UrlHelper na serwerze

$("#wrapperAwaitingContent").load("@Url.Action("MyGridPartial", "Grids")", {id: null /*parameters*/}, function(text, status, xhr){ 
    //Javascript logic to fire goes here 
}); 

Masz również możliwość robienie czegoś podobnego za pomocą Unftrusive Ajax. (Mam wypełniania parametr po stronie serwera tutaj)

@Ajax.ActionLink("Load Data", "MyGridPartial", "Grids", new { id = null/*parameters*/ }, new AjaxOptions() { UpdateTargetId = "wrapperAwaitingContent", OnComplete="onCompleteMethodName" }) 

Istnieje więcej właściwości, które można ustawić dla AjaxOptions innych niż element otrzymywać HTML i metody, aby zadzwonić, kiedy to zakończył, ale uważam, że „ll zdefiniowane funkcje ponownego wykorzystania w udostępnionym pliku JavaScript i wypełnić je tylko wtedy, gdy nie są już wypełniane stamtąd coś takiego ...

$("a[data-ajax='true']").each(function() { 
    var ajaxUpdate = $(this).closest("data-ajax-container"); 
    $(this).attr("data-ajax-update", $(this).attr("data-ajax-update") ? $(this).attr("data-ajax-update") : ajaxUpdate); 
    $(this).attr("data-ajax-mode", $(this).attr("data-ajax-mode") ? $(this).attr("data-ajax-mode") : "replace"); 
    $(this).attr("data-ajax-success", $(this).attr("data-ajax-success") ? $(this).attr("data-ajax-success") : "AjaxSuccess"); 
    $(this).attr("data-ajax-complete", $(this).attr("data-ajax-complete") ? $(this).attr("data-ajax-complete") : "AjaxComplete"); 
    $(this).attr("data-ajax-failure", $(this).attr("data-ajax-error") ? $(this).attr("data-ajax-error") : "AjaxError"); 
});