I have been getting back into some asp.net MVC 3 development again lately, and working with dynamically loaded views through Ajax.
I want these views to be as "clean" as possible, and obviously not duplicate anything outside of the view. So for these reasons, I do not want to then start including any javascript files which have already been included in the Layouts or "Master" views.
So I have my `_Layout.cshtml` page that contains the javascript files:
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/js/libs/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="/js/libs/jquery.validate.min.js"></script> <script type="text/javascript" src="/js/libs/jquery.unobtrusive-ajax.min.js"></script> <script type="text/javascript" src="/js/libs/jquery.validate.unobtrusive.min.js"></script>
A `View` which contains a Modal popup, into which a separate `View` is loaded using jQuery Ajax. The dynamically loaded `View` contains a `Ajax.BeginForm()`, labels, fields, and validation messages. Nothing else.
Going with this, your ajax dynamically loaded view containing an `Ajax.BeginForm` will NOT do any client side validation.
To enable client side form validation on ASP.NET MVC 3 Views which have been dynamically loaded through Ajax is simple. Just add the following.
$.validator.unobtrusive.parse("#{form-id}");
Examples below:
$.ajax
({
url: "/{controller}/{action}/{id}",
type: "get",
success: function(data)
{
$.validator.unobtrusive.parse("#{form-id}");
}
});
Alternatively
$.get('/{controller}/{action}/{id}', function (data) { $.validator.unobtrusive.parse("#{form-id}"); });
I am always interested in hearing back from those who read my blog. Please leave a comment if you found this useful, want to suggest any changes to my code, or anything else! Thanks!
