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.

Answer 2

In jQuery UI droppable, there is an event "drop" that can take a function to execute. So this is where you will need to wire the call to your controller's action to execute something on a "drop". There are other events as well that you can hook into, such as "out", "hover" etc. See here under "Events" for more detail.

Here is an example in hooking/calling your controller's action via "drop":

$('#mylist').droppable({
   drop: function(event, ui) {
       var newItem = ui.droppable;
       var url = <% =Url.Action("Append", "MyController") %>;
       $.post(url, { newItemId: newItem[0].id });
   }
});

Answer 3

Zing! It has been done. The problem was $(this).attr("id"). It needed to be $(ui.item).attr("id"). This returns the element being dragged, rather than the sortable container. Thank you SO much for all of your help.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Draggable.Item>>" %>

<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <ul id="sortable1" class="connectedSortable">
        <% foreach (var item in Model)
     { %>
        <% Html.RenderPartial("Item", item); %>
        <% } %>
    </ul>
    <ul id="sortable2" class="connectedSortable">
    </ul>
</asp:Content>
<asp:Content ContentPlaceHolderID="ScriptContent" runat="server">
    <style type="text/css">
        #sortable1, #sortable2 {
            list-style-type: none;
            margin: 0;
            padding: 0;
            float: left;
            margin-right: 10px;
        }
        #sortable2 {
            height: 400px;
            width: 140px;
            background: #ccc;
        }
        #sortable1 li, #sortable2 li {
            margin: 0 5px 5px 5px;
            padding: 5px;
            font-size: 1.2em;
            width: 120px;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            $("#sortable1").sortable({
                connectWith: '.connectedSortable'
            }).disableSelection();
            $("#sortable2").sortable({
                connectWith: '.connectedSortable',
                receive: function(event, ui) {
                    var colNum = $(ui.item).attr("id").replace(/col_/, "");
                    $.post("/Home/UpdateSortOrder", { columnNum: colNum, sectionIdQueryString: $(this).sortable("serialize") });
                }
            }).disableSelection();
        });
    </script>
</asp:Content>