Execute javascript code every time a form is loaded via Ajax.BeginForm
If you’ve ever used the Ajax.BeginForm code to render a form in ASP MVC using Ajax (via jQuery, for example), you may have wondered there’s an object you can pass to the call called AjaxOptions. This object allows you to pass the BeginForm call some interesting options to further enhance the form when it’s rendered. One of those options is specially useful if you want some javascript to be executed just after the form has been rendered. You can always use the $(document).ready in jQuery, but this code will not be called if, for example, the form is rendered after a postback and you have some validation errors (a missing required field, for example). Fortunately, you can use the AjaxOptions object to tell the form to execute a method right after the form has been loaded (for the first time or after a postback).
If you wonder how many parameters you can use in AjaxOptions you can visit the MSDN Help Page. The option we’re interested in in this post is OnSuccess. Take a look at this code:
<% using (Ajax.BeginForm("Action", "Controller", new AjaxOptions { UpdateTargetId = "someId", InsertionMode = InsertionMode.Replace, OnSuccess = "someFunction" })) {%> <%: Html.TextBoxFor(model => model.SomeProperty) %> <%}%>
This is a typical partial view that is intended to be used using an Ajax call. In it we simply display a TextBox to modify the property SomeProperty of our model. What we’re telling this form is that it should post to the Action action on the Controller controller. Everything is working as usual until here. However, we also pass the BeginForm an AjaxOptions object with some properties. The UpdateTargetId tells the form which DOM element on the page the form should be placed. The InserionMode tells the form what policy should follow when placing the form on the DOM, in this case we tell it that it should replace the contents of the element. And finally, OnSuccess tells the form what javascript code should execute once the form has been placed on the element, in this case we call a method called someFunction.
Imagine this is the HTML page in which we want to place this partial view:
<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<html>
<body>
<div id="someId">
</div>
</body>
</html>We can then add this javascript script in the page:
$(document).ready( function { $.ajax({ url: <%: Url.Action("Edit", "Controller" %>, success: function (data) { $('#someId').html(data); }, error: function (XMLHttpRequest, textStatus, errorThrown) { jAlert('Some error message', 'Error'); } }); });
What we’re doing here is loading via Ajax the Edit view using jQuery when the page loads. After the page has been loaded, then the Ajax.BeginForm call will look for a javascript method called someFunction and execute it. In there you can put whatever logic you need to be executed right after the form has been placed (for example, binding some elements to events or whatever). In this case, we can write a simple sample function like this one and add it on the partial view:
function someFunction() { alert('Form loaded'); }
Now each time the form is loaded via Ajax, or in a post, the alert will popup.
