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.
Related
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>
I am developing web applications in asp.net using c#, so I placed asp:textbox in web application. When i am loading page, i want to have default text in text box and when i place cursor on it and type the first letter, the text box become clear from textbox.
what you are asking is called watermarking. There are so many ways to do it
Third Party tools like :
a. Ajax ToolKit. you can see it in action here
b. Telerik RadTextBox Control (by setting its EmptyMessage property) .
and so many.
You can yourself build one using simple javascript like below:
<script>
$(document).ready(function() {
var watermark = 'textbox watermark text';
$('#inputTextboxId').blur(function(){
if ($(this).val().length == 0)
$(this).val(watermark).addClass('watermark');
}).focus(function(){
if ($(this).val() == watermark)
$(this).val('').removeClass('watermark');
}).val(watermark).addClass('watermark');
});
</script>
and place an input control inside your container say body
<body>
<input id="inputTextboxId" type="text" />
</body>
Also, if your entire work area resides in HTML5 supported browsers,then simply do this:
<input type="text" placeholder="Enter your name...">
and your textbox will have watermark "Enter your name..." which would disappear on focus.
Another alternative is the HTML5 Placeholder tag, although this isn't fully supported in all browsers.
I would recommend the javascript alternative #Jon Malcolm suggested.
You can do this using the AjaxControlToolkit's TextBoxWatermark extender. Add the AjaxControlToolkit to your project (using Nuget is the easiest way), and then in your markup you can specify the text to be displayed like this:
<asp:textbox runat="server" id="MyTextBox" />
<ajaxtoolkit:TextBoxWatermarkExtender runat="server" id="MyTextBoxExtender" TargetControlId="MyTextBox" WatermarkText="Default Text" />
Or you can do this with the jQuery Watermark plugin - there's details on how to implement this in the answer to this question.
Try the below mentioned following code it wil help to you to solve your problem
<asp:TextBox ID="Textbox"
CssClass="Input"
onfocus="if(this.value == 'Name'){this.value='';}"
onblur="if(this.value == ''){this.value='Name';}"
Width="300"
runat="server"
text="Name" />
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'm using markdownsharp with my asp.net forms website.
I want to use MarkItUp as my editor and have found a straight forward article on how to integrate with MVC which seems straight forward enough: http://rsolberg.com/2010/09/asp-net-mvc-markitup-rich-text-editor/
However, how do I do this with a forms website?
How do I get the MarkItDown Textarea on a postback and get the preview to work as well?
Place the Javascript and CSS file links in the head portion of the page just as you would with MVC. Then in your form, place a TextArea control. Set the rows and columns as needed.
<asp:TextBox ID="txtEditor" runat="server" TextMode="MultiLine" Columns="40" Rows="5" Text="" />
Then use JQuery to enable to functionality.
$(document).ready(function() {
$('<%=txtEditor.ClientID%>').markItUp(mySettings); });
Then on PostBack the contents of the editor will be available in the Text property of the TextBox control.
txtEditor.Text
This is not the only way to do this, you could also use a HTML TextArea control with a runat="server" attribute. Use whatever your personal preference is.
I'm adding multi language support to a prototype web site. The site was developed using html lables which I could multilanguage using asp:literal or I could change them all to asp:labels as shown below.
<asp:label ID="lblAddress1" runat="server" Text='<%$ Resources:lblAddress1 %>' /></br>
<label><asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:lblAddress1 %>"></asp:Literal></label>
Web stuff isn't my area of expertise and the guys here don't think there is any advantage one way or the other. What would you choose and why?
<asp:Literal>
Use this control as a placeholder for any text you wish to insert in the page. The output will not be wrapped in any html markup tags (simplest).
<asp:Label>
Use this control in the same way as the , however, This control will wrap the text in html tags. These span tags allow the control to have additional properties (css styling etc.) which can be leveraged.
<label>
This html tag has semantic value in a page and is used to associate form elements with their description.
<label for="SaveLoginName">Remember Me:</label>
<input type="checkbox" id="SaveLoginName" />
A browser can use this info to provide additional accessibility features such as enabling clicking text to toggle checkbox value.
Each of these have appropriate usage scenarios.
Seems to be a matter of taste. Although I think the second option may add a little weight to the page because literals are usually wrapped in <span>