Editing and binding nested lists with ASP.NET MVC 2

12

Posted by Joe | Posted in Ajax, ASP.NET, C#, JavaScript, jQuery, MVC | Posted on 06-06-2011

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.

Read the rest of this entry »

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit

ASP.NET MVC Textbox with characters remaining HtmlHelper extension method

3

Posted by Joe | Posted in C#, JavaScript, MVC | Posted on 14-08-2010

Here is a couple of HtmlHelper extension methods, CharactersRemainingTextBoxFor and CharactersRemainingTextAreaFor which render a textbox/textarea with a span tag that displays the number of characters remaining.  They also include the JavaScript to make this work, and to limit the number of characters entered in the textarea. The maximum limit comes from the model by using the StringLengthAttribute.

Download source

Read the rest of this entry »

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit

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

5

Posted by Joe | Posted in Ajax, ASP.NET, JavaScript | Posted on 29-06-2010

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.

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit

Populate a select dropdown list using jQuery and Ajax

28

Posted by Joe | Posted in Ajax, JavaScript, jQuery | Posted on 23-02-2010

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. 

Read the rest of this entry »

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit

Convert all static text email addresses to mailto links using jQuery

2

Posted by Joe | Posted in JavaScript, jQuery | Posted on 18-02-2010

In this post I’ll show how to use  jQuery to automatically convert all email addesses from static text into a mailto link.

Read the rest of this entry »

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit

Force client-side JavaScript event to fire programatically using jQuery

0

Posted by Joe | Posted in JavaScript, jQuery | Posted on 15-01-2010

Earlier today I needed to force a clide side event to fire programatically using jQuery.

I found you can do this easily with the jQuery trigger method:

$("#myControl").trigger("change");

The above will trigger the change event of the control with ID ‘myControl’

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit

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

1

Posted by Joe | Posted in Ajax, ASP.NET, JavaScript, jQuery | Posted on 12-01-2010

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.

Read the rest of this entry »

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit

Using the jTemplate jquery plugin with ajax and ASP.NET

17

Posted by Joe | Posted in Ajax, ASP.NET, JavaScript, jQuery | Posted on 05-01-2010

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.

Read the rest of this entry »

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit

Using jQuery to make ajax calls to an ASMX web service using ASP.NET

9

Posted by Joe | Posted in Ajax, ASP.NET, C#, JavaScript, jQuery | Posted on 04-01-2010

Download source

Making ajax calls to an ASP.NET web service using jQuery is too easy.  In this post I’ll explain how to do it!

Read the rest of this entry »

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit

Using jQuery’s Each method to iterate through a JavaScript array

0

Posted by Joe | Posted in JavaScript, jQuery | Posted on 30-12-2009

The Each method in jQuery is pretty useful and can be used to iterate through the elements within a jQuery object.

I’ve been using it recently to iterate through JavaScript arrays.  It saves having to use a for loop and the code looks nicer.

Read the rest of this entry »

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Reddit