jquery可排序和guids的问题

Question

我有过

<ul id="test-list" class="ui-sortable" >
   <li id="876e45a4-6a27-4f7b-95ca-9e2500f11801">text1</li>
   <li id="4df36ffb-561a-4eaa-9b1c-9e2500f16d6b">text2</li>
   <li id="cc4a57d5-1567-403c-888f-9e2500f1c171">text3</li>
</ul>

但是$('#test-list').sortable('serialize');使用的字符串是这样的：876e45a4-6a27-4f7b-95ca[]=9e2500f11801&79fbfdf7-e9b1-4e96-8e42[]=9e2400d2abb7&4df36ffb-561a-4eaa-9b1c[]

删除id的最后12个字符

你知道为什么吗？

Answer 1

两件事：

Sortable.serialize的ID

你确定Sortable的serialize做了你期望它做的事情吗?根据the docs的说法，它希望每个可排序元素的ID都是setname_number的形式。ID中应该有一个下划线，但将退回到使用=或the docs中的-；

在默认情况下，它的工作方式是以‘

_number’格式查看每一项的id，它会输出一个类似“setname[]=number&setname[]=number”的散列。....They的格式必须是："set_number“例如，一个具有id属性foo_1，foo_5，foo_2的3元素列表将被序列化为foo[]=1&foo[]=5&foo[]=2。您可以使用下划线、等号或连字符来分隔集合和数字。例如， foo=1或foo-1或foo_1 all serialize to foo[]=1。

(我的重点是。)因此，由于没有看到下划线(_)，显然它正在退回到使用它看到的最后一个连字符(-)。

用于CSS的id格式

另外，用于CSS 的id值不能以数字开头；从the spec开始

在CSS中，标识符(包括选择器中的元素名称、类和in )只能包含字符a-zA-Z0-9和ISO 10646个字符U+00A1及更高的字符，加上连字符(-)和下划线(_)；它们不能以数字开头，也不能以连字符后跟数字。

(这些限制对HTML中的id不适用，它不能包含空格，并且必须至少包含一个字符(如果给定)，但CSS的限制更多。)

由于您正在将CSS选择器与jQuery一起使用，因此最好确保id属性是有效的CSS。(也许您可以将它们预处理为"G“，后跟GUID，并将破折号转换为x，诸如此类，因此ID为G876e45a4x6a27x4f7bx95cax9e2500f11801等。)然后，您需要按照上面的说明为它们添加下划线和后缀。

Answer 2

对于像876e45a4-6a27-4f7b-95ca-9e2500f11801这样的RFC 4122，您可以添加参数。

$(this).sortable('serialize', {expression:(/(.+)[_](.+)/)})

Answer 3

我也有同样的问题。我解决这个问题的方法是更改视图的代码，将破折号字符替换为空字符串：

<div id="divItems">
@foreach (var item in Model)
{
    <div id="@string.Format("item_{0}", item.Id.ToString().Replace("-", string.Empty))">
        @item.Title
    </div>
}
</div>

注意:对于我的情况，我使用了div而不是ul/li。

我的javascript看起来像这样：

$("div#divItems").sortable({
    cursor: "move",
    update: function (event, ui) {
        var container = $(this);
        var sequence = container.sortable("serialize", { key: "Sequence" });
        $.post("@Url.Action("EditSequence")", sequence, function (data) {
            if (data.success) {
                container.fadeTo("normal", 0, function () {
                    container.fadeTo("normal", 1);
                });
            } else {
                alert(data.message);
            }
        });
    }
});

注意:我将键改为' sequence‘，fadeTo()组合框用于向用户提供序列已成功保存的可视反馈。

我的控制器操作方法如下所示：

// POST: /Showcase/EditSequence?Sequence=<Guid List>
[Authorize]
[HttpPost]
public ActionResult EditSequence(List<Guid> Sequence)
{
    try
    {
        for (int i = 0; i < Sequence.Count; i++)
        {
            var item = repos.GetSingle(Sequence[i]);
            if (item != null)
            {
                item.Seq = (i + 1);
            }
        }

        repos.Save();

        return Json(new { success = true, message = "Sequence has been saved!" }, JsonRequestBehavior.DenyGet);
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = ex.Message }, JsonRequestBehavior.DenyGet);
    }
}

模型绑定器负责将不带破折号的Guid字符串转换为绑定到序列参数的列表。