拖放列表项后获取列表顺序asp.net c#
Get list order after dragging and dropping list items asp.net c#
我有以下允许拖放列表项的代码:
<%@ 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 的顺序?
完成您想要的事情的一种方法是提交用户所做的更改,然后使用 ajax.
返回服务器端
---------------------
JavaScript部分:
---------------------
在您的 .sortable()
初始化中,您需要添加一个 stop 处理程序,它会在您放下拖动的项目时触发。以下代码提醒放置元素的新位置:
$('.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();
在这里指定将接收
ajax的web方法所在的aspx页面的路径,以及方法的名称:
url: "./myWebPage.aspx/myWebMethod",
这一个很棘手,在这里您在服务器端服务器端指定网络方法中的参数名称以及它们将接收的内容。这里服务器端的参数名称将是 ID
和 POS
,它们将相应地接收 javascript 变量 ID_To_Submit
和 New_Position
的值。
data: JSON.stringify({ID:ID_To_Submit,POS:New_Position}),
记得使用 json 对它们进行字符串化,因为我们将其发送到 json 字符串中。
success: function (response) {}
是一个回调函数,当服务器 return 来自 web 方法时触发。通常 return 值直接放在 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";
}
}
- 注意:您可以 return 任何您想要的对象,只需在 javascript 端正确解析它即可。
-----------------------------
返回JavaScript部分:
-----------------------------
还记得 ajax 的成功函数吗? return 值将放在 response.d
中
记得我们如何 return 编辑字符串 "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
}
}
};
就是这样。如果您有任何问题,请随时提出。
我有以下允许拖放列表项的代码:
<%@ 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 的顺序?
完成您想要的事情的一种方法是提交用户所做的更改,然后使用 ajax.
返回服务器端
---------------------
JavaScript部分:
---------------------
在您的 .sortable()
初始化中,您需要添加一个 stop 处理程序,它会在您放下拖动的项目时触发。以下代码提醒放置元素的新位置:
$('.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();
在这里指定将接收
ajax的web方法所在的aspx页面的路径,以及方法的名称:
url: "./myWebPage.aspx/myWebMethod",
这一个很棘手,在这里您在服务器端服务器端指定网络方法中的参数名称以及它们将接收的内容。这里服务器端的参数名称将是
ID
和POS
,它们将相应地接收 javascript 变量ID_To_Submit
和New_Position
的值。
data: JSON.stringify({ID:ID_To_Submit,POS:New_Position}),
记得使用 json 对它们进行字符串化,因为我们将其发送到 json 字符串中。success: function (response) {}
是一个回调函数,当服务器 return 来自 web 方法时触发。通常 return 值直接放在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";
}
}
- 注意:您可以 return 任何您想要的对象,只需在 javascript 端正确解析它即可。
-----------------------------
返回JavaScript部分:
-----------------------------
还记得 ajax 的成功函数吗? return 值将放在 response.d
中
记得我们如何 return 编辑字符串 "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
}
}
};
就是这样。如果您有任何问题,请随时提出。