Popup bootstrap model on GridView edit click using RowCommand event

Question

I have a Bootstrap Model popup:

Answer 1

Here can be a solution and follow bellow steps:

• Add GridView also in another UpdatePanel.

• Trigger GridView RowCommand event in first UpdatePanel upModel as like:

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

• And finally run below StringBuilder code in RowCommand event:

  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;
  

It will display popup on edit click as:

Answer 2

I would try to save a PostBack by getting the values from the GridView itself. This only works if all or almost all values that are needed in the Modal are present in the GridView. If not you would indeed use a PostBack.

In the below snippet the modal is bound to the GridView tr and will open when clicked. Then the script will loop all cells and put their value in the modal TextBoxes. For demo purposes i've added an Attribute to the GridView row so you can send values that you do not want to show in the GridView but are required in the modal.

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

And the code behind method for the RowDataBound event to add the extra attribute to the row.

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());
    }
}