jQuery可排序：如何正确发布元素ID数组？

问题描述：

我正在使用jQuery sortable。我用这个教程：
http://www.xmech.net/programming/jquery-ui-sortable-tutorial/

现在，这给了我喜欢的字符串：

ID[]=2&ID[]=3&ID[]=4&ID[]=1

或更糟的是，当我打电话的ID的IDa_1，IDb_2，IDc_3，IDd_4它给了我

IDb[]=2&IDc[]=3&IDd[]=4&IDa[]=1

我觉得这种格式最大可怕的，无用的... 我只想页：[“IDb_2”，“IDc_3”，“IDd_4”，“IDa_1”] 和有秩序数组索引中的元素。

为了改善这种情况，我所做的：

var xxx = { pages: $(this).sortable('toArray') }; 
alert(JSON.stringify(xxx));

这是我家的控制器：

public string SaveSortable(string pages) 
{ 
    string strPages = Request.Params["pages"]; 

    Console.WriteLine(pages); 
    return pages; 
} 


    public ActionResult Sortable() 
    { 
     return View(); 
    } // End Action Sortable

的问题是，无论是 “页面” 和strPages总是空...
它进入正确的控制器虽然...
我做错了什么？

这是我的.cshtml：

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title></title> 

    <style type="text/css" media="all"> 
     html {margin: 0px; padding: 0px; height: 100%;} 
     body {margin: 0px; padding: 0px; height: 100%;} 
     input{margin: 0px; padding: 0px; } 
    </style> 



    <style type="text/css" media="all"> 

     .menu li 
     { 
      list-style: none; 
      padding: 10px; 
      margin-bottom: 5px; 
      border: 1px solid #000; 
      background-color: #C0C0C0; 
      width: 150px; 
      display: inline; 
     } 
    </style> 

    <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery-1.7.2.min.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery-ui/1_8_21/js/jquery-ui-1.8.21.custom.min.js")"></script> 


    <script type="text/javascript" language="javascript"> 

     Date.prototype.getTicksUTC = function() { 
      return Date.parse(this.toUTCString()) + this.getUTCMilliseconds(); 
     } // End Function getTicksUTC 


     var tickURL = '@Url.Content("~/Scripts/jQuery/SlickGrid/images/tick.png")'; 


     $(document).ready(function() { 
      //$('#menu-pages').sortable(); 
      $("#menu-pages").sortable({ 
       update: function (event, ui) { 
        alert("posting"); 

        //var ElementsOrder = $(this).sortable('toArray').toString(); 
        var ElementsOrder = $(this).sortable('toArray');//.toString(); 
        //alert(JSON.stringify(ElementsOrder)); 

        var xxx = { pages: $(this).sortable('toArray') }; 
        //alert(JSON.stringify(xxx)); 
        //document.writeln("<h1>"+ JSON.stringify(xxx) + "</h1>"); 


        // $.post("@Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $('#menu-pages').sortable('serialize') }); 
        // $.post("@Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $('#menu-pages').sortable('serialize', { key: 'id' }) }); 

        $.post("@Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $(this).sortable('toArray') }); 

       } 
      }); 

     }); 

    </script> 

</head> 
<body> 
    <ul class="menu" id="menu-pages"> 
     <li id="ID_1">Home</li> 
     <li id="ID_2">Blog</li> 
     <li id="ID_3">About</li> 
     <li id="ID_4">Contact</li> 
    </ul> 
</body> 
</html>

答

只需使用JSON请求：

$('#menu-pages').sortable({ 
    update: function (event, ui) { 
     $.ajax({ 
      url: '@Url.Action("SaveSortable", "Home")', 
      type: 'POST', 
      cache: false, 
      contentType: 'application/json', 
      data: JSON.stringify({ pages: $(this).sortable('toArray') }), 
      success: function(result) { 
       // ... 
      } 
     }); 
    } 
});

然后：

[HttpPost] 
public ActionResult SaveSortable(string[] pages) 
{ 
    // pages will contain what you need => a list of ids 
    ... 
}

为了记录在案，这里是如何的JSON请求POST有效负载将如下所示：

{"pages":["ID_2","ID_3","ID_1","ID_4"]}

我需要使用$ .ajax吗？ $ .post不可能吗？ – 2012-08-03 07:45:56

是的，您必须使用'$ .ajax'，因为它允许您将正确的请求Content-Type标头设置为'application/json'，这是您无法用'$ .post'完成的事情。 – 2012-08-03 07:49:30

jQuery可排序：如何正确发布元素ID数组？

相关推荐