I have a legacy application that I'm trying to add some Angular form validation features for the client side to be a little nicer. It's a WebForms application and it's using Master Pages.
The issue I'm running into is when I try to validate the form I need to reference the control by it's name attribute which ASP.NET auto generates (even when ClientIDMode = Static). I can't change the control to not be server side.
Is there a way I can reference the control by it's ID instead of name in AngularJS?
My TextBox:
<asp:TextBox runat="server" data-ng-model="formObj.textValue" ID="txtTextBox" CssClass="form-control" ClientIDMode="Static" MaxLength="100" required />
The Angular code:
$scope.validateForm = function (myForm) {
if (myForm.txtTextBox.$invalid) {
return true;
}
return false;
};
It comes back as an error because .NET generates the name as
<input name="ctl00$Content$txtTextBox" maxlength="100" id="txtTextBox" class="form-control ng-pristine ng-untouched ng-binding ng-invalid ng-invalid-required ng-valid-maxlength" data-ng-model="formObj.textValue" required="">
I don't want to hard code the ctl00$Content$txtTextBox into the name because this could easily change if someone ever moved the control or changed the structure. Is there some way I can reference the control by it's ID value which is always the same? Or is there some other .NET / Angular magic I can use to get around this?
Any help is appreciated!
The approach is to get the element name by id and then use the name with [ ] notation for validation.
try something like below.
myForm[document.getElementById("txtTextBox").getAttribute("name")].$invalid
Here is the Plunker
https://plnkr.co/edit/WMQ4Fb579PUW9C5t3124
I have used angular on web forms and I think its best to not mix asp.net controls with angular. Is there a reason why you can just use input field?
But if you do have to use it, to fix your particular problem you can use ClientIDMode
Related
I just implementing AngularJs on a website with is written in asp.net webforms.
I figure out when ng-Submit on button, the form is also making Post call.
How to stop form from submitting and let the angular do its work.
My sample code is as below.
<form id="form1" runat="server">
<div >
<input type="text" data-ng-model="enteredName" ng-model-instant/>
<button class="btn" value="add" data-ng-submit="addName()" >Add</button>
</div>
</form>
//Add Name function
$scope.addName = function () {
$scope.names.push($scope.enteredName);
$scope.enteredName = '';
};
Note: The ng-submit controller is working fine it is adding the input to the string list but after that form makes post call. and page go to IsPostBack.
Anyone guide me to handle the form from not posting.
If you plan on making an angular form using .NET you should probably use .NET MVC instead of .NET webforms. The reason is that all webforms pages have their own <form> element that is used to maintain state. This can be seen when you make a new webforms page in Visual studio, it automatically adds:
<form runat="server" ID="Form1">
Additionally, when you make webforms controls like <asp:LinkButton> or other things that provide "enhanced" functionality from base HTML, they actually get rendered as <input> tags that use the parent form. Therefore, to take advantage of any of the features of webforms, you really need to stick to their model and it gets very difficult to add anything else on top of that. It's possible, and sometimes quite easy, but it's a very long learning curve to figure out all of the gotchas along the way.
Conversely, .NET MVC gives you less out of the box, exposing the raw HTML to you with very few wrappers and things like postbacks or viewstates. I think that's a much better host for something that is using angular, especially if you are using angular for forms, which will prevent you from using some of .NET's webforms functionality anyways.
I'd start by using ng-click instead of ng-submit. And i would also stay clear of asp.net controls on pages that use angular.
Why does't work HTML input type: range control in asp.net? Have you any solutions for this problem?
In HTML code-
<input id="rangeCtrl" type="range" min="0" max="100" step="5" value="50" />
But is not work in ASP.NET
in ASP.net we need to use the HTML5 Doctype then only it work properly
This is by necessity a guess as you do not describe the problem you are experiencing, but it is noticeable that you have not provided a "name" attribute in your code -
From Mozilla Developer Network-
name
The name of the control, which is submitted with the form data.
When the form is POSTed (submitted) to your server then the value will be sent keyed against this name and not the id as you might have assumed.
If the issue is that you cannot see the value selected by the user on the server, then you will need to change your code to-
<input id="rangeCtrl" name="rangeCtrl" type="range" min="0" max="100" step="5" value="50" />
Assuming you are using Web Forms (as opposed to Web Pages or MVC, you've not specified) then you can then access the data using the Request.Form object in your codebehind. In MVC the value will automatically be matched against a view model property of the same name.
im trying to use Angular framework in existing ASP.NET WebForms application and problem i ran into is this:
Client side code:
<select id="fooSelect" class="span8" runat="server" clientidmode="Static">
<option ng-repeat="foo in foos" value="{{foo.Id}}">{{foo.Title}}</option>
</select>
When form gets submited (whole page postback),
value of fooSelect.Value
is "{{foo.Id}}"
How to get value of selected option on server side?
You can't use angular for server select tag. Actually, selected option value computed on server on postback. So as you have value="{{partner.Id}}" in markup, you getting exactly this value. In my opinion you can use plain select element without runat="server" attribute and bind selected id to hidden field, accessible on server-side:
<select ng-model="partner" ng-options="p.Title for p in partners" >
<option value="">--Select partner--</option>
</select>
<br />
<input type="hidden" id="selectedPartnerId" runat="server" ng-value="partner.Id" />
ASP.Net is not a good candidate for integration with AngularJS (and maybe other SPA). The abstraction against which ASP.Net is build makes it nearly impossible to leverage any capability of Angular such as routing or data binding.
ASP.Net dynamically generates content, which you don't have much control over. It would generate contains (like span), dynamic client ids an all to keep the data in sync and detect changes on the server.
I seriously doubt, if one can achieve data-binding in AngularJS for content generated with ASP.Net. The best that can work would be input type binding with ng-model and getting that data on the server with postback.
I highly recommend you to switch to ASP.Net MVC
Do any one know how can I get the textbox value based on the name in controller?
Example:
<asp:TextBox runat="server" ID="stDate" Text='<%# Eval("StartDate")%>' Width="6em" />
When I read from the source code, it's show as below:
<input name="ctl00$cplh$GridView1$ctl10$stDate" type="text" id="stDate" style="width:6em;" />
How can I get the get this textbox value based on the name ctl00$cplh$GridView1$ctl10$stDate in the controller?
NOTE: the reason I would like to do in this way is because I have more then 1 textbox are using the same ID (stDate)
To get the ID generated on the page, you have to get the ClientID
stDate.ClientID
there's a few things I want to suggest:
ID's must be unique, you should assign an unique identifier to each controller in your page.
.NET needs a hook to your control - so it needs to set the name if it is going to be created by .NET (you can't change it even if you try to force it).
If you want to assign a common name between controllers use the attribute class, for example:
<input id="txtbox1" class="commonController" type="text" value="input1">
<input id="txtbox2" class="commonController borderClass" type="text" value="input2">
p.d.: remember, you can assign multiple classes to a controller.
Also remember that id is only for client side DOM manipulation... name is required for the browser to actually post the content
If you want more info check here and here
If you using ASP.NET 4 you can you set the ClientIDMode to static on the textbox then asp keeps the id as you had set it.
<asp:TextBox runat="server" ID="stdate" ClientIDMode="Static" />
This helps if you need to use the textbox in client side scripting. Here's an article on it. You would need to make sure that the id is unique then, if you need a common name it would be better to use a class as Luis suggested.
I am trying to integrate with a payment gateway. They require a set of hidden input boxes to be posted to their gateway like:
<input id="orderref" name="orderref" type="hidden" runat="server"/>
I have added runat="server" so I can dynamically populate the boxes with values.
However, of course at runtime the input box name gets changed to:
<input name="ctl00$ContentPlaceHolder1$orderref" type="hidden" id="ContentPlaceHolder1_orderref" value="9" />
I'm in a catch 22. If I remove runat="server" all is fine with regards to the name, but I then can't populate the input box with values! Is there a means to force the name of the field to stay the same?
Depending on what .NET version you are using the control over this differs: basically, pre-.NET4 you can only alter the container prefix by implementing your own, but from .NET4 you can omit the container prefixes using ClientIDMode.
Alternatively, you may expose methods, say, on your page or master page and then call them using inline-scripting (<%=MyMethodReturningValue() %>) which is evaluated at the time of render.
EDIT:
To elaborate a little on my second suggestion, you can define a method in your pages code-behind that can be executed in an inline manner by use of embedded code blocks; the referenced link gives simple examples of this, but the methods needn't be in <script> blocks of the page itself (as I previously touched on) so that you can keep your logic separated, such as:
Define a method in your page's code-behind:
public string RenderMessage()
{
return "This need not be a hard-coded string!";
}
Write out your input element, omitting the runat attribute, and adding the embedded code block in place of where the value would be (think of this as a place holder); this code block is going to call the specified method on pre-render, and essentially be replaced by the returning value:
<input id="orderref" name="orderref" type="hidden" value='<%=RenderMessage() %>'/>
If you are using ASP.NET 4.0, you can set clientidmode="Static" on the <input> which will cause the ID to stay exactly as you set it. There are caveats to this, but in general should work for your needs.
Documentation on ClientIDMode
Edit: As it turns out, they need the name attribute to be static, which ClientIDMode does not control, and can not be set programatically in ASP.NET, it only controls the id attribute.
Use the following code:
Page.ClientScript.RegisterHiddenField("orderref", "9")
This creates the following hidden input:
<input id="orderref" name="orderref" type="hidden" value="9" />
For more details see System.Web.UI.ClientScriptManager.RegisterHiddenField on MSDN
I also struggled with this issue and eventually found the following solution:
In the markup I have the following:
<%=html %>
In the codebehind I have a protected variable:
protected string html;
I then set this variable as follows:
html = "<input id='Express_Receipt_Email' type='hidden' value='" + sessionUser.EmailAddress + "' name='Express_Receipt_Email'>";