locked
Make HyperLinkField Look Like a Button RRS feed

  • Question

  • User-1391672913 posted

    Hi,

    I have a HyperLinkField in my gridview that displays the information of the selected row in another page when clicked.

    Is there anyway that I could make it look like a button? or are there other solutions to display data of the selected row?

    This is my HyperLinkField in my Main.aspx:

    <asp:HyperLinkField Text="View Information" 
                        DataNavigateUrlFields="StockKeepingUnit,UniversalProductCode,VendorName,ProductName,ProductDesc,RetailPrice"
                        DataNavigateUrlFormatString="ShowInformation.aspx?StockKeepingUnit={0}&UniversalProductCode={1}&VendorName={2}&ProductName={3}&ProductDesc={4}&RetailPrice={5}" />

    this is my ShowInformation.aspx:

    <div class="information-form">
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
                <asp:Label ID="Label2" runat="server" Text=""></asp:Label><br />
                <asp:Label ID="Label3" runat="server" Text=""></asp:Label><br />
                <asp:Label ID="Label4" runat="server" Text=""></asp:Label><br />
                <asp:Label ID="Label5" runat="server" Text=""></asp:Label><br />
                <asp:Label ID="Label6" runat="server" Text=""></asp:Label><br />
                <br />
                <a href="Main.aspx" runat="server">Go Back to page</a>

    and lastly, this is my ShowInformation.aspx.cs:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (Session["Username"] != null)
                {
                    Label1.Text = "Stock Keeping Unit: " + Request.QueryString["StockKeepingUnit"];
                    Label2.Text = "Universal Product Code: " + Request.QueryString["UniversalProductCode"];
                    Label3.Text = "Vendor Name: " + Request.QueryString["VendorName"];
                    Label4.Text = "Product Name: " + Request.QueryString["ProductName"];
                    Label5.Text = "Product Description: " + Request.QueryString["ProductDesc"];
                    Label6.Text = "Retail Price: " + Request.QueryString["RetailPrice"];
                }
                else
                {
                    Response.Redirect("LoginPage.aspx");
                }
    
            }

    Any help will be appreciated. Thank you.

    Sincerely,

    NoobNoob

    Monday, February 17, 2020 7:19 AM

Answers

  • User1535942433 posted

    Hi NoobNoob,

    Accroding to your description and codes,there are two solution:

    Solution 1.make the HyperLinkField look like a buton using css:

    More details,you could refer to below codes:

    <style>
            .test {
                color: #000080;
                font-family: Arial;
                font-size: 12px;
                font-weight: normal;
                background-color: #fed;
                border-top-color: #696;
                border-left-color: #696;
                border-right-color: #363;
                border-bottom-color: #363;
                filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');
                color: Navy;
                background-color: #D2D2D2;
                border-color: #404040;
                border-width: 1px;
                border-style: Solid;
                padding: 0px 3px 0px 3px;
            }
        </style>
    
    
    <div>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1">
                    <Columns>
                        <asp:BoundField DataField="id" HeaderText="id" ReadOnly="True" SortExpression="id" />
                        <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
                        <asp:HyperLinkField Text="View Information" DataNavigateUrlFields="id,name" DataNavigateUrlFormatString="ShowInformation.aspx?id={0}&name={1}" ControlStyle-CssClass="test" />
                    </Columns>
    
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:aspnet-TestApplicationWithDatabase-20190820030542 %>" SelectCommand="SELECT * FROM [category]"></asp:SqlDataSource>
            </div>

    Result:

    Solution 2: Add button in TemplateField and url to the ShowInformation.aspx in the click event.

    More details, you could refer to below codes:

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1">
                    <Columns>
                        <asp:BoundField DataField="id" HeaderText="id" ReadOnly="True" SortExpression="id" />
                        <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
                        <asp:TemplateField>
                            <ItemTemplate>
                            <input type="button" onclick="location.href='ShowInformation.aspx?id=<%#Eval("id")%>'" value="Preview Ad" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
    
                </asp:GridView>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 17, 2020 9:53 AM

All replies

  • User1535942433 posted

    Hi NoobNoob,

    Accroding to your description and codes,there are two solution:

    Solution 1.make the HyperLinkField look like a buton using css:

    More details,you could refer to below codes:

    <style>
            .test {
                color: #000080;
                font-family: Arial;
                font-size: 12px;
                font-weight: normal;
                background-color: #fed;
                border-top-color: #696;
                border-left-color: #696;
                border-right-color: #363;
                border-bottom-color: #363;
                filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');
                color: Navy;
                background-color: #D2D2D2;
                border-color: #404040;
                border-width: 1px;
                border-style: Solid;
                padding: 0px 3px 0px 3px;
            }
        </style>
    
    
    <div>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1">
                    <Columns>
                        <asp:BoundField DataField="id" HeaderText="id" ReadOnly="True" SortExpression="id" />
                        <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
                        <asp:HyperLinkField Text="View Information" DataNavigateUrlFields="id,name" DataNavigateUrlFormatString="ShowInformation.aspx?id={0}&name={1}" ControlStyle-CssClass="test" />
                    </Columns>
    
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:aspnet-TestApplicationWithDatabase-20190820030542 %>" SelectCommand="SELECT * FROM [category]"></asp:SqlDataSource>
            </div>

    Result:

    Solution 2: Add button in TemplateField and url to the ShowInformation.aspx in the click event.

    More details, you could refer to below codes:

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1">
                    <Columns>
                        <asp:BoundField DataField="id" HeaderText="id" ReadOnly="True" SortExpression="id" />
                        <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
                        <asp:TemplateField>
                            <ItemTemplate>
                            <input type="button" onclick="location.href='ShowInformation.aspx?id=<%#Eval("id")%>'" value="Preview Ad" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
    
                </asp:GridView>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 17, 2020 9:53 AM
  • User-1391672913 posted

    Hi yij sun,

    Thank you for your advise. I did solution 2 and it worked like a magic. Thank you.

    Sincerely,

    NoobNoob

    Tuesday, February 18, 2020 2:26 AM