我一直在浏览很多关于 jQuery 可拖动/可放置的教程,并尝试将其应用到 ASP.NET MVC,但我真的很困惑。
我不断发现的大多数样本似乎很难理解,至少它与事物的连接位置有关。我基本上试图有一个可定位的框(“花名册”)和一个单位列表(“与会者”)。目标是能够将任何单位拖到框中,并将它们添加到数据库的名册中。
有谁知道一些更简单的示例,可以帮助您了解如何将 jQuery 的这一部分与 ASP.NET MVC 结合使用?
例如,我一直在查看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", { columnNum: colNum, 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_/, "");
$.post("UpdateSortOrder", { columnNum: colNum, 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;
}
}
}
和 Controller
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",
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_/, "");
alert(colNum);
$.post("/Home/UpdateSortOrder", { columnNum: colNum, 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));
},
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() 删除项目时,它会触发更新事件。我使用 jQuery 的 AJAX post 方法将数据发送到 Controller 。
$("#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 通过解析 View 中设置的 id 属性来提取 id。请参阅part 3在我的博客上了解这是如何呈现的。然后列号和部分 id 集(在 jquery 中序列化)都会发布到 Controller 。
Controller 方法位于/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");
}
希望现在能有所帮助。
关于jQuery 可拖动、可放置、ASP.NET MVC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1405396/