Question

1）如果我从网格中单击视图按钮，它必须显示该特定LID的jquery对话框，但它不起作用。（在对话框中，它必须只显示REMARKS1列文本）

2）我已经通过c＃代码包含了linkbutton（取消/编辑）来编辑特定的行。如何使用jquery对话框进行编辑/取消。

我已经粘贴了我的aspx网页和C＃代码。如果您可以更改此代码，那将会很棒，否则请提供新代码。请找到附图，它会显示网格和对话框。

enter image description here

aspx页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="jquery/themes/dark-hive/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jquery/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="jquery/ui/jquery.ui.core.js" type="text/javascript"></script>
    <script src="jquery/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="jquery/ui/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="jquery/ui/jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="jquery/ui/jquery.ui.position.js" type="text/javascript"></script>
    <script src="jquery/ui/jquery.ui.button.js" type="text/javascript"></script>
    <script src="jquery/ui/jquery.ui.dialog.js" type="text/javascript"></script>
    <script src="jquery/ui/jquery.ui.effect.js" type="text/javascript"></script>
    <script src="jquery/ui/jquery.ui.effect-slide.js" type="text/javascript"></script>
    <script src="jquery/ui/jquery.ui.effect-explode.js" type="text/javascript"></script>
    <script src="jquery/ui/jquery.ui.effect-fade.js" type="text/javascript"></script>
    <link href="jquery/themes/demos.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
    $(document).ready(function () {
        $("#example1").dialog({
            modal: true,
            autoOpen: false,
                show: {
                    effect: "slide",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }

            });

            $('#btuser').click(function (event) {
                event.preventDefault();
                $('#example1').dialog('open');
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div style="height: 500px;">
            <asp:GridView ID="grdDisplay" runat="server" AutoGenerateColumns="False" CellPadding="1"
                CellSpacing="1" Height="0px" GridLines="None" CssClass="myGrid" PagerStyle-CssClass="pager"
                AlternatingRowStyle-CssClass="alt" Width="1024px" RowStyle-CssClass="RowStyle"
                Font-Bold="False" Font-Names="Segoe UI" Font-Size="13px" OnRowDataBound="grdDisplay_RowDataBound">
                <AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
                <Columns>
                    <asp:BoundField HeaderText="LID" DataField="l_ID" ItemStyle-Width="45px" />
                    <asp:BoundField HeaderText="S_Date" DataField="s_date" DataFormatString="{0:dd-MM-yyyy}" ItemStyle-Width="60px" />
                    <asp:BoundField HeaderText="E_Date" DataField="e_date" DataFormatString="{0:dd-MM-yyyy}" ItemStyle-Width="60px" />
                    <asp:BoundField HeaderText="Div" DataField="Div_type" />
                    <asp:TemplateField HeaderText="Remarks1" ItemStyle-Width="125px" ItemStyle-Height="25px">
                        <ItemTemplate>
                                <asp:TextBox runat="server" ID="lblreason" Text='<%# Bind("Remarks1") %>' Height="20" Width="90" ReadOnly="true" CssClass="cmdtextbox">
                                </asp:TextBox>
                          <div style="margin-top: 0px; float: right;">
                                <asp:Button runat="server" Width="25" Height="25" ID="btuser" CssClass="btreason" text="View" />
                          </div>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField HeaderText="Remarks2" DataField="Remarks2" ItemStyle-Width="62px" />
                    </asp:TemplateField>
                    <asp:BoundField HeaderText="Remarks3" DataField="Remarks3" ItemStyle-Width="60px" />
                </Columns>
                <PagerStyle CssClass="pager"></PagerStyle>
                <RowStyle CssClass="RowStyle" />
            </asp:GridView>
        </div>

    </form>
</body>
</html>

C# code*
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dtmydata = new DataTable();
            if (!Page.IsPostBack)
            {
                dtmydata = Dtthandler.GetEmData(HttpContext.Current.Session["TatID"].ToString());
                //Add new column
                dtmydata.Columns.Add(new DataColumn("User Action", Type.GetType("System.String")));

                foreach (DataRow row in dtmydata.Rows)
                {
                    currentdate =  DateTime.Now;
                    Edate = Convert.ToDateTime(row[2].ToString());
                    strtmpCdate = currentdate.ToShortDateString();
                    strtmpEdate = Edate.ToShortDateString();
                    if (Convert.ToDateTime(strtmpCdate) <= Convert.ToDateTime(strtmpEdate))
                    {
                        row[7] = "Yes";
                    }
                    else
                    {
                        row[7] = "No";
                    }
                    //Bind data to grid
                    grdDisplay.DataSource = dtmydata;
                    grdDisplay.DataBind();
                }

            }

        }

        protected void grdDisplay_RowDataBound(object sender, GridViewRowEventArgs e)
        {
                    LinkButton lnkbtnCancel = new LinkButton();
                    LinkButton lnkbtnModify = new LinkButton();
            try
            {

                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    if (e.Row.Cells[7].Text == "Yes")
                    {
                            lnkbtnCancel.Text = "Cancel";
                            lnkbtnModify.Text = "Modify";

                            e.Row.Cells[7].Controls.Add(lnkbtnCancel);
                            e.Row.Cells[7].Controls.Add(lnkbtnModify);

            //How to populate jquery dialog using this linkbutton?              

                     }

                    else
                    {
                        e.Row.Cells[7].Text = string.Empty;
                    }
                }

            }
            catch (Exception ex)
            {

            }
        }

Answer 1

这是我的代码中的示例 - 请根据您的使用情况进行调整：有如下声明的对话框：

<div id="dialog-form">
... // all of the elements you need in the dialog
</div>

然后在javascript部分：

$("#dialog-form").dialog({
                autoOpen: false,
                height: 580,
                width: 800,
                modal: true,
                buttons: {
                    "Do Something": function () {
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });

最后 - 在用于启动对话框的按钮或元素上：

onclick='$( "#dialog-form" ).dialog( "open" );'

我希望这会有所帮助。

如何使用jquery模式对话框进行编辑和显示记录？

1 个答案: