拖放列表项后获得列表顺序asp.net C＃
[英]Get list order after dragging and dropping list items asp.net c#
问题描述
I've got the following code that allows drag and drop of list items: 
我有以下代码允许拖放列表项：
<%@ 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>
It allows the user to drag the list items to the order that they require it. 它允许用户将列表项拖到他们需要的顺序。 I'm trying to find out if there's a way in c# that you can get the order of the li when the user has changed the order please? 我正在尝试找出c＃中是否有一种方法可以在用户更改订单后获取li的订单？
1 个解决方案
解决方案1
1 已采纳 2015-01-09 10:30:04
One way to accomplish what you want, would be to submit a change the user does, back to serverside using ajax. 实现您想要的一种方法是使用ajax将用户所做的更改提交回服务器端。
---------------------- ----------------------
JavaScript Part: JavaScript部分：
---------------------- ----------------------
in your .sortable() initialization, you need to add a stop handler that will fire when you drop the dragged item. 在.sortable()初始化中，您需要添加一个停止处理程序，该处理程序将在您拖放所拖动的项目时触发。 the following code alerts the new position of the dropped element: 以下代码警告放置元素的新位置：
$('.sortable').sortable({
stop: function (event, ui) {
alert("New position: " + ui.item.index());
}
});
now that we have the new position of the dragged element, you need to submit it back to the server. 现在我们有了拖动元素的新位置，您需要将其提交回服务器。
we do it by sending 2 arguments to the server: 我们通过向服务器发送2个参数来做到这一点：
- a unique ID to identify the element (could be a pre-set custom attribute that you assign to the element) 标识元素的唯一ID（可以是您分配给元素的预设自定义属性）
- the new position 新职位
to submit details back to the server, we will use ajax. 要将详细信息提交回服务器，我们将使用ajax。 first, we declare a var with the options for the 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);
}
});
});
explanation: 说明：
assuming we set a custom attribute to our
<li myCustomIDAtribute="12">element,假设我们为<li myCustomIDAtribute="12">元素设置了自定义属性，
this is how we retrieve it这就是我们检索它的方式
var ID_To_Submit = ui.item.attr("myCustomIDAtribute");this will obviously get the new position:
这显然将获得新的职位：
var New_Position = ui.item.index();here you specify the path to your aspx page where the webmethod that will receive the
在这里，您指定aspx页面的路径，在该路径中将接收
ajax is located, and the name of the method:找到ajax，并指定方法的名称：
url: "./myWebPage.aspx/myWebMethod",this one is tricky, here you specify the name of the arguments in the webmethod on server side , and what they will receive.
这很棘手，在这里您可以在服务器端的web方法中指定参数的名称以及它们将接收的内容。 here the argument names on server side will be IDandPOS, and they will receive the value of the javascript varsID_To_SubmitandNew_Positionaccordingly.在这里，服务器端的参数名称将是ID和POS，它们将分别接收javascript varsID_To_Submit和New_Position的值。
data: JSON.stringify({ID:ID_To_Submit,POS:New_Position}),
remember to stringify them using json, as we are sending it in a json string.请记住使用json对其进行字符串化，因为我们将其以json字符串形式发送。 the
success: function (response) {}is a callback function that fires when the server returns from the web method.success: function (response) {}是一个回调函数，当服务器从Web方法返回时将触发该回调函数。 usually the return value is placed directly inresponseargument, but in ASP.NET it is located inresponse.d通常，返回值直接放在response参数中，但是在ASP.NET中，它位于response.d
---------------------- ----------------------
C# Part: C＃部分：
---------------------- ----------------------
in your myWebPage.aspx page, in the code behind, you will create a web method that will receive ajax posts: 在myWebPage.aspx页的背后代码中，您将创建一个Web方法，该方法将接收ajax帖子：
you will need to declare it as a [WebMethod] 您需要将其声明为[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";
}
}
- note: you can return whatever object you want, just parse it on javascript side correctly. 注意：您可以返回所需的任何对象，只需在javascript端正确解析即可。
------------------------------ ------------------------------
Back to JavaScript Part: 返回JavaScript部分：
------------------------------ ------------------------------
remember the ajax's success function? 还记得ajax的成功功能吗？ the return value will be placed in response.d 返回值将放置在response.d
remember how we returned a string "changed" or "failed" ? 还记得我们如何返回字符串"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
}
}
};
Thats about it. 就是这样。 if you have any questions, feel free to ask. 如果你有任何问题随时问。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.