Using Inner HTML with an ASP:Button? - asp.net

How can I convert
<button type="submit" class="blue">
<span>Login</span>
</button>
Into an asp button?
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="blue"><span>Login</span></asp:LinkButton>
I just simply cannot find a way to do it. Sorry its a crappy question, but it's throwing me for a loop, might just need to sleep on it.

I agree with Davide that CSS is the best solution but if you have some styling requirement which requires multiple tags then LinkButton is your best bet. You can apply all the styles you would to have put on 'button' tag on to the 'a' tag.
<asp:LinkButton ID="submit" runat="server" OnClick="Submit_Click" CssClass="block-button">
<span runat="server" ID="submitText" ClientIDMode="Static" class="block-button-text">Submit</span><span class="block-button-arrow"> </span>
</asp:LinkButton>
If you really must have a button tag then the only way is to create a custom control that implements all the functionality of asp:button
See here for a solution by prabhakarbn http://forums.asp.net/t/1496938.aspx/1

If you really need rich formatting either you use a css class and define all styling in the css side or you can use an html anchor
I am not aware of another way to compose the inner html of a button or linkbutton like you are trying to do.

Related

Adding style for asp.net drop-down list control using bootstrap v3

I was trying to add style for asp.net drop-down list control using bootstrap 3. But it is not applying. Earlier it worked with bootstrap 2.3.2 without any changes.
Can anybody suggest me a way to do this. Many thanks.
I would say this would be enough:
<asp:DropDownList runat="server" CssClass="form-control" ID="something" />
Take a look at bootstrap docs and scroll down to the Selects section.
You can use this and change btn whatever you want:
<asp:DropDownList Width="100%" CssClass="btn btn-default btn-sm" ID="DPCID" runat="server"/>

How to have html in Text attribute of asp Button

I'm trying to include an <i> for the Text attribute for an asp button but it's just rendering the html as text...
<asp:Button runat="server" ID="modify" ToolTip="Modify" CssClass="btn btn-mini" OnClick="modify_Onclick" Text='<i class="icon-edit"></i>' />
I've got to be over thinking this...
EDIT:
I'm using the twitter bootstrap framework. That's why the <i> tag. Here's an example: http://twitter.github.com/bootstrap/base-css.html#icons
You can use <asp:LinkButton. Bootstrap renders anchor tags (asp:LinkButton) like input type submit buttons (asp:Button).
<asp:LinkButton runat="server" ID="modify" ToolTip="Modify" CssClass="btn btn-mini" OnClick="modify_Onclick" Text='<i class="icon-edit"></i>' />
What I ended up doing was going with an html button, runat=server and putting the <i> inside of that.
<button runat="server" id="modify" class="btn btn-mini" title="Modify" onserverclick="modify_Onclick">
<i class="icon-edit"></i>
</button>
You can exploit the <label> tag's for attribute.
Basically any click on <label> will also fire the click event of a html element with an id same as <label>'s for attribute
For example:
<label for="modify"><i class="icon-edit"></i></label>
<asp:Button style="display:none;" runat="server" ID="modify" ToolTip="Modify" CssClass="btn btn-mini" OnClick="modify_Onclick" Text='' />
clicking the <label> element here(which clicks the <i> element too), will fire the <asp:button>'s click event.
You would do it like this
<button runat="server" id="btnRun" onserverclick="functionName" class="btn btn-mini" title="Search">
<i class="icon-camera-retro"></i> Search
</button>
Take a look at this example (however if you are using sitefinity CMS this won't work)
Font awesome inside asp button
If you change your button to an:
<asp:LinkButton />
it works perfectly fine within the text attribute. I don't believe there will be any loss in functionality.
If it renders as a <input type="submit"> you cannot display HTML as the label. It will render as a literal string.
See this example: http://jsfiddle.net/vkNuX/
You could probably do something where you render an html link that has the "i" tag inside of it (if you look at the source of the link you provided, that's what they do) and then make it postback on click using the ClientScriptManager.GetPostBackEventReference() to get a reference to the postback script.
http://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.getpostbackeventreference.aspx
So for example:
<a class="btn btn-mini" href="javascript:<% ClientScriptManager.GetPostBackEventReference()%>"><i class="icon-refresh"></i> Refresh</a>
This is just out of my head, so you might need to tweak it a bit. You could then just roll this into your own custom asp.net control.
I've tried to render html inside a button on the client side, I didn't want it to be using runat="server" so what I did was using javascript:
document.getElementById('button_<%= this.id %>').innerHtml = '<i class="fa fa-edit"></i>';

Is there a way to create a message box without JS?

Is there a way to create a message box with Yes / No buttons in a webform without the use of Javascript or System.Windows.Forms.MessageBox ?
Yes of course - just create an appropriately styled panel with a couple of buttons; obviously you'll have to contend with postbacks so it won't be nearly as performant but definitely do-able. Something like:
<asp:Panel runat="server" ID="myDialogBox">
<p>Are you sure you want to continue?</p>
<div>
<asp:Button runat="server" ID="btnYes" Text="Yes" OnClick="btnYes_Click" />
<asp:Button runat="server" ID="btnNo" Text="Yes" OnClick="btnNo_Click" />
</div>
</asp:Panel>
with the event handlers left for you to implement

How to create a link that contains an image & text?

I need to create a link for an ASP.NET page that has an image & text, which when clicked will trigger an event on the webserver.
This is what the link should look like:
This is the HTML for what the link would look like if I wasn't working with ASP.NET:
<a id='PdfLink' href='#'>
<img src="App_Themes/.../Images/PDF.gif" alt="Click for fact sheet PDF"/>
<span>Latest Performance</span>
</a>
The problem with this is that I want to be able to click this and trigger an server-side event, but I don't know if I can do that with plain old HTML controls.
With ASP.NET I can see that there are various controls such as ImageButton & HyperLink but I don't see how I can have a Hyperlink & an ImageButton as part of the same clickable control.
What's the best way for me to get a link similar to the image that is bound to server-side functionality?
I wouldn't do this by using a mixture of controls.
I would use a <asp:LinkButton> control
<asp:LinkButton id="LinkButton1" runat="server" OnClick="ButtonClick_Event" CssClass="latest-performance">Latest Performance</asp:LinkButton>
Then I would use the CssClass "latest-performance" to style up the link.
e.g.
.latest-performance{
display: block;
padding-left: 20px;
background: url(url-to-the-pdf-icon) no-repeat left center;
}
You will have to tweek the style to fit with what you need, but this will basically look exactly the same as what you need. It also keeps your code clean, and separates out the style.
You can do like..
<asp:LinkButton ID="LinkButton1" runat="server"
Text="<img src='App_Themes/.../Images/PDF.gif' /> PdfLink"></asp:LinkButton>
To do what you want to do in ASP .NET you'd need to do something like this:
<asp:LinkButton ID="LinkButton1" runat="Server" OnClick="ButtonClick_Event">Text</asp:LinkButton>
<asp:ImageButton ID="ImageButton1" runat="Server" ImageUrl="image.gif" OnClick="ButtonClick_Event"></asp:ImageButton>
You could then write a custom server or user control to encapsulate those controls so they only expose the properties you wish to set once, such as the event when clicked.
<a href="../default.aspx" target="_blank">
<img src="../images/1.png" border="0" alt="Submission Form" />
<br />
<asp:Literal ID="literalID" runat="server">Some text</asp:Literal></a>
The benefit of this is that asp:Literal is lightweight. You can also programmatically change the text inside the asp:Literal, by using literalID.Text in the code behind, if you need to. I like this because you only need to use a single control inside of a simple tag. You can give it whichever href, target, and img you want. Hope this helps.
You can do like this, this answer is correct.
<asp:HyperLink ID="hyperlink1" runat="server" NavigateUrl="Default.aspx" Target="_parent"><img src="Images/1.jpg"/>click</asp:HyperLink>

How to Display image on Linkbutton to look attractive in asp.net

Hi i want to display an image on a Linkbutton to make it looks attractive in asp.net
any one have idea how to do it...
<asp:LinkButton runat="server" ...>
<img src="yourimageurl" />
</asp:LinkButton>
Why not use ImageButton?

Resources