To use AngularJS validation status I need to reference the form by its name. However the form that I have does not have a name, and I have no idea how to set a name, other than using Javascript, which I don't want to do. When I add the name attribute to the <form runat="server"> it doesn't appear in the output HTML.
Example of how it would be ideal to work:
<form name="form">
<div ng-app="myApp" ng-controller="myCtl">
First Name: <input type="text" name="firstName" ng-model="firstName" required><br>
<span ng-show="form.firstName.$dirty">Dirty</span>
</div>
</form>
A solution would be either of these two:
Reference the form elements by ID instead of name
Get ASP.NET webforms to output the name attribute
ASP.NET controls have been modified in the .NET Framework version 4.
The HtmlForm control does not render a name attribute anymore.
To disable the new rendering mode, add the following setting in the Web.config file:
<system.web>
<pages controlRenderingCompatibilityVersion="3.5" />
</system.web>
You can add an attribute to a web forms control from the code behind using:
controlName.Attributes.Add("name","value");
<asp:TextBox ID="controlName" runat="server"/>
Or if you want to use Ids with .NET 4 you can set the attribute ClientIDMode eg
<asp:TextBox ID="controlName" runat="server" ClientIDMode="Static"/>
then you can reference it by ID
HTH
use jQuery to modify the form tag
$('#form').attr('name', 'form');
Related
I have a code which I have to use HTML elements instead of ASP.NET elements. So because I want to have access to the elements from CodeBehind I've set all of their attributes to runat=server.
As you know ASP.NET changes the name attribute of elements to something like CT100$MainContent$IDNameOfThatElement. How can I prevent ASP.NET to change it? Cuz I have to have some other names because of JQuery stuff...
For example ASP.NET changes the name attribute from required to CT100$MainContent$PaymentCode in the following code:
<div class="field">
<input type="text" runat="server" name="required" id="PaymentCode" />
</div>
Thanx in advance.
You have to add ClientIDMode="Static"
Example:
<asp:Panel ID="myPanel" runat="server" ClientIDMode="Static">
</asp:Panel>
As far as I know you can't override the name attribute without jumping through some hoops. What you can do is create a controlAdapter that can control which attributes will be rendered and how.
Have a look at this answer for an idea about how to accomplish your goal.
I have a asp.net page that has several form elements.
<input type="hidden" id="myID" runat="server"/>
I am running these at the server level because I need to assign values to them.
The Asp.net engine is auto assigning ids and names, overriding my specified ID.
For purposes of my application I have to have specific IDs on these fields. Since this is an older version of .Net <4 I can not use the ClientIDMode=Static value.
Is there anyway that I can force static IDs?
The ability to assign static values is new to .net version 4.0 but you can get the value assigned to controls and pass that to other bits of JavaScript.
Create your own hidden controls with the IDs and Names that you want. Use some simple JavaScript on your form submission to copy values from the server side controls to your controls.
<form id="MyForm">
<asp:TextBox ID=MyTextBox" runat="server" />
<input type="hidden" id="MyFixedID" name="MyFixedName" />
<asp:Button ID="MyButton" runat="server" Text="Go!" />
</form>
function fred() {
$("#<%=MyButton.ClientID %>").Click(function() {
$("#MyFixedID").val($("#<%=MyTextBox.ClientID %>").val());
$("#MyForm").submit()
});
}
I have also used ScriptManager.RegisterStartupScript() or ScriptManager.RegisterClientScriptBlock() to emit JavaScript and pass the server side Control.ClientID as a parameter to a function defined within a <script> block.
I've created a simple ASP.NET 4.0 application to see how rendered client ids will vary if I change controlRenderingCompatibilityVersion in web.config and ClientIDMode attribute of the control.
Now I've set <pages controlRenderingCompatibilityVersion="3.5"/> and <asp:Label runat="server" ID="Message" ClientIDMode="AutoID" /> and expect to find in the generated markup asp.net-3.5-style ClientID (something like id='ctl00_Message'),
but I see this <span id="Message">Hello world!</span>.
Why does not ASP.NET render it as a 3.5-style id?
If the span is on it's own, then there is no reason to change the ID.
It depends if the control is inside another control. If the span above is inside a Repeater, DataList etc, then the Id will change.
Does anyone know why ASP.NET 4 has dropped the ctl00 prefix on ASP controls?
Is there a setting I have missed?
In ASP.NET 4.0, they've introduced support for cleaner HTML syntax. You can read about it at Scott Gu's blog. If you want the classic model for Client IDs, you can adjust your web.config:
<configuration>
<system.web>
<pages controlRenderingCompatibilityVersion="3.5" />
And that'll make upgrading your application easier. You can change this per control (and per page) by using the Control.ClientIDMode property, which can also be set in the web config:
<configuration>
<system.web>
<pages clientIDMode="AutoID|Predictable|Static|Inherit" />
AutoID renders the controls with the classic ASP.NET 2.0 model.
As far as i remember its up to ASP.NET to decide which prefix to use.
Its a bad practice to reference on the controls with hardcoded id value.
You should use ClientId property that will always generate you proper Id:
<td class="tmarg10" style="width: 150px">
<label for="<%=txtName.ClientID %>">
Name of the mall group :</label>
</td>
<td class="tmarg10">
<asp:TextBox ID="txtName" runat="server" Columns="90" /> <br />
</td>
In the example above, its calculating proper ID of the textbox and putting it into label attribute. In this way you will no more worry about keeping the same id of the control.
If you just want to add 'ct100' prefix to your control's IDs, add Master page to your WebPage. But how said above, try to avoid using hardcode with controls ids in your sources and read Metthew's comments for generation custom ID
Not a setting, but a decision by MS to simplify the way IDs of controls within containers are transformed to the client.
Here is a blog post by Scott Guthrie explaining the changes. The reasoning behind it:
Clean, Standards-Based, CSS-Friendly Markup
I want to add a custom attribute to an asp.net RadioButton called Key which I'm using client-side for an ajax request.
What I'm finding is that my aspx markup which is the following:
<asp:RadioButton ID="rdoPost" GroupName=PreferredContactMethod" value="Post" onclick="DoStuff(this)" runat="server" />
gets rendered in the page as
<span Key="ContactMethod">
<input id="rdoPost" type="radio" name="PreferredContactMethod"" value="Post" onclick="DoStuff(this);" />
</span>
whereas I'd expected (and hoped) to get the following
<input id="rdoPost" type="radio" Key="ContactMethod" name="PreferredContactMethod"" value="Post" onclick="DoStuff(this);" />
I've tried the same thing with an asp TextBox control and it works exactly as I'd expect simply adding the Key="myKey" attribute to the <input type="text"/> element.
Is there a way around this with the standard RadioButton control, or will I have to inherit from the standard one to achieve the markup I'm wanting?
Also... (sorry to ask two questions at the same time), is adding non-standard attributes to html markup a bad idea anyway? Currently I'm using these attributes in JavaScript in the following way:
var key = rdoPost.Key;
I've found from the question/answer below that the easiest way to do this is via the code-behind using the InputAttributes property as follows:
rdoPost.InputAttributes.Add("class", "myCheckBoxClass");
Why does ASP.Net RadioButton and CheckBox render inside a Span?