Using <button> instead of <input> with .Net

Question

I am trying to style a web page which is created by .net. So I am having issues on some buttons and other elements. My main issue is the bottons because in design template some circle buttons etc are used but .Net keeps giving <input> elements :(

Using <asp:Button> creates <input> element but what should I use to get a <button> element? Because I cannot apply the styles to an <input> element.

I have asked the code for the page, I did not code this so I do not know if it is MVC or not. All I need is to get a ... in the rendered HTML. What can I say to my coder friend so that he makes this work?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Portall.Admin.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Login</title>
    <link href="../css/style.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="dvMainContainer">
            <div class="header" >
                <span>Login</span>
            </div>
            <div class="dvLoginInfo">
                <table>
                    <tr>
                        <td>Username</td>
                        <td>
                            <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td>
                            <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><asp:Button ID="cmdLogin" runat="server" Text="Login" OnClick="cmdLogin_Click" /></td>
                    </tr>
                    <tr>
                        <td colspan="2"><asp:Label ID="lblInfo" runat="server" ForeColor="Red"></asp:Label></td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
</body>
</html>

Code behind file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Portall.Admin
{
    public partial class Login : System.Web.UI.Page
    {
        AdminBL.AdminBusinessLayer adminBsLayer = new AdminBL.AdminBusinessLayer();

        protected void Page_Load(object sender, EventArgs e)
        {
            lblInfo.Text = string.Empty;
        }

        protected void cmdLogin_Click(object sender, EventArgs e)
        {
            AdminUser currentUser = null;

            try
            {
                currentUser = adminBsLayer.Login(txtUserName.Text, txtPassword.Text);
            }
            catch
            {
                lblInfo.Text = "A database problem occured.";
                return;
            }

            if (currentUser.UserId <= 0)
            {
                lblInfo.Text = "Invalid username or password.";
                return;
            }

            Session["AdminUser"] = currentUser;
            Response.Redirect("UserEntry.aspx");
        }

    }
}

I suggest trying to improve/clarify your question. I think it's improbable that the current form will get you a helpful answer. — Cristian Lupascu
– Cristian Lupascu, Commented Jul 23, 2013 at 14:15
Could you please clarify what you want to happen vs what is currently happening? — user1477388
– user1477388, Commented Jul 23, 2013 at 14:17
Did you try to... replace <asp:Button> with plain HTML <button>? You'll bypass default ASP.NET renderer for buttons but everything else will still work (just remember to update events, for example OnClick is onserverclick). — Adriano Repetti
– Adriano Repetti, Commented Jul 23, 2013 at 15:20
It should be, what he will not get is data binding and the same behavior for postback but here it shouldn't be an issue... <button id="cmdLogin" runat="server" onserverclick="cmdLogin_Click">Login</button>. ASP.NET should wrap that for you in a server object (I'm not sure if it'll use asp:Button or a simple asp:Literal...) — Adriano Repetti
– Adriano Repetti, Commented Jul 23, 2013 at 18:06
@Adriano he told he did compile it. Then I hit another thing in .Net called asp:ImageButton :) I asked him to change it to image button and voila! I could use styling properly on the button now:D Thank you for your directions — cevizmx
– cevizmx, Commented Jul 24, 2013 at 6:40

2 revs · Accepted Answer · 2014-02-03 15:31:27Z

3

Download CSSFriendyControlAdapters and use it to create a button server control. You can find it here:

http://cssfriendly.codeplex.com/

Just take a look at the simplest control and it should be easy enough to modify it to emit a button. You don't have to change your existing controls, it will use you adapter instead.

If you don't care about having too much control and rendering options, you can simply use the built-in HTMLButton control:

<tr>
  <td>
    <button ID="cmdLogin" runat="server" OnServerClick="cmdLogin_Click">
         Login
    </button>
  </td>
</tr>

edited Feb 3, 2014 at 15:31

community wiki

2 revs
user148298

Sign up to request clarification or add additional context in comments.

Comments

cevizmx · Accepted Answer · 2013-07-24 06:45:09Z

1

Using <asp:ImageButton /> lets me to add any styling I need, i.e. background image, gradients etc. For more information on using reffer to Microsoft site

answered Jul 24, 2013 at 6:45

cevizmx

3891 gold badge9 silver badges24 bronze badges

Collectives™ on Stack Overflow

Using <button> instead of <input> with .Net

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related