Question

我有以下代码允许拖放列表项：

<%@ Page Language="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <style>
        header, section {
            display: block;
        }
        body {
            font-family: 'Droid Serif';
        }
        h1, h2 {
            text-align: center;
            font-weight: normal;
        }
        #features {
            margin: auto;
            width: 460px;
            font-size: 0.9em;
        }
        .connected, .sortable, .exclude, .handles {
            margin: auto;
            padding: 0;
            width: 310px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .sortable.grid {
            overflow: hidden;
        }
        .connected li, .sortable li, .exclude li, .handles li {
            list-style: none;
            border: 1px solid #CCC;
            background: #F6F6F6;
            font-family: "Tahoma";
            color: #1C94C4;
            margin: 5px;
            padding: 5px;
            height: 22px;
        }
        .handles span {
            cursor: move;
        }
        li.disabled {
            opacity: 0.5;
        }
        .sortable.grid li {
            line-height: 80px;
            float: left;
            width: 80px;
            height: 80px;
            text-align: center;
        }
        li.highlight {
            background: #FEE25F;
        }
        #connected {
            width: 440px;
            overflow: hidden;
            margin: auto;
        }
        .connected {
            float: left;
            width: 200px;
        }
        .connected.no2 {
            float: right;
        }
        li.sortable-placeholder {
            border: 1px dashed #CCC;
            background: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <section>
        <h2>Sortable List</h2>
        <ul class="sortable list">
            <li><asp:Label ID="lblRouting1" runat="server" Text="Routing 1"></asp:Label></li>
            <li> <asp:Label ID="lblRouting2" runat="server" Text="Routing 2"></asp:Label></li>
            <li> <asp:Label ID="lblRouting3" runat="server" Text="Routing 3"></asp:Label></li>
            <li> <asp:Label ID="lblRouting4" runat="server" Text="Routing 4"></asp:Label></li>
            <li> <asp:Label ID="lblRouting5" runat="server" Text="Routing 5"></asp:Label></li>
            <li> <asp:Label ID="lblRouting6" runat="server" Text="Routing 6"></asp:Label></li>
        </ul>
    </section>
    </div>
    </form>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="jquery.sortable.js"></script>
        <script>
            $(function () {
                $('.sortable').sortable();
                $('.handles').sortable({
                    handle: 'span'
                });
                $('.connected').sortable({
                    connectWith: '.connected'
                });
                $('.exclude').sortable({
                    items: ':not(.disabled)'
                });
            });
    </script>
</body>
</html>

它允许用户将列表项拖动到它们需要的顺序。我试图找出c＃中是否有一种方法可以在用户更改订单时获得li的订单？

Answer 1

实现目标的一种方法是使用ajax将用户提交的更改提交回服务器端。

的 ----------------------
JavaScript部分：
的 ----------------------

在.sortable()初始化过程中，您需要添加停止处理程序，该处理程序将在您删除拖动的项目时触发。以下代码警告已删除元素的新位置：

$('.sortable').sortable({ stop: function (event, ui) { alert("New position: " + ui.item.index()); } });

现在我们有拖动元素的新位置，您需要将其提交回服务器。我们通过向服务器发送2个参数来实现：

标识元素的唯一ID（可以是您为元素指定的预设自定义属性）

新职位

将详细信息提交回服务器，我们将使用ajax。首先，我们使用ajax的选项声明一个var：

$(function () { $('.sortable').sortable({ stop: function (event, ui) { var ID_To_Submit = ui.item.attr("myCustomIDAtribute"); var New_Position = ui.item.index(); var options = { type: "POST", url: "./myWebPage.aspx/myWebMethod", data: JSON.stringify({ ID: ID_To_Submit, POS: New_Position }), contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { } }; //and then, we submit the ajax with the options: $.ajax(options); } }); });

<强>解释

假设我们为<li myCustomIDAtribute="12">元素设置了自定义属性，
这就是我们检索它的方式 var ID_To_Submit = ui.item.attr("myCustomIDAtribute");

这显然会得到新的位置：
var New_Position = ui.item.index();

在这里指定aspx页面的路径，该页面将接收将接收到ajax的web方法，以及方法的名称：
url: "./myWebPage.aspx/myWebMethod",

这个很棘手，你可以在这里指定webmethod 在服务器端中的参数名称，以及它们将收到的内容。这里服务器端的参数名称为ID和POS，他们将相应地收到javascript vars ID_To_Submit和New_Position的值。
data: JSON.stringify({ID:ID_To_Submit,POS:New_Position}),
记得用json对它们进行字符串化，因为我们用json字符串发送它们。

success: function (response) {}是一个回调函数，当服务器从Web方法返回时会触发该函数。通常返回值直接放在response参数中，但在ASP.NET中它位于response.d

的 ----------------------
C＃部分：
的 ----------------------

在 myWebPage.aspx 页面中，在后面的代码中，您将创建一个将接收ajax帖子的网络方法：

您需要将其声明为[WebMethod]

[WebMethod] public static string myWebMethod(ID,POS) { //do what you need with the ID and the new POS if(/*everything updated fine*/) { return "changed"; } else { return "failed"; } }

注意：你可以返回你想要的任何对象，只需在javascript端正确解析它。

的 ------------------------------
返回JavaScript部分：
的 ------------------------------

还记得ajax的成功功能吗？返回值将放在response.d中
记得我们如何返回字符串"changed"或"failed"？

var options = { // ... // all the options //... success: function (response) { if (response.d == "changed") { //position updated on server successfully } else if (response.d == "failed") { //did not update on server successfully } } };

多数民众赞成。如果您有任何疑问，请随时提出。

拖放列表项后获取列表顺序asp.net c＃

1 个答案: