Ajax reorder list not draggable_问答_开发者_运维开发者技术经验分享

I have been trying to get a basic reorderlist working following this guide -> http://www.asp.net/LEARN/Ajax-Control-Toolkit/tutorial-40-vb.aspx. I have tried a demo version and in my browser so it's not a browser problem.

I am on asp.net 2.0 and have installed the AjaxControlToolkit and the DLL file is in the Bin folder.

However when I run the page - I get the list I expect but nothing is draggable, I cannot see what I am getting wrong. It will be part of a more complex page but I have taken it out into a simple page to firgure out what is wrong.

Anyone have any ideas what I may have wrong here?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxtest.aspx.cs" Inherits="Admin_ST_ajaxtest" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="AdminCSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:SqlDataSource ID="SqlDataSource_LensCatList2" runat="server" 
        ConnectionString="<%$ ConnectionStrings:VS_ConnectionString %>" OldValuesParameterFormatString="original_{0}"
        ProviderName="<%$ ConnectionStrings:VS_ConnectionString.ProviderName %>" 
        DeleteComman开发者_开发知识库d="DELETE FROM [Specs_LensDetailsTbl] WHERE [DBID] = ?" 
        SelectCommand="SELECT Specs_LensDetailsTbl.DBID, Specs_LensDetailsTbl.LensName, Specs_LensCatLookupTbl.OrderNum, Specs_LensCatLookupTbl.Active FROM Specs_LensDetailsTbl LEFT OUTER JOIN Specs_LensCatLookupTbl ON Specs_LensDetailsTbl.DBID = Specs_LensCatLookupTbl.LensDBID WHERE (Specs_LensCatLookupTbl.CatDBID = 1) ORDER BY Specs_LensCatLookupTbl.OrderNum"
        UpdateCommand="UPDATE Specs_LensDetailsTbl SET OrderNum=@OrderNum WHERE [DBID]=@original_id">      
    <UpdateParameters>           
        <asp:Parameter Name="OrderNum" Type="Int32" />           
        <asp:Parameter Name="original_id" Type="Int32" />      
    </UpdateParameters> 
    </asp:SqlDataSource>

    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true">
    </cc1:ToolkitScriptManager>
    <cc1:ReorderList ID="ReorderList1" runat="server" AllowReorder="True" 
    DataSourceID="SqlDataSource_LensCatList2" PostBackOnReorder="False" 
    DataKeyField="DBID" SortOrderField="OrderNum">
    <DragHandleTemplate>           
        <div class="DragHandleClass">           
        </div>      
    </DragHandleTemplate> 
    <ItemTemplate>
        <asp:Label ID="LensNameLabel" runat="server" Text='<%# Eval("LensName") %>' />
    </ItemTemplate>
    </cc1:ReorderList>


    </div>
    </form>
</body>
</html>

Ok in case anyone stumbles upon this question as it was showing up as top when I searched.

The issue was the same but nothing above fixed it until I set a property on the Reorderlist

ClientIDMode="AutoID"

Once you do that, it should be working.

Hope that helps.

Just a Suggestion: Look into JQuery's drag and drop UI : http://jqueryui.com/demos/draggable/

I have used it with lists for quite some time and it is very nice and SOOOO much easier to work with than the AjaxControlToolkit.

Just a suggestion.

Add this inside your reorder list opening and closing tag

<DragHandleTemplate>
    <div class="ClsDragHandle">
    </div>
</DragHandleTemplate>

Fixed. Needed to add this to web.config

<httpHandlers>
  <add path="ScriptResource.axd" verb="GET,HEAD" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>

This is a browser issue if all the code is right because I had same issue. If you view the same page in firefox then if your code is right then it will work.