Question

我正在尝试使用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个coulmns，一个编辑按钮，开始时间，炉子和评论。当用户单击编辑按钮时，会弹出一个jQueryUI对话框。我已经设置了这个部分。但是我遇到麻烦的部分是将数据从行传递到对话框。这是我的对话框的标记。（仅编辑评论字段）。

<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，但我读到的内容涉及的解决方案要求我更改我已有的代码。

Answer 1

我决定使用其他实现来实现这一目标。我所做的是在GridView中使用TemplateFields，并选择内联编辑行。

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

使用JQuery UI对话框编辑ASP GridView数据

1 个答案: