Web 表单网格视图数据表行的索引通过拖放进行更新

Question

我有一个从服务器表Categories绑定的网格视图表，前面有一个脚本可以拖放来更改类别的顺序，因此需要更新其在订单字段中的订单位置。但现在，每当我在拖放行后单击更新顺序按钮时，我都会得到绑定到网格视图的初始对象，而不是更改的行。我只想将前端更改传递到服务器端。但它仍然只发送最初绑定的内容。请帮忙

标记：

    <asp:GridView ID="gvData" runat="server" AutoGenerateColumns="False" CssClass="table table-striped grab"
    EnableViewState="True" GridLines="None" OnRowDataBound="gvData_RowDataBound"
    EmptyDataText="No Data Found" EmptyDataRowStyle-CssClass="emptyDataMessage"
    AllowSorting="True" DataKeyNames="ExternalId">
    <Columns>
        <asp:TemplateField HeaderText="#" ItemStyle-Width="1%" HeaderStyle-HorizontalAlign="Center"
            ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>                
            <asp:Label ID="lbCategoryId" runat="server" CssClass="sortable-field" text='<%# Container.DataItemIndex + 1 %>'/>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
            <ItemTemplate>
                <asp:HyperLink ID="hlCategoryDetail" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Nick" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
            <ItemTemplate>
                <asp:Literal ID="ltNick" runat="server" />               
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Order" ItemStyle-Width="1%" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
            <ItemTemplate>
                <asp:HiddenField ID="hfOriginalIndex" runat="server" Value="<%# Container.DataItemIndex %>" />
                <asp:Label ID="lbSort" runat="server" CssClass="sortable-field" text='<%# Container.DataItemIndex + 1 %>'/>                
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="-" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:Label ID="lbAlert" runat="server" CssClass="text-danger" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EmptyDataRowStyle CssClass="emptyDataMessage" />
</asp:GridView>
<div class="col-sm-4 col-sm-offset-10">
    <asp:Button ID="btnUpdateOrder" CssClass="btn btn-primary" Text="Update Order" runat="server" OnClick="UpdateOrder" />
</div>

这是背后的代码：

protected void gvData_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.DataItem != null)
    {
        var category = (PaymentCategory)e.Row.DataItem;
        var hlCategoryDetail = (HyperLink)e.Row.FindControl("hlCategoryDetail");
        var ltNick = (Literal)e.Row.FindControl("ltAlias");
        var lbOrder = (Label)e.Row.FindControl("lbSort");
        var lbAlert = (Label)e.Row.FindControl("lbAlert");
        var lbCategoryId = (Label)e.Row.FindControl("lbCategoryId");                

        lbCategoryId.Text = category.Id.ToString();
        hlCategoryDetail.Text = category.Name;
        hlCategoryDetail.NavigateUrl = "~/Default.aspx?action=EditPaymentCategory&id=" + category.Id;                
    }
}

protected void UpdateSort(object sender, EventArgs e)
{
    int[] sortIds = (from p in Request.Form["lbSort"].Split(',') select int.Parse(p)).ToArray();
    foreach (GridViewRow row in gvData.Rows)
    {
        //Access Cell values.
        //int categoryId = int.Parse(((Label)row.FindControl("lbCategoryId")).Text);
        var ltNick = (Literal)row.FindControl("ltNick");
        int origIndex = int.Parse(((HiddenField)row.FindControl("hfOriginalIndex")).Value);
        int orderId = int.Parse(((Label)row.FindControl("lbOrder")).Text);
        string categoryId = gvData.DataKeys[origIndex].Value.ToString();
        
        //Controller.UpdateCategorySortOrder(category, orderId);
    }
    Response.Redirect(Request.Url.AbsoluteUri);
}

这是动态拖放的脚本：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script src="jquery.tablednd.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=gvData]").sortable({
            items: 'tr:not(tr:first-child)',
            cursor: 'pointer',
            axis: 'y',
            dropOnEmpty: false,
            start: function (e, ui) {
                ui.item.addClass("selected");
            },
            stop: function (e, ui) {
                ui.item.removeClass("selected");
                //iterate through rows and update Sort field
                $("[id*=lbCategoryId]").each(function (index) {
                    $(this).text(index + 1);
                });
                $("[id*=gvData] tbody tr").each(function (index) {
                    $(this).find("[id*=hfOriginalIndex]").val(index);                    
                    // Update categoryId using data attribute
                    var categoryId = $(this).find("[id*=lbCategoryId]").data("Id").val(categoryId);                   
                });               
            },            
            receive: function (e, ui) {
                $(this).find("tbody").append(ui.item);
            }
        });
    });    
</script>

Answer 1

通过使用输入元素抓取前面的数据来解决它

<%# Eval("Id") %>
<input type="hidden" name="Id" value='<%# Eval("Id") %>' />

没有 ASP.NET 控制器

protected void UpdateSort(object sender, EventArgs e)
    {
        int[] orderIds = (from p in Request.Form["OrderId"].Split(',')
                          select int.Parse(p)).ToArray();
        int[] categoryIds = (from p in Request.Form["Id"].Split(',')
                             select int.Parse(p)).ToArray();

        try
        {
            var updates = new Dictionary<int, int>();

            for (int i = 0; i < orderIds.Length; i++)
            {
                int orderId = orderIds[i];
                int categoryId = categoryIds[i];
                updates.Add(orderId, categoryId);
            }
            //PaymentController.UpdateCategorySortOrder(orderId, categoryId);
            PaymentController.UpdateCategorySortOrder(updates);
        }
        catch (Exception ex)
        {
            logger.Error("[{0}], {1}", ex.GetType().ToString(), ex);
        }
        PaymentController.RemovePaymentContextFromHttpSession();
        PaymentContext context = PaymentController.GetContext();
        paymentContextResources = PaymentController.GetPaymentContextResourcesByType(PaymentContextResourceType.Category);
        BindContext(context);
        Response.Redirect(Request.Url.AbsoluteUri);
    }