Tôi đã xem qua rất nhiều hướng dẫn về jQuery có thể kéo/có thể tháo rời và cố gắng áp dụng nó cho ASP.NET MVC, nhưng tôi thực sự bối rối.jQuery Draggable, Droppable, ASP.NET MVC
Hầu hết các mẫu tôi tiếp tục tìm kiếm có vẻ khá khó hiểu ít nhất là nơi nó liên quan đến nơi mọi thứ được kết nối. Tôi về cơ bản đang cố gắng để có một hộp có thể nhắm mục tiêu (một 'danh sách') và một danh sách các đơn vị ('người tham dự'). Mục đích là để có thể kéo bất kỳ đơn vị nào vào hộp và chúng được thêm vào danh sách trong cơ sở dữ liệu.
Có ai biết một số mẫu đơn giản hơn có thể làm sáng tỏ một số cách sử dụng phần này của jQuery với ASP.NET MVC không?
Ví dụ, tôi đã xem http://philderksen.com/2009/06/18/drag-and-drop-categorized-item-list-with-jquery-and-aspnet-mvc-part-1/ và nó khá gọn gàng, nhưng nó không giải thích được những gì tôi cần. Nó không tạo ra nhiều ý nghĩa và hầu hết đoạn mã đều khá vất vả, và tôi thậm chí không thể theo dõi được một số cuộc gọi đang được thực hiện để tìm ra cách mọi thứ được kết nối. (Như thế nào jQuery gọi các hành động điều khiển, ví dụ, để kích hoạt khi một cái gì đó bị rơi? Làm thế nào để có được ID của mặt hàng đó bị kéo vì vậy tôi có thể thêm nó vào mục tiêu?)
Ở đây, tôi đã thực hiện một số thay đổi - tôi xin lỗi vì sự nhầm lẫn. Nó vẫn không hoàn toàn làm việc như thế nào tôi đang cố gắng để làm cho nó. Có thể làm cho nó không cháy sự kiện nếu mọi thứ được sắp xếp lại trong danh sách ban đầu của họ, nhưng chỉ khi rơi vào một danh sách khác?
<%@ 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>
Được rồi, tôi đang cố gắng để làm theo hướng dẫn Phil, đây là những gì tôi có cho đến nay ... Tôi hy vọng tôi thậm chí đi đúng hướng. Điều này hoàn toàn mới đối với tôi. Tôi đang cố gắng và cố gắng, nhưng công cụ 'cập nhật' không bao giờ được kích hoạt. . .
<%@ 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>
Và 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>
Và kho ...
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;
}
}
}
Và bộ điều khiển
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();
}
}
}
Phương pháp này nhận được kiểu dáng gần gũi hơn với cách mẫu của bạn ... nhưng nó thực sự không hoạt động. Nó không nhận được id của phần tử - nhưng làm cho các yếu tố tự phân loại dường như không hoạt động ...
<%@ 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>
Blog được tham chiếu gần đầu có thể được tìm thấy tại đây: http://philderksen.com/2009/series-drag-and-drop-categorized-item-list-jquery-asp-net-mvc/ – Corin