在ASP.NET Razor网页中保存jQuery Sometables

jQuery Sortabrity通过简单的拖放接口提供一种方法来指定项目集合的顺序。我刚刚在下一个版本的Web页面CMS中发布,我在实现用于管理菜单项的显示顺序的可分量的过程中。本文介绍如何在剃刀网页中使用它们,并显示将结果顺序保存到数据库的一种方法。

所有您真正需要使用STORATIENTS的是对jQuery的引用,另一个到jQuery UI。这两个库都是Visual Studio生成的剃刀网页模板的一部分,但如果您正在使用WebMatrix,则可以使用Nuget将库作为包安装。或者您可以简单地引用像Microsoft管理的CDN托管文件(http://www.asp.net/ajaxlibrary/cdn.ashx)或谷歌(//developers.google.com/speed/libraries/devguide)。

完成此操作后,将Sssitable命令添加到包含要能够排序的HTML元素集合的元素。在以下示例中,我想要变得可排序的项目包含在具有ID的DIV中 可供选择:

<script>
    $(function () {
        $('#sortable').sortable()
    });
</script>

<div id="sortable">
    @for(var i = 1; i <= 10; i++){
        <div class="list-item">
            @((char)(i + 64))
        </div>
     }
</div>

此代码将渲染10个div,每个div都有字母表,从'a'开始。含有的div已被宣布为 可供选择 因此,您将能够使用鼠标重新排序列表中的项目。这真的很容易,但不适用于实际使用。您真的需要一种识别每个项目的方法,在列表中获取其位置,然后将该数据另存为数据库。你用jquery这样做 每个 method.

jquery. 每个 方法接受两个参数: 指数价值或其集合中当前项目的索引以及对实际项目的引用。在此示例中,从数据库中检索项目。表格很简单 - 它具有ID列,文本列和用于存储项目的显示顺序的整数列:

@{
    var db = Database.Open("Sortables");
    var commandText = "SELECT Id, Text FROM Items ORDER BY DisplayOrder";
    var items = db.Query(commandText);
}

这些项目如下所示:

<div class="container">
    <div class="row">
        <div class="col-md-4 alert-info" id="message">
           Drag items to reorder them.
        </div>
    </div>
    <div class="row">
        <div id="sortable" class="col-md-4">
            @foreach(var item in items){
                <div class="list-item" id="@item.Id">
                    @item.Text
                    <div class="index"></div>
                </div>
            }
        </div>
    </div>
    <div class="row">
       <div class="col-md-2">
           <button>Save Order</button>
        </div>
    </div>
</div>

更多观察者读者可能会注意到在此处使用Twitter Bootstrap。 项目集合通过jQuery进行“可排序”,并将单击事件添加到按钮:

<script>
    $(function () {
        $('#sortable').sortable();
        $('button').on('click', function(){
            var ids = [];
            $('.list-item').each(function (指数, 价值) {
                var id = $(价值).prop('id');
                ids.push(id);
            });
            $.post(
                '/UpdateOrder',
                { Ids: JSON.stringify(ids) },
                function (response) {
                    if ($('#message').hasClass('alert-info')) {
                        $('#message').text('Items re-ordered successfully.')
                                     .removeClass('alert-info')
                                     .addClass('alert-success');
                    } else {
                        $('#message').effect("highlight", {}, 2000);
                    }
                }
            );
        })
    });
</script>

创建名为“IDS”的JavaScript数组,该数组在按钮单击“事件”中,以便按照用户定位的顺序捕获每个可排序项的ID。使用浏览器将此数组转换为JSON json.stringify. 方法并发布到一个名为updateOrder.chtml的文件,一旦完成了它的作业,就会更新页面顶部的指令div,让用户知道他们的重新排序已经成功。

这是updateOrder.cshtml文件的代码:

@{
    var json = Json.Decode(Request["Ids"]);
    object[] ids = json; 
    var db = Database.Open("Sortables");
    var commandText = "UPDATE Items SET DisplayOrder = @0 WHERE Id = @1";
    foreach(var id in ids){
        db.Execute(commandText, Array.FindIndex(ids, i => i == id), id);
    }
}

代码设置了一个更新项目的显示顺序的SQL语句。传入参数的两个值是显示顺序和ID。有意义的感兴趣的是,通过jQuery发布的纯阵列如何出现在Request.form集合中。阵列中的每个元素实际上都作为单独的名称/值对发送,数组的名称加上索引括号(IDS [])被用作标识符。由于所有元素都具有相同的名称,因此它以与分组复选框或多选择相同的方式工作 - 值作为逗号分隔的字符串到达​​服务器。使用字符串,拆分方法然后循环转换为C#数组。在每次迭代时,当前项的索引位于数组中,并将其保存为显示置位值。