jQuery Draggable, Droppable, ASP.NET MVC

Question

I\'ve been looking through a lot of tutorials on jQuery draggable/droppable, and trying to apply it to ASP.NET MVC, but I am really confused.

Most of the samples I

Answer 1

Stacey - I see you're referencing my blog and would love to help. I'm blogging on a larger jquery asp.net mvc drag and drop project so I split up my posts into parts and I'm only about halfway through (3 parts so far). Basically, the info you're looking for is not all there yet, but should be soon.

For starters, I debug events using Firebug's logging feature. Here's an example testing events with jQuery UI's sortable() method:

$("#mylist").sortable(
{
    ...
    start: function(event, ui)
    {
        console.log("-- start fired --");
        console.log($(ui.item));
    },

    update: function(event, ui)
    {
        console.log("-- update fired --");
        console.log($(ui.item));
    },

    deactivate: function(event, ui)
    {
        console.log("-- deactivate fired --");
        console.log($(ui.item));
    }
});

When an item is dropped using sortable(), it fires the update event. I use jQuery's AJAX post method to send the data to a controller.

$("#mylist").sortable(
{
    ...
    update: function(event, ui)
    {
        //Extract column num from current div id
        var colNum = $(this).attr("id").replace(/col_/, "");

        $.post("/Section/UpdateSortOrder",
            { columnNum: colNum, sectionIdQueryString: $(this).sortable("serialize") });

    }
});

The variable colNum is extracting the id by parsing the id attribute that's set in the view. See part 3 on my blog for how this is rendered. Then both the column number and set of section id's (serialized in jquery) are posted to the controller.

The controller method resides in /Controllers/SectionController.cs and only accepts posts:

    private SectionRepository secRepo = new SectionRepository();

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult UpdateSortOrder(int columnNum, string sectionIdQueryString)
    {
        string[] separator = new string[2] { "section[]=", "&" };
        string[] sectionIdArray = sectionIdQueryString.Split(separator, StringSplitOptions.RemoveEmptyEntries);

        secRepo.UpdateSortOrder(columnNum, sectionIdArray);
        secRepo.Save();

        return Content("Success");
    }

Hope that helps for now.