Question

我在C＃中使用ASP.NET MVC

我有一个页面，用户可以在页面周围移动不同的小部件，现在我需要一种方法来保存小部件的状态。我在HTML页面中使用jQuery，jQuery使用JSON发布新的页面布局。我不确定如何在控制器中读取JSON。

我正在使用的代码基于此示例 - http://webdeveloperplus.com/jquery/saving-state-for-collapsible-drag-drop-panels/，但保存结果的代码是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);
}

我愿意考虑其他方法来做到这一点，因为我可能没有选择最好的方法来做到这一点。

Answer 1

Phil Haack的博文http://haacked.com/archive/2010/04/15/sending-json-to-an-asp-net-mvc-action-method-argument.aspx专门解决了你要解决的问题，而且效果很好。

希望这有帮助。

Answer 2

为什么不使用cookie？这样可以避免必须从服务器来回拉取数据。

使用jQuery和Json在ASP.NET MVC中保存Widgets的状态

2 个答案: