Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to kick off a javascript function after a partial view renders in MVC Asp.net?

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.

like image 339
Bill Blankenship Avatar asked Jan 22 '13 23:01

Bill Blankenship


People also ask

Can you put JavaScript in a partial view?

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.

Can we return partial view from action method?

To return a Partial view from the controller action method, we can write return type as PartialViewResult and return using PartialView method.

Can we return partial view in MVC?

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.

What is advantage of partial view in MVC?

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.


1 Answers

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");
});
like image 135
Nick Albrecht Avatar answered Oct 13 '22 00:10

Nick Albrecht