Mike Cousins

jQuery AJAX POSTing to ASP.NET MVC 3

June 12, 2012

Getting your model binding to work properly with jQuery takes a bit of trial and error if you’re just getting started. There are a couple ways to send your data and you don’t really know which way is going to bind properly to which C# type. Here is a quick example for reference after I got multiple photo deletion working on Shuttr. The basic gist of this is that binding an array of ints in Javascript requires an ICollection in C# to make the magic happen.

Our Telerik photo grid has a checkbox column named checkedPhotos and it’s value is the photo ID:

column.Bound(p => p.Id)
    .ClientTemplate("<input type='checkbox' name='checkedPhotos' value='<#= Id #>' />")

Clicking the delete button fires the deleteCheckedPhotos() Javascript function. Inside we check to make sure some photos are checked, ask for confirmation, then make an AJAX request to delete the photos, then AJAX refresh the photo grid.

<script type="text/javascript">
function deleteCheckedPhotos() {
    var $checkedRecords = $(':checked');
    if ($checkedRecords.length < 1) {
        alert('No photos selected');
        if (confirm('Are you sure you want to delete the ' + $checkedRecords.length + ' checked photo(s)?')) {
            $.post('@Url.Action("DeleteCheckedPhotos", "Account")', $checkedRecords)
                .complete(function () {
                var grid = $("#PhotoGrid").data('tGrid');

In our controller we get the values from the AJAX request as an ICollection:

[Authorize(Roles = "Photographer")]
public ActionResult DeleteCheckedPhotos(ICollection<int> checkedPhotos)
    // make sure we got some data
    if (checkedPhotos == null)
        return Json(null);

    // delete the specified photos
    foreach (var photoId in checkedPhotos)

    return Json(null);

That’s all there is to it. This stuff is getting pretty easy!

Written by Mike Cousins who lives and works in Calgary building useful things. You should follow him on Twitter