Tuesday, June 11, 2013

How to Update Sequence ol LI Tag Using Jquery & Update Sequence in DataBase

-- In Repeter Give id to ul #mnu

<asp:Repeater runat="server" ID="Repeater1">
    <HeaderTemplate>
        <ul id="mnu">
            <li>
                <label>Name</label>
            </li>
    </HeaderTemplate>
    <ItemTemplate>
        <li id="<%#((DataRowView)Container.DataItem)["PrimeryKeyID Field Gose Here"]%>">
            <label>
                <%#((DataRowView)Container.DataItem)["Name"]%></b>
            </label>
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>

-- Now Create Store Procedure

-- Add Sequence Field in Table As Int Data Type

CREATE PROCEDURE [dbo].[uspTest_UpdateSequence]
    @Sequence nVarchar(max)       
AS       
BEGIN       
       
 SET NOCOUNT ON;       
 Declare @rowID  int,       
   @sequenceFatch int        
         
 DECLARE Menu_cursor CURSOR FOR        
 SELECT * FROM dbo.split(@Sequence,',')         
       
 OPEN Menu_cursor;       
       
 FETCH NEXT FROM Menu_cursor INTO @rowID, @sequenceFatch;       
       
 WHILE @@FETCH_STATUS = 0       
 BEGIN       
 print @rowID     
  print @sequenceFatch     
  UPDATE TableName SET Sequence=@sequenceFatch WHERE Primary Key ID Gose Here = @rowID
  FETCH NEXT FROM Menu_cursor INTO @rowID, @sequenceFatch;       
       
 END--while       
 CLOSE Menu_cursor;       
 DEALLOCATE Menu_cursor;       
       
END

-- Call Store Procedure and Create WebMethod in .aspx Page

-- Add this Namespace for [using System.Web.Services;] WebMethod

[WebMethod(EnableSession = true)]
    public static void UpdateSeq(string newMethQ)
    {
    -- Call Store Procedure as Update Data
    UpdateSequence(newMethQ);
    }

-- Add This Script For Update Sequence

<script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#mnu").sortable({ items: 'li:gt(0)', update: function (e, ui) { updateMenuSequence(); } }); $("#mnu").disableSelection();
           
    function updateMenuSequence() {
                var newIndex = ''; $("#mnu li:gt(0)").each(function () {
                    if (newIndex == '') { newIndex = "{'newMethQ':'" + $(this).attr('id'); }
                    else { newIndex += "," + $(this).attr('id'); }
                });
                newIndex += "'}"; $('.pros').show();
                $.ajax({ type: "POST", url: "PageName.aspx/UpdateSeq", data: newIndex,
                    contentType: "application/json; charset=utf-8", dataType: "json",
                    success: function (msg) { $('.pros').hide(); }, error: function (xhr, msg, e) { alert(msg.e); }
                });
            }
        });
    </script>

No comments :

Post a Comment