jQuery Sortableを使用してフォトアルバムを並べ替える（並べ替え）

Question

私は自分のウェブサイトにフォトアルバムのギャラリーを持ち、アルバム内で写真の並べ替えを許可したいと考えています。非常に異なる方法を見た後、私はこの例を見つけましたhttp://www.west-wind.com/rick/photoalbum/demoMaui2006/Default.aspx?Admin=trueこれは私が必要とするものです。

写真はアップロードディレクトリとデータベースの詳細に保存されます。イメージは、以下に示すようにListViewを使用して表示されます。

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" GroupItemCount="15"> 
     <LayoutTemplate> 
      <table id="groupPlaceholderContainer" runat="server" border="0" cellpadding="0" cellspacing="0" 
       style="border-collapse: collapse; width: 100%;"> 
       <tr id="groupPlaceholder" runat="server"> 
       </tr> 
      </table> 
     </LayoutTemplate> 
     <GroupTemplate> 
      <tr id="itemPlaceholderContainer" runat="server"> 
       <td id="itemPlaceholder" runat="server"> 
       </td> 
      </tr> 
     </GroupTemplate> 
     <ItemTemplate> 
      <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# "~/uploads/"+Eval("OriginalFilePath") %>' 
       rel="example1" Title='<%# Eval("PhotoName") %>'> 
       <div> 
        <asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/uploads/"+Eval("ThumbFilePath") %>' 
         Width="130" Height="150" BorderStyle="None" /> 
        <asp:Label ID="lblPhotoTitle" runat="server" Text='<%# Eval("PhotoName") %>' CssClass="photoTitle" ></asp:Label> 
       </div> 
      </asp:HyperLink> 
     </ItemTemplate> 

    </asp:ListView> 


    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:fpaConnectionString %>" 
     SelectCommand="fpa_SP_view_album_list_by_id" SelectCommandType="StoredProcedure"> 
     <SelectParameters> 
      <asp:QueryStringParameter DefaultValue="" Name="photo_album_id" QueryStringField="AlbumID" 
       Type="Int32" /> 
     </SelectParameters> 
    </asp:SqlDataSource> 
</div> 

写真の順序を並べ替えたいです。例のようにキャプションを変更したり、写真を削除したりすることができます。

だから、誰かが、私は以下のことを実現するためにに必要な手順を提供してください可能性： - まず、データベース内の写真テーブルから写真を表示するには（上記のリストビューを使用することができます） - 順序を変更します。キャプションを変更したり、写真を削除したりする - 写真の表の変更を更新するFinal

私はプログラミング、特にjQueryを初めて使い慣れています。

ご協力いただければ幸いです。

おかげ

Answer 1

あなたは、あなたがしたい場合は、このようなものを保存するにはjQueryのUIとソート可能な方法http://jqueryui.com/demos/sortable/

$("ListViewClientId") 
.find("table") 
.sortable({ 
      items:"tr", 
      update: function() { 
       $("#myHiddenFieldID").val(theNewPositionsArray); 
      } 
}); 

を試してみることができ、別の進歩です。あなたは、asp.netページオブジェクトの登録を介してhiddenField Page.RegisterHiddenFieldまたはこれのようなものをする必要があります。これにより、データを保存し、ユーザーが[保存]ボタンをクリックしてそのクリックイベントを処理すると、データを取得できます。