I'm building a simple web project using asp.net 4.5 , c# and Bootstrap
My frontend is simply a Master page/default page with some static content (navbar, sidebar, footer etc) while the Page title and content are retrieved from an mdb database.
I tried to make a couple of pages and everything seemed to work fine, but i just realized that the style applied on an ASP.NET web control is not rendered.
Note that i'm still putting the content in the db by hand as the editor is not yet done.
Examples:
<i>prova tag <i></i> This works (default styling)
<asp:button CssClass="btn btn-large">Test Button</asp:button> (This does not work (simple, unstyled text is shown)
<asp:label>Prova Roba strana</asp:label> (This works (because it uses the default styling)
<input type=password/> (This works)
<code><section></code> (This works)
Thanks in advance!
Here is two examples of doing buttons with a bootstrap theme.
<button type="button" class="btn btn-large">Test</button>
<asp:Button runat="server" Text="Test Button" CssClass="btn btn-large" />
I would guess you're mixing the two together and the hybrid isn't valid, which is why it's not working.
use instead
<asp:button class="btn btn-large">Test Button</asp:button>
Related
I've got a styling question on my hands. Using sensenet, a platform for ASP.net functionality, forms are done with not only sensenet language, but also ASP.net language as well.
I'm having a problem making the ASP:TextBox feature look like the bootstrap input box. I've called the bootstrap css file, tried changing the class for the ASP:TextBox code, but nothing works aside from just using the html tag of
<input class="text input-sm">
Here's the code I have so far:
<asp:TextBox CssClass="text input-sm" ID="InnerControl" placeholder="Middle Name" runat="server"></asp:TextBox>
.. and the css is being incoporated here:
<sn:CssRequest CSSPath="$skin/styles/Projectname/bootstrap.min.css" ID="pageTemplateUIStyleReq1" runat="server" />
Is there anyway to make the ASP:TextBox to look like the bootstrap input box but also function the way it's meant to function through ASP language?
Attached are images of the before and after-sought effects:
what I have now:
what I'm looking to attain:
The way you are adding the class to your textbox is correct. The problem is here:
<sn:CssRequest CSSPath="$skin/styles/Projectname/bootstrap.min.css" ID="pageTemplateUIStyleReq1" runat="server" />
Just add a normal reference to your stylesheet and don't try to load it server side. If your page requires this, check to ensure it is loading bootstrap correctly in your browsers dev tools.
Since a Button can have a background image and also text, what's the point of an ImageButton?
(I'm thinking of changing ImageButtons to simple Buttons, and want to know if there's any disadvantage to that.)
Simply put:
Button renders as <input type="submit" />
ImageButton renders as <input type="image" />
The difference between the two, in terms of accessibility, are mentioned here:
http://www.10sharpdesign.com/accessibility/forms/6-button-submit.html
I've found one - With ImageButton I can refer to a url as ~/ myImage.jpg. I can't do that with a regular Button.
This is important when using a master page - because the relative path to a url can be different for different pages if they're in different directories.
I'm using asp forms and wanted to know if it's possible to replace the standard buttons with HTML elements that are styled using CSS.
My login page uses a standard button
<asp:Button ID="LoginButton" runat="server" Text="Login"
onclick="LoginButton_Click" />
linked to code behind (C#) which performs the login check.
I've seen some nice buttons implemented using the HTML <button> element and styled with CSS which can have features such as images and roll over highlighting. The basic HTML looks like this
<button type="submit" class="positive" onclick ="...">
<img src="/icons/tick.png" alt=""/>
Login
</button>
I've seen another question discussing the Difference between asp:button and html's button so I understand the <button> element is not a drop-in replacement but I'd like to know if the asp:button can be replaced and still call the LoginButton_Click C# code behind?
EDIT:
Although I'm using ASP I don't mind using some client side javascript if necessary.
The buttons I saw which got me thinking about this were found here: Rediscovering the Button Element
EDIT 2:
I tried the answer from XIII using the LinkButton asp control and that worked, rendering the button as I wanted and activating the C# when clicked
<asp:LinkButton ID="LoginBtn" CssClass="button positive"
OnClick="LoginButton_Click" runat="server">
<img src="/icons/tick.png" alt=""/>
Login
</asp:LinkButton>
Javascript is inserted in to the page (as mentioned by Curt) which was not a problem for me but may be for other people; but since the asp:loginview and other controls associated with forms authentication already need javascript I'm not sure this is a problem with the solution.
I decided to accept jwiscarson's answer as this is a cleaner implementation and, despite what I thought, <button> can be a drop-in replacement for <asp:button>
The answer to your question:
if the asp:button can be replaced and still call the LoginButton_Click C# code behind?
is yes. If you have a button like:
<button type="submit" id="submit" class="positive" runat="server">Submit</button>
The attribute you need to set is not onclick, but onserverclick. You could also do something like:
protected override OnInit(EventArgs e)
{
submit.ServerClick += new EventHandler(submit_ServerClick);
}
If you need to do styling on that button, I think the best way to tackle that is via CSS classes like you have in your example.
An alternative approach would be to make use the LinkButton control and style that completely with CSS. We used to do so for a certain project in the past. Worked out pretty great for our customer.
The property of interest if CssClass
You may set CSS class via cssClass property of <asp:Button/>. However you may set runat="server" and onserverclick="LoginButton_Click" attribute to <button/>.
You could use HTML button if you desire, and learn how to call the __doPostBack() method with the proper arguments. Asp.Net buttons and HTML buttons are pretty much the same when it comes to the way they are rendered in the client.
As had been posted here already you could style the HTML rendered by your asp:button or use another asp control. Your asp:button will be rendered as a <input type="submit"> with possibly more limited CSS options than a <button> tag.
From some googling I think it is possible to get a <button> tag rendered but it looks like a non trivial excercise see How can I use the button tag with ASP.NET?
I am using ASP.NET controls to fill in HTML for my jQTouch application, but I am having trouble with my hrefs ceasing to function as intended on my search page. The jQuery function for my anchor class evidently does not get called; it simply links back to the default page, even though the link is built similarly on other pages without any problems.
This is where my links are breaking:
<form id ="form1" runat="server" class="form">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="up1">
<ContentTemplate>
<ul class="rounded">
<li><asp:TextBox ID="txtSearchString" runat="server" name="search-articles" placeholder="Search GROK"></asp:TextBox></li>
<li><asp:Button ID="btnSearch" runat="server" Text="Search" type="rounded" OnClick="btnSearch_Click"></asp:Button></li>
</ul>
<asp:Literal ID="litSearchResults" runat="server"></asp:Literal> <%--HTML for jQTouch inserted here--%>
</ContentTemplate>
</asp:UpdatePanel>
</form>
This is an example of the HTML generated by code behind.
<ul class="edgetoedge"><li class="sep">Found 101 articles</li><li>PAWS: How to Access the Sample Test Database</li><li>Mac OS X: Hardware Test</li><li>The JavaScript Test</li><li>PAWS: Emergency Text Message Test</li><li>Definition: remote digital loopback test</li><li>Definition: power-on self test</li><li>Definition: power-on self test</li><li>AVG 9.0 Free Edition: Setting Scan Process Priority</li><li>Microsoft Office 2007: Diagnostics</li><li>Moodle: Description of Aggregation Methods</li><li>AVG 9.0 Free Edition: How can I run the complete scan of whole computer?</li><li>LSU A-Z: Office of Assessment and Evaluation</li><li>Linux: sed Insert a Newline Into the RHS of a Substitution</li><li>Microsoft PowerPoint 2007: Narrating a Slide</li><li>Ubuntu: Deleting Undeletable Files In the Trash</li><li>Linux: Remove All Digits/ Input From Inputs</li><li>SQL: Create a MySQL DocDB Databse</li><li>Linux Gnome: Screens and Graphics</li><li>Linux Xfce: Adjust keyboard settings</li></ul>
jQTouch handles every other tag normally, it is just the anchors that have ceased to function as intended by being placed inside this form. Can I keep using update panels here or will it inevitably break? Is there a work-around? Or am I approaching the problem incorrectly?
Keep in mind I want to retain the AJAXical animations produced by jQTouch. If you find that I am unclear or you would like to see more code (I only included what I believe to be necessary), please let me know.
Bonus points if you can tell me how to get jQTouch to replace the ugly the ASP.NET button control with an iPhoney button. :)
I think you are going to have to do a ton of hacks to get ASP.Net working with jqtouch with update panels, as you are going to be fighting the JavaScript inserted by ASP.Net with the JavaScript that jqtouch inserts. In your example all your links are going to the same anchor (#article). To do this in a jQtouch kind of way, you would have all the the links going to '#' and handle the tap of the articleLinkClass and then adjust as you need to.
$('.articleLink').tap(function()
{
var id = $(this).val('id');
// Pseudo CODE HERE FOR Setting up the article based on id... E.g.
$.json(jsonServiceUrl, { article_id: id }, function(data)
{
$('#article data).html(data);
});
jQt.goTo('article'); // Display the article page...
});
The iPhoney buttons are created in jQtouch as 's with their class as "whiteButton", i.e.:
<a id="myTestButton" class="whiteButton">Test Button</a>
Hope this helps...
Please bear with me. I've got the jQuery validation plugin working beautifully in FF, Opera, Safari and IE8. However, IE7 is giving me problems. Our back-end developer insisted on using .Net WebForm to create the form on the server (at least this is what I think she used, it's .aspx is about all I know - I can post some code if it'll help.) Anyway, in the code her submit button looks like this:
<asp:Button ID="btnSubmit" runat="server" Text="Submit the request" OnClick="btnSubmit_Click" />
and the output (in the HTML) looks like this:
<input type="submit" name="btnSubmit" value="Submit the request" onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " language="javascript" id="btnSubmit" />
However, when I replace her code with a simple <button type="submit" name="Submit" value="submit" class="button">Submit</button> the validation works, the error messages pop up, clouds part, etc. But she says she can't use this. Sigh.
So I guess my question is: how do I get jQuery to play nicely with her approach? I'm using jQuery to add some nice UI touches to the form, such as accordions, the calendar widget, etc. and I wanted this to be the icing on the cake. I'm also very sure that the initiation of the js is well-formed, I get no js errors for extra comma's, etc.
Thanks for whatever help you can provide.
Based on the javascript that is emitted in the button's onclick event ("if (typeof(Page_ClientValidate)....."), it looks like you are mixing ASP.NET validation and the jQuery Validate plugin. Try adding CausesValidation="false" to the attributes of the button, thereby forcing it to do a normal form submit, to which the Validate plugin responds.
Does the jQuery require the class to be set to "submit" in order for the jQuery validation plugin to work?
That seems to be the most obvious difference between the html generated by .Net and the html you wrote. If that is the case add 'CssClass="submit"' to asp:button element in the aspx page. This will be converted to 'class="submit"' in the generated html.
<asp:Button CssClass="submit" ID="btnSubmit" runat="server" Text="Submit the request" OnClick="btnSubmit_Click" />