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

时间:2012-04-16 15:48:45

标签: jquery asp.net sql-server vb.net jquery-ui-sortable

好人,我希望有人能告诉我如何解决这个问题。

我正在制作电子通讯内容制作工具。我们的想法是,编辑可以拼凑不同的文章,其中包含文本和图像的组合,以创建一个特定版本的故事。将不同文章组合在一起的工具允许编辑在发布之前将文章重新排序到编辑的最终首选项(storyRank)。

使用一些循环遍历可排序列表(jQuery UI)的jQuery处理重新排序,并将新的storyRank值附加到tb_storyRank文本框。这样可以在重新订购时使用新的排名值填充所需的字段。

当用户提交表单时,想法是对更新列表转发器中的每个项目执行更新,根据storyId获取每个storyRank并更新特定故事...简单......或者我认为!

由于某些原因,我的代码隐藏没有从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>

Codebehind(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>

1 个答案:

答案 0 :(得分:0)

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

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