Save state of Widgets in ASP.NET MVC using jQuery and Json

Question

I am using ASP.NET MVC in C#

I have a page where the user can move different Widgets around the page, and I now need a method to save the state of the widgets. I am using jQuery in the HTML page, and the jQuery posts the new page layout using JSON. I am unsure how to read the JSON in the controller.

The code I'm using is based on this example here - http://webdeveloperplus.com/jquery/saving-state-for-collapsible-drag-drop-panels/, but the code for saving the result is in PHP.

jQUERY

<script type="text/javascript" >
$(function () {
    $('.dragbox')
.each(function () {
    $(this).hover(function () {
        $(this).find('h2').addClass('collapse');
    }, function () {
        $(this).find('h2').removeClass('collapse');
    })
    .find('h2').hover(function () {
        $(this).find('.configure').css('visibility', 'visible');
    }, function () {
        $(this).find('.configure').css('visibility', 'hidden');
    })
    .click(function () {
        $(this).siblings('.dragbox-content').toggle();
        //Save state on change of collapse state of panel
        updateWidgetData();
    })
    .end()
    .find('.configure').css('visibility', 'hidden');
});

    $('.column').sortable({
        connectWith: '.column',
        handle: 'h2',
        cursor: 'move',
        placeholder: 'placeholder',
        forcePlaceholderSize: true,
        opacity: 0.4,
        start: function (event, ui) {
            //Firefox, Safari/Chrome fire click event after drag is complete, fix for that
            if ($.browser.mozilla || $.browser.safari)
                $(ui.item).find('.dragbox-content').toggle();
        },
        stop: function (event, ui) {
            ui.item.css({ 'top': '0', 'left': '0' }); //Opera fix
            if (!$.browser.mozilla && !$.browser.safari)
                updateWidgetData();
        }
    })
.disableSelection();
});

function updateWidgetData() {
    var items = [];
    $('.column').each(function () {
        var columnId = $(this).attr('id');
        $('.dragbox', this).each(function (i) {
            var collapsed = 0;
            if ($(this).find('.dragbox-content').css('display') == "none")
                collapsed = 1;
            //Create Item object for current panel
            var item = {
                id: $(this).attr('id'),
                collapsed: collapsed,
                order: i,
                column: columnId
            };
            //Push item object into items array
            items.push(item);
        });
    });
    //Assign items array to sortorder JSON variable
    var sortorder = { items: items };

    //Pass sortorder variable to server using ajax to save state
    $.post('/Widgets/SaveLayout', 'data=' + $.toJSON(sortorder), function (response) {
        if (response == "success")
            $("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000);
        setTimeout(function () {
            $('#console').fadeOut(1000);
        }, 2000);
    });
    alert(sortorder);
}

I am willing to consider alternative ways to do this, as I may not have chosen the best way to do this.

Answer 1

Hi,

Phil Haack's blog post http://haacked.com/archive/2010/04/15/sending-json-to-an-asp-net-mvc-action-method-argument.aspx specifically handles the problem you are trying to solve and it works great.

Hope this helps.