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

Question

我是 C# 和 asp.net 的新手，我有一個 GridView 啟用了選擇功能，我放置了一個名為“查看產品”的按鈕。 當用戶單擊“查看產品”時，我想顯示一個面板，其中包含有關該按鈕的更多信息。

我已經嘗試了所有方法並查找了多種方法，但沒有任何方法可以幫助我找到問題的答案。

圖片GridView

Answer 1

好的，這很常見，但答案多種多樣，而且我傾向於不喜歡大多數答案的工作方式。

我建議這種方法：

在該頁面上，放入帶有控件甚至附加按鈕（例如刪除命令、保存命令和“取消”到簡單的 go 回到網格視圖）的“div”。

所以，首先，我們的網格視圖是這樣的：

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

在上面的正下方說，我們可以簡單地將一些標准文本框和控件放入我們在單擊時隱藏/顯示詳細信息的“div”內。

所以，像這樣說：

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

同樣，沒有什么特別的——只有控件和文本框。

所以，現在我們要加載的代碼可以是這樣的：

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

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

當我們點擊按鈕時的代碼：

現在我們不能（像往常一樣）雙擊按鈕來創建事件，因為該按鈕“嵌套”在 gv 中。 所以，在標記中，只需輸入按鈕

點擊=

當您點擊“=”符號時，彈出窗口會為您提供為按鈕創建 plane jane 單擊事件的選項。 因此，選擇創建事件。

因此 gv 中的按鈕變成了這樣：

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

現在我們的按鈕點擊事件：

它將獲取該行，加載該 div 中的控件，然后顯示該 div。

我有這段代碼：

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

    }

結果是這樣的：

請注意，取消按鈕非常簡單。

您隱藏“div”並重新顯示（取消隱藏）網格。

這個：

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

    }

我確實使用了一個幫助程序（只返回一個表）。

那是這樣的：

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

以上是基本思想和工作原理。

現在我們可以有一個 div 了嗎？

我們可以將 jQuery.UI 稱為“對話框”，這將代替 div 隱藏/顯示，只需調用 jQuery.UI，然后您將獲得以下效果：

我可以發布彈出窗口如何工作的代碼，但實際上，簡單的想法是一個簡單的按鈕，獲取 PK 行 ID，將該數據加載到一些控件中，然后隱藏網格，顯示 div，然后你就可以運行了。