How do I toggle twitter bootstrap as validation in web form? - c#

I know I can place any value from my code behind virtually anywhere on my aspx by using:
<%=myString%>
I also know that in order for me to make a field required using twitter bootstrap I need to use required before my tag closes as in:
<asp:TextBox ID="txtFName" runat="server" CssClass="standard_tb" required/>
In my project I want to be able to set that variable to required or null.
When I try using the method above I get the The server tag is not well formed if i use <%#myString%> within my label or I get the error Server tags cannot contain <% ... %> constructs if I use <%=myString%>
How do I get around this?

As you've seen you cannot add <% %> tags to a .NET server control.
What you need to do is in the code behind set:
if (someCondition)
txtFName.Attributes.Add("required", null);
else
txtFName.Attributes.Remove("required");
If you need XHTML compliance then instead you'd use the line:
txtFName.Attributes.Add("required", "required");
Which would render as:
<input id="txtFName" class="standard_tb" required="required" />

Related

Solution for use <% ... %> where runat="server" (or vice versa) in asp.net

My idea
When the user click on the a tag with his avatar, he must redirect to another page. I do this with the code by number one (see below).
<div>
<!--show new messages | only show when log in. -->
<a href="<%=ResolveUrl("~/messages/inbox.aspx") %>" class="click headeritem" id="messages">
<img src="<%=ResolveUrl("~/images/message.png") %>" alt="new messages" id="messages" />
<asp:Label class="number" id="lblNewMessages" runat="server">1</asp:Label>
</a>
<!--log in | only show when log out. -->
<div class="user" id="logOut" runat="server">
Log in
Regist
</div>
<!--go to the profile of the user | only show when log in. -->
<!--1-->
<a class="click user" id="logIn" href="<%=ResolveUrl("~/gebruiker.aspx") %>">
<img id="picture" src="<%=ResolveUrl("~/afbeeldingen/person-male.png") %>" alt="user" />
<asp:Label runat="server" id="points" class="points">10</asp:Label>
</a>
</div>
With this C# code I place some tags invisible dependent on log in or out.
if (Request.Cookies["user"] != null) // log in
{
FindControl("logOut").Visible = false; // 2
}
else // log out
{
FindControl("logIn").Visible = false; // 2
FindControl("messages").Visible = false;
}
Extra information about the code: If you are login, I place a cookie with the user's id. If the cookie is not null, the user is login, other ways not. If you are login, it place the a-tag with id logout unvisible.
My problem
Now this code will give a NullReferenceException on line two.
Additional information: Object reference not set to an instance of an object.
If I place runat="server" to the a-tags, it give me this:
Server Labels should not contain <% ... %>-constructs.
There is an <% ... %>-constructor added on the a-tag in the code above for get the correct url to go to the correct page.
This is my problem. You can not add a <% ... %>-constructor where runat="server" stand. How can you do it on a correct way?
Other information
Maybe also important to know is that my project has sub directories. It must be important to go from messages/inbox.aspx to user/profile.aspx for eg.
All this code above is added to a master page that I use for all the pages.
Can anyone help me? Thanks and sorry for my poor English.
Instead of using plain a-tags, you could use WebForm-controls like Panels or Hyperlinks, e.g.:
<!--log in | only show when log out. -->
<asp:Panel CssClass="user" id="logOut" runat="server">
<asp:HyperLink NavigateUrl="~/gebruikers/aanmelden.aspx" CssClass="click" id="logIn" Text="Log in" runat="server" />
<asp:HyperLink NavigateUrl="~/gebruikers/registreren.aspx" CssClass="click" id="regist" style="left:100px" Text="Regist" runat="server"/>
</asp:Panel>
This might reduce the amount of control you have over the generated HTML (so you'd have to check whether the HTML is good for you), but would enable you to access the controls in Code behind more easily, e.g.:
if (Request.Cookies["user"] != null) // log in
{
logOut.Visible = false; // 2
}
else // log out
{
logIn.Visible = false; // 2
messages.Visible = false;
}
There are a few different varieties of ASP.net inline tags. Please see the full list here: https://support.microsoft.com/en-us/kb/976112
Not all of them support placement inside the attributes of a server-side control's tag. The <%# ... %> data-binding expression inline format would allow you to do that, and I think the older <% ... %> format also. The <%= ... %> inline tag will definitely not work inside the server-side control tag because the whole expression is directly compiled instead of displaying the content as an attribute value.
If your main goal is controlling visibility of a server-side control, then you should just be able to set control.Visible = false; in your code-behind. If you'd like to control visibility of a non-server-side control (or a block of controls), then the <asp:Panel> server-side control might be your best route. ASP.net has tried to move away from the excessive inlining approach of the old ASP.
I used to get errors similar to the one you specified. Because the ResolveUrl uses "", avoid using that for the HREF attribute too as it might break the code. Try the below code:
<a href='<%=ResolveUrl("~/messages/inbox.aspx") %>' class="click headeritem" id="messages">
<img src="<%=ResolveUrl("~/images/message.png") %>" alt="new messages" id="messages" />
<asp:Label class="number" id="lblNewMessages" runat="server">1</asp:Label>
</a>

Finding element in aspx by property (not Id)

I have a that would result in some uncompilable code in the designer.cs file:
<div id="tabs-1-2-3"></div>
If I add a runat="server" property, my designer file won't compile for obvious reasons.
Is there any way to add an extra property that wil be used internally as the id?
If you don't have runat="server" then you can access it through the old school way.
<input type="text" id="text1" name="text1" />
then from server side use
Request["text1"]
for div:
The best way to do this would be some form of ajax, since your client side script would be able to read that contents and pass it to a server side method
Access in code behind isn't possiable without runat="server" attributes
Use an <asp:Panel /> which will turn into a <div> in the HTML page.

In asp.net what is the difference between using asp.net web control and simple html imput control

In my asp.net web control form i am using two text box 1st is simple input html control and 2nd is asp.net input web control.
<form id="form1" runat="server">
Email: <input type="text" id="txt_email" name="txt_email" value="" /><br />
Email2: <asp:TextBox ID="txt_email2" runat="server"></asp:TextBox><br />
<asp:Button ID="btn_login" Name="btn_login" runat="server" Text="Button"
onclick="btn_login_Click" />
</form>
I need to know what is the difference using simple control and asp.net input control both of them pass the value to code behind after the form submit. can any one help me on this?
As defined in your example input type="text" won't even be visible to code-behind because it is missing runat="server" attribute.
If you do add it - there're still differences. ASP.NET TextBox is more advanced and in par with the rest of ASP.NET model (e.g. it has property .Text vs. .Value of an HtmlInput control, it has events and other properties).
But if you simple need to pass text information back to the server, either of them will do the job.
The biggest differences are that
the asp.net controls are rendered on the server, and thus they have more overhead on your server than using traditional controls - traditional controls (by default) are rendered once then basically reside on the client's browser, asp controls are persistent on the server side.
the asp controls can be accessed and worked with directly in the code behind files.
asp controls have some additional tags that can be used on their fields usually.
as was pointed out by #Yuriy-Galanter, how the value is accessed is slightly different.
The asp:Textbox renders HTML to the client/browser when the page request is made. Picture the ASP.NET control, in this case an asp:TextBox as a server side bit of code that knows to render a <input type="text"> HTML element when the request for the aspx page is made to the server.
The ASP.NET compiler, when parsing your aspx page just spits out the <input type="text"> HTML element you have for Email: and for Email2: the ASP.NET compiler knows that is a server control because of the runat="server" tag. So the ASP.NET compiler, having a reference to the ASP.NET assemblies on the server, reads the code for the <asp:TextBox> and knows to ultimately respond to the page request with an <input type="text" id="txt_email2" />
The server side controls are accessible in your code behind page. So is accessible in the code behind but the <input> element is not. Good for you to consider in your research at this point, that if you add runat="server" to your element, it is accessible in your code behind.

Access div element from code

I have a div element which I would like to change it'e dir attribute from the code.
The problem is that I can't set the runat=server attribute on the div, so it's not accessible from the code.
Using asp.net, c#, framework 4.0.
Any idea?
Thanks.
If you don't want to set the div to runat="server" so you can do the following:
<div dir='<%= GetDir() %>'>
Your text
</div>
and in the code behind you can set the direction using the following code:
if(You Condition)
{
return "ltr";
}
else
{
return "rtl";
}
Yes, you can't access to the client elements on the page, only to the server-ones (asp.net is a server-oriented framework). The client controls are compiled to the Literal controls with html in them.
If you don't want to set div for the runat="server" attribute, you can register client script to edit your divs content.
If you set the runat="server" attribute, and set the ID="YOUR_DIV_ID_HERE" for it, it will be accessible from code under YOUR_DIV_ID_HERE name.
If you want you can do this also
<div><%= your server variable %> </div>
Use Jquery and call back function to call server side function.
You can set the runat="server" attribute on a HTML element. Just did a local demo, works just fine. It will be represented as an HtmlGenericControl (http://msdn.microsoft.com/en-us/library/7512d0d0(v=VS.100).aspx).
EDIT: You say you cannot use runat="server" to access the element from code. I am not sure why that would be a problem, as the html rendering should be no different. Maybe it has to do with the elements client side id beeing changed? If you depend on this, you could try setting ClientIdMode=Static for your div.

How to edit CSS style of a div using C# in .NET

I'm trying to grab a div's ID in the code behind (C#) and set some css on it. Can I grab it from the DOM or do I have to use some kind of control?
<div id="formSpinner">
<img src="images/spinner.gif" />
<p>Saving...</p>
</div>
Add the runat="server" attribute to it so you have:
<div id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</div>
That way you can access the class attribute by using:
formSpinner.Attributes["class"] = "classOfYourChoice";
It's also worth mentioning that the asp:Panel control is virtually synonymous (at least as far as rendered markup is concerned) with div, so you could also do:
<asp:Panel id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</asp:Panel>
Which then enables you to write:
formSpinner.CssClass = "classOfYourChoice";
This gives you more defined access to the property and there are others that may, or may not, be of use to you.
Make sure that your div is set to runat="server", then simply reference it in the code-behind and set the "class" attribute.
<div runat="server" id="formSpinner">
...content...
</div>
Code-behind
formSpinner.Attributes["class"] = "class-name";
This question makes me nervous. It indicates that maybe you don't understand how using server-side code will impact you're page's DOM state.
Whenever you run server-side code the entire page is rebuilt from scratch. This has several implications:
A form is submitted from the client to the web server. This is about the slowest action that a web browser can take, especially in ASP.Net where the form might be padded with extra fields (ie: ViewState). Doing it too often for trivial activities will make your app appear to be sluggish, even if everything else is nice and snappy.
It adds load to your server, in terms of bandwidth (up and down stream) and CPU/memory. Everything involved in rebuilding your page will have to happen again. If there are dynamic controls on the page, don't forget to create them.
Anything you've done to the DOM since the last request is lost, unless you remember to do it again for this request. Your page's DOM is reset.
If you can get away with it, you might want to push this down to javascript and avoid the postback. Perhaps use an XmlHttpRequest() call to trigger any server-side action you need.
Add the runat="server" attribute to the tag, then you can reference it from the codebehind.
Add runat to the element in the markup
<div id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</div
Then you can get to the control's class attributes by using
formSpinner.Attributes("class")
It will only be a string, but you should be able to edit it.
How do you do this without runat="server"? For example, if you have a
<body runat="server" id="body1">
...and try to update it from within an Updatepanel it will never get updated.
However, if you keep it as an ordinary non-server HTML control you can. Here's the Jquery to update it:
$("#body1").addClass('modalBackground');
How do you do this in codebehind though?
If you do not want to make your control runat server in case you need the ID or simply don't want to add it to the viewstate,
<div id="formSpinner" class="<%= _css %>">
</div>
in the back-end:
protected string _css = "modalBackground";
If all you want to do is conditionally show or hide a <div>, then you could declare it as an <asp:panel > (renders to html as a div tag) and set it's .Visible property.
To expand on Peri's post & why we may not want to use viewstate the following code:
style="<%= _myCSS %>"
Protected _myCSS As String = "display: none"
Is the approach to look at if you're using AJAX, it allows for manipulating the display via asp.net back end code rather than jquery/jscript.

Categories