GridView 和显示面板：C# 和 ASP.NET

Question

I'm new to C# and asp.net and I have a GridView that has enabled selection on it and I put a button that is called View Products. When a user clicks on View Products, I want to show a panel that has more information for the button.

I have tried everything and looked up multiple ways but nothing is helping me find an answer to my problem.

Picture of the GridView

Answer 1

Ok, this is common, but answers are varied, and I tend to not like how most answers work.

I suggest this approach:

On that page, drop in a "div" with the controls and even additional buttons (such as perhaps a delete command, save command, and "cancel" to simple go back to the grid view.

So, first up, our grid view say like this:

        <asp:GridView ID="GridView1" runat="server"
            AutoGenerateColumns="False" DataKeyNames="ID"
            CssClass="table" Width="45%" ShowHeaderWhenEmpty="true">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Description" HeaderText="Description" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Button ID="cmdEdit" runat="server" Text="Edit"
                            CssClass="btn myshadow"
                            OnClick="cmdEdit_Click"/>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

And say right below the above, we can simple drop in some standard text boxes and controls inside of a "div" that we hide/show for the details when clicked on.

So, say like this:

  <div id="EditRecord" runat="server"
      style="float:left;display:none;border:solid 2px;padding:15px">
        <div style="float:left" class="iForm">
                <label>HotelName</label>
                <asp:TextBox ID="txtHotel" runat="server" width="280" f="HotelName"/>  <br />
                <label>First Name</label>
                <asp:TextBox ID="tFN" runat="server"  Width="140" f="FirstName" /> <br />
                <label>Last Name</label>
                <asp:TextBox ID="tLN" runat="server"  Width="140" f="LastName"  /> <br />
                <label>City</label>
                <asp:TextBox ID="tCity" runat="server"  Width="140" f="City"  />
                <br />
                <label>Province</label>
            <asp:TextBox ID="tProvince" runat="server" Width="75" f="Province"   ></asp:TextBox> <br />
        </div>
        <div style="float:left;margin-left:20px" class="iForm">
            <label>Description</label> <br />
            <asp:TextBox ID="txtNotes" runat="server" Width="400" TextMode="MultiLine" 
                Height="150px" f="Description" ></asp:TextBox> <br />
            <asp:CheckBox ID="chkActive" Text=" Active" runat="server" TextAlign="Right" />
            <asp:CheckBox ID="chkBalcony"  Text=" Has Balcony" runat="server" TextAlign="Right" />
        </div>
        <div style="clear:both"></div>

        <button id="cmdSave" runat="server" class="btn myshadow" onserverclick="cmdSave_ServerClick" >
            <span aria-hidden="true" class="glyphicon glyphicon-floppy-saved"> Save</span> 
        </button>

        <button id="cmdCancel" runat="server" class="btn myshadow" 
            style="margin-left:15px" onserverclick="cmdCancel_ServerClick"  >
            <span aria-hidden="true" class="glyphicon glyphicon-arrow-left"> Back/Cancel</span>
        </button>

        <button id="cmdDelete" runat="server" class="btn myshadow" style="margin-left:15px">
            <span aria-hidden="true" class="glyphicon glyphicon-trash"> Delete</span>
        </button>  
      </div>

Again, nothing speical - just controls and text boxes.

So, now our code to load can be this:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid();
    }

    void LoadGrid()
    {
        
        GridView1.DataSource = MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName");
        GridView1.DataBind();
    }

Code for when we click on a button:

Now we can't (like normal) double click on the button to create the event since that button is "nested" in the gv. So, in the markup, just type in for the button

onclick=

When you hit "=" sign, a popup gives you the option to create a plane jane click event for the button. So, choose create event.

Thus the button in the gv becomes this:

                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Button ID="cmdEdit" runat="server" Text="Edit"
                            CssClass="btn myshadow"
                            OnClick="cmdEdit_Click"/>
                    </ItemTemplate>
                </asp:TemplateField>

And now our button click event:

it will get the row, load up the controls in that div, and then display the div.

I have this code:

    protected void cmdEdit_Click(object sender, EventArgs e)
    {
        Button cmdEdit = (Button)sender;
        GridViewRow gRow = (GridViewRow)cmdEdit.NamingContainer;
        int PKID = (int)GridView1.DataKeys[gRow.RowIndex]["ID"];
        DataTable rstData = MyRst($"SELECT * FROM tblHotelsA WHERE ID = {PKID}");

        General.FLoader(EditRecord, rstData.Rows[0]); // load up the controls

        GridView1.Style.Add("display","none");
        EditRecord.Style.Add("display", "normal");

    }

And the results are thus this:

Note that the cancel button is rather simple.

You hide the "div" and re-show (un-hide) the grid.

this:

    protected void cmdCancel_ServerClick(object sender, EventArgs e)
    {
        GridView1.Style.Add("display", "normal");
        EditRecord.Style.Add("display", "none");

    }

And I did use a helper routine (just returns a table).

That was this:

    DataTable MyRst(string strSQL)
    {
        DataTable rstData = new DataTable();
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                cmdSQL.Connection.Open();
                rstData.Load(cmdSQL.ExecuteReader());
            }
        }
        return rstData;
    }

So above is the basic idea, and workings.

And we could now that we have a div?

We could call a jQuery.UI "dialog", and that would in place of the div hide/show, simple call jQuery.UI, and then you get this effect:

I can post the code for how that pop up works, but really, the simple idea is a simple button, get PK row id, load that data into some controls, then hide the grid, show the div, and you off and running.