Javascript 在asp.net c中拖放列表项后获取列表顺序#
我有以下允许拖放列表项的代码：Javascript 在asp.net c中拖放列表项后获取列表顺序#,javascript,c#,jquery,asp.net,jquery-ui-sortable,Javascript,C#,Jquery,Asp.net,Jquery Ui Sortable,我有以下允许拖放列表项的代码： <%@ 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&g
<%@ 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>
标题，节{
显示：块；
}
身体{
字体系列：“Droid衬线”；
}
h1，h2{
文本对齐：居中；
字体大小：正常；
}
#特征{
保证金：自动；
宽度：460px；
字号：0.9em；
}
.connected、.sortable、.exclude、.handles{
保证金：自动；
填充：0；
宽度：310px；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.sortable.grid{
溢出：隐藏；
}
.connected li、.sortable li、.exclude li、.handles li{
列表样式：无；
边框：1px实心#CCC；
背景：#F6F6F6；
字体系列：“Tahoma”；
颜色：#1C94C4；
保证金：5px；
填充物：5px；
高度：22px；
}
.把手跨度{
光标：移动；
}
李：残疾人{
不透明度：0.5；
}
.sortable.grid li{
线高：80px；
浮动：左；
宽度：80px；
高度：80px；
文本对齐：居中；
}
李：亮点{
背景：#FEE25F；
}
#连接的{
宽度：440px；
溢出：隐藏；
保证金：自动；
}
.连接{
浮动：左；
宽度：200px；
}
.连接{
浮动：对；
}
li.可排序占位符{
边框：1px虚线#CCC；
背景：无；
}
可排序列表
$（函数（）{
$（'.sortable'）.sortable（）；
$（'.handles'）。可排序({
句柄：“span”
});
$（'.connected'）。可排序({
connectWith:“.已连接”
});
$（'.exclude'）。可排序({
项目：'：未（.disabled）'
});
});
它允许用户将列表项拖动到所需的顺序。我想知道在c语言中是否有一种方法，当用户更改订单时，您可以获得li的订单，请？实现您想要的一种方法是，使用ajax将用户所做的更改提交回服务器端
-------------------------
JavaScript部分：
------------------------- 在
.sortable（）$('.sortable').sortable({
stop: function (event, ui) {
alert("New position: " + ui.item.index());
}
});
我们通过向服务器发送两个参数来实现：
- 标识元素的唯一ID（可以是指定给元素的预设自定义属性）
- 新职位
$(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);
}
});
});
- 假设我们为
元素设置了一个自定义属性，
这就是我们检索它的方式
var ID_To_Submit=ui.item.attr（“MyCustomIDAttribute”） - 这显然会得到新的职位：
var New_Position=ui.item.index（） - 在这里，您可以指定接收
ajax的webmethod所在的aspx页面的路径，以及该方法的名称：
url:“./myWebPage.aspx/myWebMethod”， - 这是一个棘手的问题，在这里您可以指定服务器端的webmethod中参数的名称，以及它们将接收到的内容。在这里，服务器端的参数名称将是
和ID
，它们将接收javascript变量POSID\u的值，以提交和
。新位置
data:JSON.stringify（{ID:ID\u To\u Submit，POS:New\u Position}），
记住使用json对它们进行字符串化，因为我们是以json字符串发送的。
是一个回调函数，当服务器从web方法返回时触发。通常返回值直接放在success:function（response）{}
参数中，但在ASP.NET中它位于responseresponse.d
-------------------------
C#部分：
------------------------- 在您的myWebPage.aspx页面的代码隐藏中，您将创建一个web方法来接收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
}
}
};