我一直在浏览很多关于jQuery draggable / droppable的教程,并尝试将其应用于ASP.NET MVC,但我真的很困惑.
我认为的大多数样本似乎很难理解,至少它在哪里连线的地方.我基本上试图拥有一个可定位的盒子(“花名册”)和单位列表(“参加者”).目标是能够将任何单位拖入框中,并将它们添加到数据库中的名单中.
有没有人知道一些更简单的示例,可能会揭示如何使用ASP.NET MVC这一部分的jQuery？
例如,我一直在看着http://philderksen.com/2009/06/18/drag-and-drop-categorized-item-list-with-jquery-and-aspnet-mvc-part-1/,它很整洁,但它并没有解释我需要什么.它没有太多的意义,大部分的代码很漂亮,我甚至不能追踪到某些调用的位置,弄清楚事情是如何连线的. (jQuery如何调用Controller操作,例如,当某些东西被删除时触发？如何获取被拖动的项目的ID,以便我可以将它添加到目标？)
在这里,我做了一些改变 – 我为此感到歉意.它仍然是不正常的工作,我如何试图得到它.如果事情重新排列在原始列表中,但是只有当放在另一个列表上时,是否可能不会触发事件？
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Draggable.Item>>" %>
<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
<h2>
Index</h2>
<div style="float: left; width: 250px;">
<ul class="itemBox">
<% foreach (var item in Model)
{ %>
<% Html.RenderPartial("Item",item); %>
<% } %>
</ul>
</div>
<div style="float: left; width: 250px;">
<ul class="itemBox">
<p>
Drop here</p>
</ul>
</div>
</asp:Content>
<asp:Content ContentPlaceHolderID="ScriptContent" runat="server">
<style type="text/css">
#draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
</style>
<script type="text/javascript">
$(function() {
$(".itemList").sortable({
connectWith: ".itemList",containment: "document",cursor: "move",opacity: 0.8,placeholder: "itemRowPlaceholder",update: function(event,ui) {
//Extract column num from current div id
var colNum = $(this).attr("id").replace(/col_/,"");
$.post("/Home/UpdateSortOrder",{ columnNum: colNum,sectionIdQueryString: $(this).sortable("serialize") });
}
});
});
</script>
</asp:Content>
好的,我试图跟随菲尔的指示,这是我到目前为止…我希望我甚至在正确的轨道上.这对我来说都很新鲜我正在努力尝试,但是’更新’的东西从来不会被触发. . .
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Draggable.Item>>" %>
<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
<h2>
Index</h2>
<div style="float: left; width: 250px;">
<ul id="sortable" class="itemBox">
<% foreach (var item in Model)
{ %>
<% Html.RenderPartial("Item",item); %>
<% } %>
</ul>
</div>
<div id="droppable" class="ui-widget-header">
<p>
Drop here</p>
</div>
</asp:Content>
<asp:Content ContentPlaceHolderID="ScriptContent" runat="server">
<style type="text/css">
.draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
</style>
<script type="text/javascript">
$(function() {
$("#sortable").sortable({
update: function(event,ui) {
//Extract column num from current div id
var colNum = $(this).attr("id").replace(/item_/,"");
$.post("UpdateSortOrder",sectionIdQueryString: $(this).sortable("serialize") });
}
});
$("#droppable").droppable({
drop: function(event,ui) {
$(this).find('p').html('Dropped!');
//Extract column num from current div id
var colNum = $(this).attr("id").replace(/item_/,sectionIdQueryString: $(this).sortable("serialize") });
}
});
});
</script>
</asp:Content>
和Item.ascx
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Draggable.Item>" %>
<li class="itemRow" id="item_<%= Model.ItemId %>">
<p>Drag me to my target</p>
</li>
和存储库…
using System;
using System.Linq;
namespace Draggable
{
public partial class ItemRepository
{
DatabaseDataContext database = new DatabaseDataContext();
public IQueryable<Item> GetItems()
{
var items = from i in database.Items
select i;
return items;
}
}
}
和控制器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
namespace Draggable.Controllers
{
public class HomeController : Controller
{
//
// GET: /Index/
public ActionResult Index()
{
ItemRepository repository = new ItemRepository();
return View("Index",repository.GetItems());
}
public ActionResult Item()
{
return View();
}
}
}
这种方法可以使样式更接近样品的样式,但实际上并不奏效.它没有得到元素的id – 但是使得元素本身可排序似乎不起作用.
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Draggable.Item>>" %>
<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
<h2>
Index</h2>
<div class="itemBox">
<ul class="itemList">
<% foreach (var item in Model)
{ %>
<% Html.RenderPartial("Item",item); %>
<% } %>
</ul>
</div>
<div class="itemBox">
<ul class="itemList">
<p>
Drop here</p>
</ul>
</div>
</asp:Content>
<asp:Content ContentPlaceHolderID="ScriptContent" runat="server">
<script type="text/javascript">
$(function() {
$(".itemList").sortable({
connectWith: ".itemList","");
alert(colNum);
$.post("/Home/UpdateSortOrder",sectionIdQueryString: $(this).sortable("serialize") });
}
});
});
</script>
</asp:Content>
解决方法
Stacey – 我看到你在引用我的博客,并希望能够帮助.我在一个更大的jquery asp.net mvc拖放项目博客,所以我把我的帖子分成几部分,我只有大约一半(到目前为止3部分).基本上,你正在寻找的信息不是全部,但应该很快.
对于初学者,我使用Firebug’s logging功能调试事件.下面是使用jQuery UI的sortable()方法测试事件的示例：
$("#mylist").sortable(
{
...
start: function(event,ui)
{
console.log("-- start fired --");
console.log($(ui.item));
},ui)
{
console.log("-- update fired --");
console.log($(ui.item));
},deactivate: function(event,ui)
{
console.log("-- deactivate fired --");
console.log($(ui.item));
}
});
当使用sortable()删除一个项目时,它会触发更新事件.我使用jQuery的AJAX post方法将数据发送到控制器.
$("#mylist").sortable(
{
...
update: function(event,ui)
{
//Extract column num from current div id
var colNum = $(this).attr("id").replace(/col_/,"");
$.post("/Section/UpdateSortOrder",sectionIdQueryString: $(this).sortable("serialize") });
}
});
变量colNum通过解析视图中设置的id属性来提取ID.请参阅我的博客上的part 3,了解如何呈现.然后将列号和段id的集合(在jquery中序列化)都发布到控制器.
控制器方法驻留在/Controllers/SectionController.cs中,只接受帖子：
private SectionRepository secRepo = new SectionRepository();
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateSortOrder(int columnNum,string sectionIdQueryString)
{
string[] separator = new string[2] { "section[]=","&" };
string[] sectionIdArray = sectionIdQueryString.Split(separator,StringSplitOptions.RemoveEmptyEntries);
secRepo.UpdateSortOrder(columnNum,sectionIdArray);
secRepo.Save();
return Content("Success");
}
希望有所帮助.
