我一直在浏览很多关于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>" %>
Index
Index
<% foreach (var item in Model)
{ %>
<% Html.RenderPartial("Item", item); %>
<% } %>
好吧,我正在努力遵循菲尔的指示,这就是我到目前为止所做的......我希望我能走上正轨.这对我来说都很新鲜.我正在努力尝试,但"更新"的东西永远不会被解雇...
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage>" %>
Index
Index
<% foreach (var item in Model)
{ %>
<% Html.RenderPartial("Item", item); %>
<% } %>
而Item.ascx
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
Drag me to my target
和存储库......
using System;
using System.Linq;
namespace Draggable
{
public partial class ItemRepository
{
DatabaseDataContext database = new DatabaseDataContext();
public IQueryable- 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>" %>
Index
Index
<% foreach (var item in Model)
{ %>
<% Html.RenderPartial("Item", item); %>
<% } %>
小智..
9
史黛西 - 我看到你正在引用我的博客并愿意提供帮助.我在一个更大的jquery asp.net mvc拖放项目上写博客,所以我将我的帖子分成几部分,我只有一半左右(到目前为止3个部分).基本上,你正在寻找的信息还不是全部,但应该很快.
对于初学者,我使用Firebug的日志记录功能调试事件.以下是使用jQuery UI的sortable()方法测试事件的示例:
$("#mylist").sortable(
{
...
start: function(event, ui)
{
console.log("-- start fired --");
console.log($(ui.item));
},
update: function(event, ui)
{
console.log("-- update fired --");
console.log($(ui.item));
},
deactivate: function(event, ui)
{
console.log("-- deactivate fired --");
console.log($(ui.item));
}
});
使用sortable()删除项时,会触发update事件.我使用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",
{ columnNum: colNum, sectionIdQueryString: $(this).sortable("serialize") });
}
});
变量colNum通过解析在视图中设置的id属性来提取id.请参阅我的博客上的第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");
}
希望现在有所帮助.
1> 小智..：
史黛西 - 我看到你正在引用我的博客并愿意提供帮助.我在一个更大的jquery asp.net mvc拖放项目上写博客,所以我将我的帖子分成几部分,我只有一半左右(到目前为止3个部分).基本上,你正在寻找的信息还不是全部,但应该很快.
对于初学者,我使用Firebug的日志记录功能调试事件.以下是使用jQuery UI的sortable()方法测试事件的示例:
$("#mylist").sortable(
{
...
start: function(event, ui)
{
console.log("-- start fired --");
console.log($(ui.item));
},
update: function(event, ui)
{
console.log("-- update fired --");
console.log($(ui.item));
},
deactivate: function(event, ui)
{
console.log("-- deactivate fired --");
console.log($(ui.item));
}
});
使用sortable()删除项时,会触发update事件.我使用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",
{ columnNum: colNum, sectionIdQueryString: $(this).sortable("serialize") });
}
});
变量colNum通过解析在视图中设置的id属性来提取id.请参阅我的博客上的第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");
}
希望现在有所帮助.
京公网安备 11010802040832号