在现代Web开发中，用户界面的交互性变得越来越重要。其中，可排序列表是一个常见的需求。本文将介绍如何使用jQuery和jQuery UI来实现一个可排序的列表，并将排序后的数据发送回服务器。
首先，需要明确实现这一功能所需的组件：
接下来，将详细介绍每个组件的实现。
首先，需要定义视图模型。以下是UserPreferenceViewModel和UserPreferenceDetailViewModel的示例代码：
public class UserPreferenceViewModel
{
public int Id { get; set; }
public IList<UserPreferenceDetailViewModel> UserPreferenceDetails { get; set; }
}
public class UserPreferenceDetailViewModel
{
public int Id { get; set; }
public string Description { get; set; }
public bool IsEnabled { get; set; }
public int ColumnOrder { get; set; }
}
接下来是视图的实现。需要引入jQuery和jQuery UI的脚本：
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.mouse.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.sortable.js")" type="text/javascript"></script>
这些脚本是实现可排序功能所必需的。如果没有jQuery UI，可以从下载。
然后，需要定义UI元素。这里是一个简单的
@model UserPreferenceViewModel
@using YourNamespace;
@{
Layout = null;
}
<div id="modify-view-command">
<p class="message information">拖动列以按照想要的顺序排列，可以通过勾选复选框来启用/禁用列表项。</p>
<button id="save-view-preferences" class="t-button">
保存更改
</button>
</div>
<div id="modify-view-elements">
<ul id="sortable">
@foreach (UserPreferenceDetailViewModel m in Model.UserPreferenceDetails)
{
<li><span id="sort-updown"></span>
@Html.CheckBox("chkEnabled" + m.Id, m.IsEnabled, new { @class = "EnabledFlag" })
@m.Description
@Html.Hidden("hdnId-" + m.Id, m.Id, new { @class = "ItemId" })
</li>
}
</ul>
</div>
最后，需要编写jQuery代码来实现排序功能：
<script type="text/javascript">
$(function () {
$("#sortable").sortable();
$("#sortable").disableSelection();
$("#save-view-preferences").click(saveUserPreferenceDetails);
});
function saveUserPreferenceDetails() {
var userViewPreferenceDetails = new Array();
$("#sortable li").each(function (index) {
var userPreferenceItem = new Object();
userPreferenceItem.Id = $(this).find($(".ItemId")).val();
userPreferenceItem.IsEnabled = $(this).find($(".EnabledFlag")).attr("checked") == "checked" ? true : false;
userPreferenceItem.ColumnOrder = index;
userViewPreferenceDetails.push(userPreferenceItem);
});
$.ajax({
type: 'POST',
url: '/YourActionName/SaveUserViewPreferenceDetails',
data: JSON.stringify(userViewPreferenceDetails),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function () {
window.location.replace("http://whereyouwantogoafter.com");
}
});
}
</script>
[HttpPost]
public JsonResult InitializeModifyView()
{
var viewModel = yourQuery.PopulateViewModel();
return Json(new { viewHtml = RenderRazorViewToString("SortingOptions", viewModel) });
}
public virtual void SaveUserViewPreferenceDetails(List<UserPreferenceDetailViewModel> savedItems)
{
foreach (var item in savedItems)
{
yourTasks.SaveUserPreferenceDetail(item);
}
}