Let me preface this question with the fact that I am very new to MVC.
I have an instance where I am rendering a devexpress grid in a partial view.
@Html.Partial("MyGridPartial", Model)
I need to kick off a javascript function at the moment that the model has been populated via this partial view render. I attempted to do this via this. :
settings.ClientSideEvents.EndCallback
I can get to this point, but at that time I do not have the model itself populated so it does no good. I was wondering if anyone is aware of a generic way of kicking/attaching to a partial view render in order to jump into some clientside javascript code.
JavaScript functions can be bound to elements on the partial view; the partial view is rendered at the same time as the parent view. This happens when loading the partial view with a @Html. Action helper method, as in this section from Edit.
To return a Partial view from the controller action method, we can write return type as PartialViewResult and return using PartialView method.
In ASP.NET Core MVC, a controller's ViewResult is capable of returning either a view or a partial view. In Razor Pages, a PageModel can return a partial view represented as a PartialViewResult object. Referencing and rendering partial views is described in the Reference a partial view section.
Partial View can be a parent view and we can use it as a parent view of any partial view. We can simply pass Model to show data in the partial view or we can send the data in the partial view with the help of AJAX call.
If it's a PartialView you're rendering in a View on the serverthen Dave's method would work best. Simply wire-up your code to the DOM ready event.
$(document).ready(function(){
//Javascript logic to fire goes here
});
or if you prever the shorthand version...
$(function(){
//Javascript logic to fire goes here
});
If you're rendering a partial view that is being loaded via Ajax then the same method will work. jQuery will run javascript in the html passed back to the client via Ajax once it's attached to the DOM if I recall correctly (feel free to test this I'm just going by memory about it firing once attached to the DOM, but I believe this is a feature of the load()
method), assuming the javascript you want to run is in the response. If it's in the parent page sending the Ajax request then you're best bet is to hook it up to the complete event. (I'm populating the parameter on the client side here)
$("#wrapperAwaitingContent").load("/Grids/MyGridPartial", {id: null /*parameters*/}, function(text, status, xhr){
//Javascript logic to fire goes here
});
For me the url used in the .load()
call is resolved using the UrlHelper on the server
$("#wrapperAwaitingContent").load("@Url.Action("MyGridPartial", "Grids")", {id: null /*parameters*/}, function(text, status, xhr){
//Javascript logic to fire goes here
});
You also have the option of doing something similar to this using Unobtrusive Ajax. (I'm populating the parameter on the server side here)
@Ajax.ActionLink("Load Data", "MyGridPartial", "Grids", new { id = null/*parameters*/ }, new AjaxOptions() { UpdateTargetId = "wrapperAwaitingContent", OnComplete="onCompleteMethodName" })
There are more properties you can set for the AjaxOptions other than the element to receive the HTML and the method to call when it's finished but I find I'll reuse functions defined in a shared javascript file and populate them only if they are not already populated from there, something like this...
$("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");
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With