jQuery的可拖动，可弃，ASP.NET MVC [英] jQuery Draggable, Droppable, ASP.NET MVC

查看：159
本文介绍了jQuery的可拖动，可弃，ASP.NET MVC的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在寻找通过jQuery的可拖动/器可弃很多教程，并试图将其应用到ASP.NET MVC，但我真的很困惑。

大多数我一直发现样品似乎pretty很难理解至少是它涉及到的东西是有线。基本上，我想有一个靶向对话框（花名册）和（'参加'）的单位名单。目标是能够拖动任何单位入框，它们被添加到数据库中的名册。

有谁知道一些可能阐明如何使用ASP.NET MVC？

使用jQuery的这部分光的一些简单的样本

比如说，我一直在寻找<一href=\"http://philderksen.com/2009/06/18/drag-and-drop-categorized-item-list-with-jquery-and-aspnet-mvc-part-1/\" rel=\"nofollow\">http://philderksen.com/2009/06/18/drag-and-drop-categorized-item-list-with-jquery-and-aspnet-mvc-part-1/它是pretty整齐，但它只是没有解释什么，我需要。它没有很大的意义和大部分code是散落pretty，我甚至不能跟踪正在作出某些呼叫从哪里找出事情的接线方式。 （如何jQuery的调用控制器动作，比如，当一些被丢弃？我如何获得该项目的ID被拖动，所以我可以将它添加到目标触发？）

在这里，我做了一些改变 - 我的混乱表示歉意。它仍然是不完全的工作如何，我试图得到它。是否有可能使它不火的事件，如果事情被重新安排在原来的列表，但只有当拖放到另一个列表？

 ＆LT;％@页标题=LANGUAGE =C＃的MasterPageFile =〜/查看/共享/的Site.Master继承=System.Web.Mvc.ViewPage＆LT; IEnumerable的＆LT; D​​raggable.Item＆GT;＆gt;中％GT;＆LT; ASP：内容ContentPlaceHolderID =TitleContent=服务器＆GT;
    指数
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ContentPlaceHolderID =日程地址搜索Maincontent=服务器＆GT;
    ＆LT; H2＆GT;
        指数＆LT; / H＆GT;
    ＆LT; D​​IV的风格=浮动：左;宽度：250像素;＆GT;
        ＆LT; UL类=itemBox＆GT;
            ＆LT;％的foreach（在型号VAR项）
      {％GT;
            ＆LT;％Html.RenderPartial（项目，项目）; ％GT;
            ＆LT;％}％GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV的风格=浮动：左;宽度：250像素;＆GT;
        ＆LT; UL类=itemBox＆GT;
            ＆所述p为H.;
                降此处＆lt; / P＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ContentPlaceHolderID =ScriptContent=服务器＆GT;
    ＆LT;风格类型=文/ CSS＆GT;
        #draggable {
            宽度：100像素;
            高度：100像素;
            填充：0.5em;
            浮动：左;
            保证金：10px的10px的10px的0;
        }
        #droppable {
            宽度：150像素;
            高度：150像素;
            填充：0.5em;
            浮动：左;
            保证金：10px的;
        }
    ＆LT; /风格＆GT;    ＆LT;脚本类型=文/ JavaScript的＆GT;
        $（函数（）{
            $（。ITEMLIST）。可排序（{
                connectWith：.itemList
                遏制：文件，
                光标：动
                不透明度：0.8，
                占位符：itemRowPlaceholder                更新：函数（事件，UI）{
                    //提取从目前的div id列NUM
                    VAR colNum = $（本）.attr（ID）取代（/ col_ /，）。
                    $。员额（/首页/ UpdateSortOrder，{COLUMNNUM：colNum，sectionIdQueryString：$（本）.sortable（连载）}）;
                }
            }）;
        }）;
    ＆LT; / SCRIPT＆GT;＆LT; / ASP：内容＆GT;

好吧，我想跟随菲尔的指示，这是我迄今为止...我希望我甚至在正确的轨道。这是非常新的我。我想和尝试，但'更新'的东西是永远不会开火。 。 

 ＆LT;％@页标题=LANGUAGE =C＃的MasterPageFile =〜/查看/共享/的Site.Master继承=System.Web.Mvc.ViewPage＆LT; IEnumerable的＆LT; D​​raggable.Item＆GT;＆gt;中％GT;＆LT; ASP：内容ContentPlaceHolderID =TitleContent=服务器＆GT;
    指数
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ContentPlaceHolderID =日程地址搜索Maincontent=服务器＆GT;
    ＆LT; H2＆GT;
        指数＆LT; / H＆GT;
    ＆LT; D​​IV的风格=浮动：左;宽度：250像素;＆GT;
        ＆LT; UL ID =排序级=itemBox＆GT;
            ＆LT;％的foreach（在型号VAR项）
      {％GT;
            ＆LT;％Html.RenderPartial（项目，项目）; ％GT;
            ＆LT;％}％GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV ID =投掷的阶级=UI小部件头＆GT;
        ＆所述p为H.;
            降此处＆lt; / P＆GT;
    ＆LT; / DIV＆GT;
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ContentPlaceHolderID =ScriptContent=服务器＆GT;
    ＆LT;风格类型=文/ CSS＆GT;
        .draggable {
            宽度：100像素;
            高度：100像素;
            填充：0.5em;
            浮动：左;
            保证金：10px的10px的10px的0;
        }
        #droppable {
            宽度：150像素;
            高度：150像素;
            填充：0.5em;
            浮动：左;
            保证金：10px的;
        }
    ＆LT; /风格＆GT;    ＆LT;脚本类型=文/ JavaScript的＆GT;
        $（函数（）{
            $（＃排序）。可排序（{
                更新：函数（事件，UI）{
                    //提取从目前的div id列NUM
                    VAR colNum = $（本）.attr（ID）取代（/ ITEM_ /，）。                    $。员额（UpdateSortOrder，{COLUMNNUM：colNum，sectionIdQueryString：$（本）.sortable（连载）}）;
                }
            }）;
            $（＃可弃）。可弃（{
                下降：函数（事件，UI）{
                    $（本）.find（'P'）HTML（'掉落！'）;
                    //提取从目前的div id列NUM
                    VAR colNum = $（本）.attr（ID）取代（/ ITEM_ /，）。                    $。员额（UpdateSortOrder，{COLUMNNUM：colNum，sectionIdQueryString：$（本）.sortable（连载）}）;
                }            }）;
        }）;
    ＆LT; / SCRIPT＆GT;＆LT; / ASP：内容＆GT;

而Item.ascx 

 ＆LT;％@控制语言=C＃继承=System.Web.Mvc.ViewUserControl＆LT; D​​raggable.Item＆gt;中％GT;＆LT;李班=itemRowID =ITEM_＆LT;％= Model.ItemId％GT;＆GT;
    ＆LT; P＆GT;拖我到我的目标＆LT; / P＆GT;
＆LT; /李＆GT;

和存储库... 

 使用系统;
使用System.Linq的;命名空间可拖动
{
    公共部分类ItemRepository
    {
        DatabaseDataContext数据库=新DatabaseDataContext（）;        公众的IQueryable＆LT;项目＆GT; GetItems（）
        {
            在database.Items VAR项目=从我
                        选择我;
            返回的物品;
        }
    }
}

和控制器 

 使用系统;
使用System.Collections.Generic;
使用System.Linq的;
使用的System.Web;
使用System.Web.Mvc;
使用System.Web.Mvc.Ajax;命名空间Draggable.Controllers
{
    公共类HomeController的：控制器
    {
        //
        // GET：/首页/        公众的ActionResult指数（）
        {
            ItemRepository库=新ItemRepository（）;            返回视图（指数，repository.GetItems（））;
        }        公众的ActionResult项目（）
        {
            返回查看（）;
        }    }
}

该方法得到的造型很多接近你的样品是如何...但它确实没有工作。它没有得到元素的ID - 但使元素本身排序似乎并不无论是工作.... 

 ＆LT;％@页标题=LANGUAGE =C＃的MasterPageFile =〜/查看/共享/的Site.Master继承=System.Web.Mvc.ViewPage＆LT; IEnumerable的＆LT; D​​raggable.Item＆GT;＆gt;中％GT;＆LT; ASP：内容ContentPlaceHolderID =TitleContent=服务器＆GT;
    指数
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ContentPlaceHolderID =日程地址搜索Maincontent=服务器＆GT;
    ＆LT; H2＆GT;
        指数＆LT; / H＆GT;
    ＆LT; D​​IV CLASS =itemBox＆GT;
        ＆LT; UL类=ITEMLIST＆GT;
            ＆LT;％的foreach（在型号VAR项）
      {％GT;
            ＆LT;％Html.RenderPartial（项目，项目）; ％GT;
            ＆LT;％}％GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =itemBox＆GT;
        ＆LT; UL类=ITEMLIST＆GT;
            ＆所述p为H.;
                降此处＆lt; / P＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ContentPlaceHolderID =ScriptContent=服务器＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;
        $（函数（）{
            $（。ITEMLIST）。可排序（{
                connectWith：.itemList
                遏制：文件，
                光标：动
                不透明度：0.8，
                占位符：itemRowPlaceholder                更新：函数（事件，UI）{
                    //提取从目前的div id列NUM
                    VAR colNum = $（本）.attr（ID）取代（/ col_ /，）。
                    警报（colNum）;
                    $。员额（/首页/ UpdateSortOrder，{COLUMNNUM：colNum，sectionIdQueryString：$（本）.sortable（连载）}）;
                }
            }）;
        }）;
    ＆LT; / SCRIPT＆GT;＆LT; / ASP：内容＆GT;


解决方案

史黛西 - 我看到你引用我的博客，希望能有所帮助。我在博客上大jquery的asp.net mvc的拖放的项目，所以我我的职位拆分成几部分，我只有约一半（3件至今）。基本上，你正在寻找的信息是不是所有有还，但应该很快。

对于初学者来说，我调试使用 Firebug的日志记录功能的事件。这里有一个例子测试与jQuery UI的排序事件（）方法：

  $（＃MYLIST）。排序（
{
    ...
    启动：函数（事件，UI）
    {
        的console.log（ - 开始解雇 - ）;
        的console.log（$（ui.item））;
    }，    更新：函数（事件，UI）
    {
        的console.log（ - 更新烧 - ）;
        的console.log（$（ui.item））;
    }，    关闭：函数（事件，UI）
    {
        的console.log（ - 取消燃煤 - ）;
        的console.log（$（ui.item））;
    }
}）;

当一个项目使用排序（），它触发更新事件下降。我使用jQuery的AJAX post方法将数据发送到控制器。

  $（＃MYLIST）。排序（
{
    ...
    更新：函数（事件，UI）
    {
        //提取从目前的div id列NUM
        VAR colNum = $（本）.attr（ID）取代（/ col_ /，）。        $。员额（/科/ UpdateSortOrder
            {COLUMNNUM：colNum，sectionIdQueryString：$（本）.sortable（连载）}）;    }
}）;

变量colNum是通过分析该公司在视图设置id属性提取的ID。请参见部分3 在我的博客该如何呈现。那么无论是列数，并设置部分编号的（连载中的jQuery）发布到控制器。

控制器方法驻留在/Controllers/SectionController.cs和只接受帖子：

 私人SectionRepository secRepo =新SectionRepository（）;    的[AcceptVerbs（HttpVerbs.Post）
    公众的ActionResult UpdateSortOrder（INT COLUMNNUM，串sectionIdQueryString）
    {
        字符串[] =分隔新的字符串[2] {一节[] =，＆安培; };
        字符串[] = sectionIdArray sectionIdQueryString.Split（分隔符，StringSplitOptions.RemoveEmptyEntries）;        secRepo.UpdateSortOrder（COLUMNNUM，sectionIdArray）;
        secRepo.Save（）;        返回的内容（成功）;
    }

希望有所帮助现在。

I've been looking through a lot of tutorials on jQuery draggable/droppable, and trying to apply it to ASP.NET MVC, but I am really confused.

Most of the samples I keep finding seem pretty difficult to understand at least where it pertains to where things are wired. I'm basically trying to have a targetable box (a 'roster') and a list of units ('attendees'). The goal is to be able to drag any of the units into the box, and they are added to the roster in the database.

Does anyone know of some simpler samples that might shed some light on how to use this part of jQuery with ASP.NET MVC?

For instance, I've been looking at http://philderksen.com/2009/06/18/drag-and-drop-categorized-item-list-with-jquery-and-aspnet-mvc-part-1/ and it is pretty neat, but it just doesn't explain what I need. It doesn't make a lot of sense and most of the code is pretty strewn about, and I can't even trace where certain calls are being made to figure out how things are wired. (How is jQuery calling the Controller actions, for instance, to trigger when something is dropped? How do I get the ID of the item being dragged so I can add it to the target?)

Here, I made some changes - I apologize for the confusion. It still isn't quite working how I'm trying to get it to. Is it possible to make it not fire events if things are re-arranged in their original list, but only when dropped onto another list?

<%@ 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>

Alright, I'm trying to follow Phil's instructions, this is what I have so far... I hope I am even on the right track. This is all very new to me. I'm trying and trying, but the 'update' stuff is never firing. . .

<%@ 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>

And the 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>

And the repository...

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;
        }
    }
}

And the 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();
        }

    }
}

This method gets the styling a lot closer to how your sample is ...but it really doesn't work. It doesn't get the id of the element - but making the elements themselves sortable doesn't seem to work either....

<%@ 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 - I see you're referencing my blog and would love to help. I'm blogging on a larger jquery asp.net mvc drag and drop project so I split up my posts into parts and I'm only about halfway through (3 parts so far). Basically, the info you're looking for is not all there yet, but should be soon.

For starters, I debug events using Firebug's logging feature. Here's an example testing events with jQuery UI's sortable() method:

$("#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));
    }
});

When an item is dropped using sortable(), it fires the update event. I use jQuery's AJAX post method to send the data to a 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") });

    }
});

The variable colNum is extracting the id by parsing the id attribute that's set in the view. See part 3 on my blog for how this is rendered. Then both the column number and set of section id's (serialized in jquery) are posted to the controller.

The controller method resides in /Controllers/SectionController.cs and only accepts posts:

    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");
    }

Hope that helps for now.

这篇关于jQuery的可拖动，可弃，ASP.NET MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
ASP .NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆