ASP.NET MVC 2 client side validation for dynamic fields added with ajax

Posted on July 24, 2011 by Joe in Ajax, C#, MVC | 1 Comment

It’s quite common to add fields to a form dynamically using ajax, for example you may have a list of phone numbers for a user, and they could have many different phone numbers.

Using MVC you can easily add fields to a form by making an ajax call to an action that returns the rendered result of a partial view, but if you’ve tried doing this when using client side validation you’ll find the client side validation doesn’t work for those fields dynamically added to the form via the ajax call.

In this article I’ll explain a simple way to enable client side validation on those dynamically added fields.

Editing and binding nested lists with ASP.NET MVC 2

Posted on June 6, 2011 by Joe in Ajax, ASP.NET, C#, JavaScript, jQuery, MVC | 14 Comments

Dynamically editing lists of data and binding back to the model with MVC is a little complicated as the id’s of the form elements need to all tie up for binding to succeed. Recently I had a model, which contained a list of an object, which in turn contained another nested list. Getting this to easily bind back to the model when adding to the lists dynamically was a bit of a headache so I’ll explain how I did it.

This article is inspired by this article by Steve Sanderson, but I also explain how to adapt it to bind nested lists.

ASP.NET MVC simple server-side ajax paging using jQuery

Posted on May 30, 2011 by Joe in Ajax, ASP.NET, C#, jQuery, MVC | 24 Comments

It’s always important to page your data on the server side so that you are only hitting the database to get the page you currently need, rather than getting all the results and paging on the client. In this post I’ll explain how to perform simple ajax paging on the server side using ASP.NET MVC 3.

How to convert a JSON date serialized by an ASMX web service to a JavaScript Date object

Posted on June 29, 2010 by Joe in Ajax, ASP.NET, JavaScript | 5 Comments

JSON doesn’t have a standard way to represent a date. You can read about the reasons behind this here.

If you are using an ASMX web service returning JSON then you’ll find it serializes the DateTime object to a string that looks like this:

/Date(1278943200000)/

The numer in this string is the number of milliseconds since January 1st 1970 UTC, and this number can be used as a constructor argument to the JavaScript Date object. So all we need to do is extract the number of milliseconds from the string. This can be done easily using the regular expression shown in the post linked above.

var dateString = "/Date(1278943200000)/";
var date = new Date(parseInt(dateString.replace(/\/Date\((\d+)\)\//, '$1')));

In the above example I’ve manually set the date string, but you may get this from an AJAX response from the ASMX web service. I then create a new Date object by using the regular expression and parsing the result at an integer.

Populate a select dropdown list using jQuery and Ajax

Posted on February 23, 2010 by Joe in Ajax, JavaScript, jQuery | 35 Comments

In this post I’ll explain how to populate a select dropdownlist using jQuery and Ajax. I am using an ASP.NET web application and page methods to perform the Ajax calls. Using page methods means that you do not need a seperate web service, which is good if the functionality is specifically for the page. The page methods must be declared public static and use the WebMethod attribute.

Creating a Delete link with MVC using POST to avoid security issues

Posted on February 16, 2010 by Joe in Ajax, jQuery, MVC | 4 Comments

It is fairly common to have a list of records with a hyperlink to delete a record. The problem here is that with MVC the hyperlink will use a GET request to delete a record. This is a fairly big security issue as anybody can browse to the URL and delete a record from your system. In this post I’ll explain how you can use the Ajax helpers to create a hyperlink that will call your delete method without using GET.

Edit in place / inline editing with jQuery, jTemplates and ASP.NET

Posted on January 12, 2010 by Joe in Ajax, ASP.NET, JavaScript, jQuery | 1 Comment

Download source

In this post I talked about how to use the jTemplates plugin for jQuery. Using my final example in the post I thought it would be cool to try and add some ‘edit in place’ functionality to the table.

For this to work I’ve created a Data Access Layer using Linq to XML. My web service then uses this DAL to save and retrieve my data.

Using the jTemplate jquery plugin with ajax and ASP.NET

Posted on January 5, 2010 by Joe in Ajax, ASP.NET, JavaScript, jQuery | 17 Comments

Download source

A guy in work introduced me to jTemplates, a template engine plugin for jQuery. It allows you to easily bind JavaScript objects to a defined template and also has some other nifty features.

I’ve found jTemplates to be particularly good when using ajax to display any information quickly and easily.

First I’ll explain how to create a simple template to display data, and then how to use the foreach and cycle features.