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>';
Related
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"/>
I have an aspx form which contains couple of textboxes, dropdownlists and checkboxes on it. I have not set the default focus on any of the control. When I open this in IE it works fine. but when the page opens in chrome it set focus on a textbox which is not the first element of the DOM. and when the page opens in FireFox, it set focus on first textbox in the DOM.
I don't want focus on any of the control, how can I fix this issue.
Can you try document.getElementById('yourElement').blur();?
You could add autofocus = false;
<input type="text" name="second" id="second" "autofocus = false" />
Take look at these links:
http://msdn.microsoft.com/en-us/library/ms178231(v=vs.100).aspx
or
http://msdn.microsoft.com/en-us/library/ms178232(v=vs.100).aspx
Maybe it can help you.
Try setting default focus on from in aspx like this:
<form id="form1" runat="server" defaultfocus="TextBox1" >
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
<br />
</div>
</form>
Post your code for more informations.
re: I think that you must have focus on at least one control on page. You can set dummy control like input and set it's opacity in css to 0 and set defaultfocus on it.
I'm still getting my head around asp.net.
I followed some online examples of using multiviews and got them working just fine when I use something like a Menu class as the trigger to select the active view. Having the onClick event makes it pretty easy.
But I can't figure out how to change the emmited code from the Menu control.
I have the following multiview control...
<asp:View ID="0" runat="server">
<p>view page 1</p>
</asp:View>
<asp:View ID="1" runat="server">
<p>view page 2</p>
</asp:View>
And I need to have the following structure used to trigger the views.
(Note: this needs to be what gets emitted to the browser. Not necessarily the literal code in the aspx page)
<a class="button large-plain" href="" >
<span>
See page 1
</span>
</a>
<a class="button large-plain" href="" >
<span>
See page 2
</span>
</a>
For clarification: we have a style sheet provided by an exteranl designer that works with the above markup. If I could just make the triggers asp button controls, or a menu control, it would be easy. But the style sheet doesn't work then, and I'm told the world will end if the style sheet doesn't work.
Can I customise a Menu control so that it outputs this kind of structure? (And if so, how?)
I could just hard code the links that trigger the views (the structure is not going to change). But if I hardcode it, how do I call the onClick event what the links are clicked?
I think you might be able to try the following to change the tags into server-side controls and then use that as the trigger. Adding ID and runat="server" to any html element means that you can then access them programmatically as you would any other .NET style control. Additionally if you're using .NET 4.0 you can also add the ClientIdMode="Static" attribute so that the ID's are as you typed and not modified by ASP.NET.
To solve the Click problem you can add the OnServerClick="" attribute to specify which method to call on the server when the link is clicked.
<a class="button large-plain" href="" ID="ViewPage1" runat="server" OnServerClick="ViewPage1_Click">
<span>
See page 1
</span>
</a>
<a class="button large-plain" href="" ID="ViewPage2" runat="server" OnServerClick="ViewPage2_Click">
<span>
See page 2
</span>
</a>
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.
does anyone know how to use jquery modal dialog in asp.net pages?
http://jqueryui.com/demos/dialog/
I've tried creating a simple aspx page, pasted code from the example (http://jqueryui.com/demos/dialog/), it almost works. The dialog briefly shows up and then disappears. It seems that the page is doing a postback. I'm not sure how to stop it, so that the modal dialog stays up.
I've been using jqModal for modal dialogs. I've set it up to use a standard HTML input button to trigger the dialog, and then you can put a regular asp.net button or other controls inside of the hidden div.
Hope this helps.
I assume you have something like:
<asp:Button ID="popupButton" OnClientClick="showModalPopup();" Text="Click me" runat="server" />
I would try adding "return false;" to the OnClientClick property of your Button:
<asp:Button ID="popupButton" OnClientClick="showModalPopup(); return false;" Text="Click me" runat="server" />
Or if you don't need to access the button in code-behind, simply use a standard HTML button and set it's onclick event attribute:
<button onclick="showModalPopup();">Click me</button>