1

1)グリッドからビューボタンをクリックすると、その特定のLIDのjqueryダイアログを表示する必要がありますが、機能していません.(ダイアログでは、REMARKS1列のテキストのみを表示する必要があります)

2)特定の行を編集するために、C#コードを介してリンクボタン(キャンセル/編集)を含めました。編集/キャンセルにjqueryダイアログを使用するにはどうすればよいですか。

私の aspx Web ページと C# コードを貼り付けました。このコードを変更できれば素晴らしいと思います。そうでない場合は、新しいコードを提供してください。添付の画像を見つけてください。グリッドとダイアログ ボックスが表示されます。

ここに画像の説明を入力

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)
            {

            }
        }
4

1 に答える 1

0

これは私のコードの例です - あなたの用途に合わせて調整してください: ダイアログを次のように宣言してください:

<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" );'

これが役立つことを願っています。

于 2013-02-17T12:39:28.910 に答える