使用 JQuery UI Dialog 编辑 ASP GridView 数据答案

【问题标题】：Using JQuery UI Dialog to edit ASP GridView data使用 JQuery UI Dialog 编辑 ASP GridView 数据
【发布时间】：2013-12-19 05:12:24
【问题描述】：

我正在尝试使用 jQueryUI 对话框来编辑用户单击的 gridview 中任何行的一些数据。到目前为止，我的 gridview 看起来是这样的：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
         OnRowDataBound="GridView1_RowDataBound" 
         style="margin: 2px 5px 5px 15px;" >
         <Columns>
              <asp:TemplateField HeaderText="Edit">
                   <ItemTemplate>
                        <asp:LinkButton Id="btnEditRow" Text="Edit" OnClientClick="EditRecordOpen('editForm');return false;" OnClick="btnEditRow_Click" runat="server" />
                    </ItemTemplate>
              </asp:TemplateField>
              <asp:BoundField DataField="StartTime" HeaderText="Start Time" 
                    SortExpression="StartTime" >
               </asp:BoundField>
               <asp:BoundField DataField="Furnace" HeaderText="Furnace" 
                     SortExpression="Furnace">
                </asp:BoundField>
                <asp:BoundField DataField="OperatorComments" HeaderText="Operator Comments" 
                      SortExpression="OperatorComments" ControlStyle-Width="200px">
                </asp:BoundField>
          </Columns>
 </asp:GridView>

它只有 4 个列、一个编辑按钮、开始时间、熔炉和 cmets。当用户单击编辑按钮时，会弹出一个 jQueryUI 对话框。我已经设置了那个部分。但是我遇到问题的部分是将数据从行传递到对话框。这是我的对话框的标记。（只会编辑 cmets 字段）。

<div id="editForm">
     <asp:UpdatePanel ID="editRecordPanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
          <ContentTemplate>
                Furnace: <asp:Label ID="lblFurnace" runat="server" Text="Label"></asp:Label><br />
                Start Time: <asp:Label ID="lblStartTime" runat="server" Text="Label"></asp:Label><br />
                Comments: <asp:TextBox ID="txtEditComments" runat="server"></asp:TextBox><br />
                <asp:Button ID="btnSaveRecord" runat="server" Text="Save" OnClick="btnSaveRecord_Click" />
           </ContentTemplate>
     </asp:UpdatePanel>

这是我处理弹出窗口的 javascript：

   $(document).ready(function () {
        $("#editForm").dialog({
            autoOpen: false,
            draggable: true,
            title: "Edit Record",
            width: 500,
            resizable: false,
            open: function (type, data) {
                $(this).parent().appendTo("form");
            }
        });
    });

    function EditRecordOpen(id) {
        $("#" + id).dialog("open");
        // found something like this from a page I found on google
        $("#lblFurnace").html($("#Furnace", $(this).closest("tr")).html());
    }

    function EditRecordClose(id) {
        $("#" + id).dialog("close");
    }

这是我在对话框打开后面使用的代码：

private void CloseDialog(string dialogId)
{
    string script = string.Format(@"EditRecordClose('{0}');", dialogId);
    ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}

protected void btnSaveRecord_Click(object sender, EventArgs e)
{
    CloseDialog("editForm");
}

protected void btnEditRow_Click(object sender, EventArgs e)
{
    var editLink = ((LinkButton)sender);
    editRecordPanel.Update();
}

我试图弄清楚如何将数据从行中获取到对话框。我已经在 Google 上进行了一些搜索，但我所阅读的内容涉及需要我更改现有代码的解决方案。

【问题讨论】：

标签： asp.net jquery-ui gridview jquery-ui-dialog

【解决方案1】：

我决定使用另一种实现来完成这项工作。我所做的是在我的 GridView 中使用 TemplateFields，并选择内联编辑行。

在我的问题 (Cascading Dropdowns in asp gridview, not getting .asmx methods) 中，您可以看到我的 gridView 是如何更改为允许编辑的。

【讨论】：