Make HyperLinkField Look Like a Button

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

Answer 1

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

Answer 2

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