web-dev-qa-db-ja.com

ポップアップbootstrap RowCommandイベントを使用したGridView編集クリックのモーダル

Bootstrapモデルポップアップ：

<asp:UpdatePanel ID="upModal" runat="server">
<ContentTemplate>

<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">ADD NEW BANQUET</h4>
            </div>
            <div class="modal-body" style="padding-left: 0px;padding-right:0px">
              <div class="col-lg-12" style="padding-left: 0px;padding-right:0px">
                  <div class="form-group col-lg-6">
                    <label>Banquet ID:</label>
                    <u><asp:Label ID="lblID" CssClass="form-control" Text="AUTO ID" runat="server"></asp:Label></u>
                  </div>
                  <div class="form-group col-lg-6">
                    <label>Banquet Name:</label>
                    <asp:TextBox ID="txtName" CssClass="form-control" runat="server"></asp:TextBox>
                  </div>
              </div>

            <div class="modal-footer" style="padding-left: 0px;padding-right:0px">
              <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" 
                  CssClass="btn btn-success btn-lg btn-block" Text="SAVE" UseSubmitBehavior="false"
                  data-dismiss="modal" />
                </div>
            </div>
          </div>
    </div>
</div>
<!-- /.modal -->

</ContentTemplate>
</asp:UpdatePanel>
<!-- /.upModel -->

そしてGridViewは：

<div class="col-lg-12 table-responsive">
    <asp:GridView ID="gvBanquet" CssClass="table table-striped table-bordered table-hover" runat="server" 
        AutoGenerateColumns="false" OnRowCommand="gvBanquet_RowCommand" AllowPaging="True" PageSize="5" 
        EmptyDataText="No record found!" OnPageIndexChanging="gvBanquet_PageIndexChanging" ShowHeaderWhenEmpty="true">
        <Columns>
            <asp:TemplateField HeaderText="Banquet Name">
                <ItemTemplate>
                    <asp:Label ID="lblID" runat="server" Visible="false" Text='<% #Eval("bqtID") %>'></asp:Label>
                    <asp:Label ID="lblName" runat="server" Text='<% #Eval("bqtName") %>' ></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField>
                <HeaderTemplate>
                    <center>Events</center>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Button ID="btnEdiit" runat="server" CssClass="btn btn-danger btn-sm" CommandName="EditRow" Text="Edit" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <HeaderStyle BackColor="#5cb85c" BorderColor="#4CAE4C" ForeColor="White"></HeaderStyle>
        <PagerStyle Font-Size="Larger" ForeColor="Black" HorizontalAlign="Center" />
    </asp:GridView>
</div>
<!-- /.col-lg-12 -->

これがRowCommandイベントです。

protected void gvBanquet_RowCommand(object sender, GridViewCommandEventArgs e)
{
    GridViewRow row = (GridViewRow)(((Control)e.CommandSource).NamingContainer);
    int index = row.RowIndex;

    string id = GetTextFromGridViewLabel(gvBanquet,index,"lblID");
    string name = GetTextFromGridViewLabel(gvBanquet, index, "lblName");

    switch (e.CommandName)
    {
        case "EditRow":
            lblID.Text = id;
            txtName.Text = name;
            break;
        default:
            break;
    }
}

私の問題は、GridViewの[編集]ボタンをクリックすると、Bootstrapモデルが、GridView行のidおよびnameでポップアップ表示されないことです。

javascriptc#jqueryasp.netgridview
11
5377037

これが解決策であり、次の手順に従います。

  • 別のUpdatePanelにもGridViewを追加します。

  • 次のように、最初のUpdatePanel RowCommandでGridView upModelイベントをトリガーします。

    <ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="gvBanquet"  EventName="RowCommand" />  
</Triggers>

  • そして最後に、RowCommandイベントのStringBuilderコードの下を実行します。

    case "EditRow":
    lblID.Text = id;
    txtName.Text = name;

    System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append(@"<script type='text/javascript'>");
    sb.Append("$('#myModal').modal('show');");
    sb.Append(@"</script>");
    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MyModal", 
    sb.ToString(), false);

    break;

編集クリック時にポップアップが表示されます：

enter image description here

4
5377037

GridView自体から値を取得して、PostBackを保存しようとします。これは、モーダルで必要なすべてまたはほとんどすべての値がGridViewに存在する場合にのみ機能します。そうでない場合は、実際にポストバックを使用します。

以下のスニペットでは、モーダルはGridView trにバインドされており、クリックすると開きます。次に、スクリプトはすべてのセルをループし、その値をモーダルTextBoxに配置します。デモのために、GridView行に属性を追加しました。これにより、GridViewでは表示したくないがモーダルでは必要な値を送信できます。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <%# Eval("Column 1") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <%# Eval("Column 2") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <%# Eval("Column 3") %>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<div id="myModal" style="display: none">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />
    <br />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <br />
    <br />
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <br />
    <br />
    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</div>

<script type="text/javascript">
    $("#<%= GridView1.ClientID %> tr").click(function () {
        $(this).find("td").each(function (index, element) {
            if (index == 0) {
                $("#<%= TextBox1.ClientID %>").val(element.innerHTML);
            } else if (index == 1) {
                $("#<%= TextBox2.ClientID %>").val(element.innerHTML);
            } else if (index == 2) {
                $("#<%= TextBox3.ClientID %>").val(element.innerHTML);
            }                
        });

        $("#<%= TextBox4.ClientID %>").val($(this).attr("extravalue"));

        $('#myModal').dialog();
    });
</script>

また、RowDataBoundイベントのコードビハインドメソッドは、行に追加の属性を追加します。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    //check if the row is a datarow
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //cast the dataitem back to a row
        DataRowView row = e.Row.DataItem as DataRowView;

        e.Row.Attributes.Add("extravalue", row["Column 4"].ToString());
    }
}
3
VDWWD