根据jQuery可排序列表中的新值更新SQL Server表

Question

好人，我希望外面有人可以建议我如何解决这个特殊问题。

我正在制作一个电子通讯内容构建器。 想法是，编辑者可以将文本和图像组合在一起的不同文章拼凑在一起，以将故事创建为一个特定的版本。 整理不同文章的工具允许编辑者在发布之前按照编辑者的最终偏好（storyRank）对文章进行重新排序。

使用少量的jQuery处理可重排序，该jQuery循环遍历可排序列表（jQuery UI），并将新的storyRank值附加到tb_storyRank文本框中。 这可以正常工作，并在重新排序时使用新的排名值填充所需的字段。

当用户提交表单时，其想法是对更新列表转发器中的每个项目执行更新，获取每个storyRank并根据storyId更新特定的故事...简单...大概我想！

出于某种原因，我的后台代码没有从tb_storyRank字段中获取新值，它只是使用现有的storyRank值重新填充，我不知道为什么。 我没有错。

标头：

<link type="text/css" href="../../../css/cupertino/jquery-ui-1.8.18.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="../../../javascripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../../../javascripts/jquery-ui-1.8.18.custom.min.js"></script>
<style type="text/css">
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: auto; }
    #sortable li span { position: relative; margin-left: 0.5em; clear:none; }
    #sortable li div { position: absolute; margin-left: -1.3em; display: inline-block; clear: none; cursor: move; } /*icon*/
</style>
<script type="text/javascript">
    $(function () {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
    });

    $(document).ready(function () {
        //used to update storyRank field upon change which is only committed when the user 'saves' the newsletter
        $( "#sortable" ).bind( "sortupdate", function(event, ui) {
            newRank()
        });

    });

    //binds incremental value to storyRank textbox either onload or on order change
    function newRank() {
        $('li input[id$=tb_storyRank]').each(function (index) {
            var newid = index;
            $(this).attr('value', newid);
        });
    };
</script>

代码隐藏（VB）：

'function to dealwith content masterview (content list)
Sub dealWithContent(ByVal sender As Object, ByVal e As CommandEventArgs) Handles fv_content.ItemCommand

    Select Case e.CommandName
        Case "Update"
            Try
                Dim rep_content As Repeater = TryCast(fv_content.FindControl("rep_content"), Repeater)
                For Each item As RepeaterItem In rep_content.Items
                    For i As Integer = 0 To rep_content.Items.Count - 1
                        Dim tb_nlStory_id As TextBox = CType(item.FindControl("tb_nlStory_id"), TextBox)
                        Dim tb_storyRank As TextBox = CType(item.FindControl("tb_storyRank"), TextBox)
                        Dim strQuery As String = "UPDATE [nlStoryTbl] SET [storyRank] = @storyRank WHERE [nlStory_id] = @nlStory_id"
                        Dim cmd As New SqlCommand(strQuery)
                        cmd.Parameters.Clear()
                        cmd.Parameters.AddWithValue("@storyRank", tb_storyRank.Text)
                        cmd.Parameters.AddWithValue("@nlStory_id", tb_nlStory_id.Text)
                        InsertUpdateData(cmd)
                        lbl_test.Text += tb_storyRank.Text & "<br />"
                    Next
                Next
            Catch ex As Exception
                lbl_test.Text = "UPDATE CONTENT LIST FAILED: " & ex.ToString
            End Try
        Case Else
            lbl_test.Text = "Sorry command was not dealt with"
    End Select

End Sub

面前：

<asp:FormView ID="fv_content" runat="server" Width="100%" OnItemCommand="dealWithContent" DefaultMode="Edit" >
    <HeaderTemplate>
        <h3>Content List:</h3>
    </HeaderTemplate>
    <EditItemTemplate>
            <ul id="sortable">
                <asp:Repeater ID="rep_content" runat="server" DataSourceID="ds_storyRank" OnItemCommand="RepeaterGetSelectedID">
                    <ItemTemplate>
                        <li id='<%# Eval("storyRank") %>' class="ui-state-default">
                            <div class="ui-icon ui-icon-arrowthick-2-n-s"></div>
                            <asp:Label ID="lbl_title" runat="server" Text='<%# Bind("title")%>'></asp:Label>
                            <asp:TextBox ID="tb_nlStory_id" runat="server" Text='<%# Bind("nlStory_id") %>'  Width="10px" Enabled="false" />
                            <asp:TextBox ID="tb_storyRank" runat="server" Text='<%# Bind("storyRank") %>' Width="10px" Enabled="false" />
                            <span style="float:right;">
                                <asp:Button ID="butt_select" runat="server" CommandName="Select" Text="Edit" />
                                <asp:Button ID="butt_delete" runat="server" CommandName="Delete" Text="Delete" OnClientClick="return confirm('Are you certain that you want to PERMENANTLY delete this piece of content from the newsletter?\nThere may be issues relating to images and other content linked to it through the database.')" />
                            </span>
                        </li>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:Button ID="butt_saveContent" runat="server" CommandName="Update" Text="Save Newsletter" OnClick="saveNewsletter" />
                        <asp:Button ID="butt_preview" runat="server" CommandName="Preview" Text="Preview Newsletter" />
                    </FooterTemplate>
                </asp:Repeater>
            </ul>
    </EditItemTemplate>
    <FooterTemplate>

    </FooterTemplate>
</asp:FormView>
<asp:Label ID="lbl_test" runat="server"></asp:Label>

Answer 1

本文可能对您有帮助： http : //codeasp.net/articles/asp-net/228/reorder-list-using-jquery-and-asp-net

编写器使用带有逗号分隔的字符串作为参数的存储过程来更新数据库中的顺序。