Develop Reference

Reference ASP.NET TextBox Control in AngularJS by ID instead of Name

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

How to handle AngularJs with asp.net webform?

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.

ASP.NET WebForms with Angular Postback

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

Validate file size before upload - IE8+

I want to validate the file size before upload on IE8+
I tried
Validate File size before upload
But didn't work.
And I can't configure every IE browser to use the "ActiveXObject" (I saw that is one way for the solution).
What I should do?

Using the ASP.NET FileUpload control you cannot use code to validate the size of a file and inform the user.
If you want a better user experience, then I suggest you investigate some open source solutions like the following:
Custom HTTP module
NeatUpload is a free option.
Silverlight/Flash option
SWFUpload is a free option.
Asynchronous chunking option
RadAsyncUpload - Telerik's ASP.NET AsyncUpload is a pay option, check website for pricing.

Try this
<form enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="myFile"><br>
</form>
<script>
$('#myFile').bind('change', function() {
alert(this.files[0].size);
});
</script>

C#: Open a browser and POST to a url from a windows desktop app

I have a small WPF app (although I guess it doesn't really matter whether it's a wpf form or a webform app?) that I want to have launch a new browser window and POST to a specific url. I've been messing around with:
System.Diagnostics.Process.Start("http://myurl.com");
to launch the window but I don't think I can use the same process to actually post to a url...I've also experimented with HttpWebRequest but I would like the user to be able to use the app after I have posted to this url, not just show them the results...What can I look at to able to do something like this?

There is no direct way to do it. What you could do is generate a HTML page with a form filled with the data you need to post, and a bit of javascript to post the page automatically when it is loaded. Then you just have to open that page in the browser...
The generated HTML could look like that :
<html>
<head>
<script language="Javascript">
function submitForm() {
var theForm = document.getElementById("theForm");
theForm.submit();
}
</script>
</head>
<body onload="submitForm()">
<form id="theForm" action="http://myurl.com" method="POST">
<input type="text" name="username" value="myusername"/>
<input type="password" name="password" value="mypassword"/>
</form>
</body>
</html>
If the page must be displayed in your application, load it in a WebBrowser control

Use the WebBrowser Class instead.

There are multiple solutions, not sure which one would be the best for you...
Proceed with your original approach
Embed web browser control in your applicaiton as suggested in other answers
Do everything programmatically "behind the scene"
For #3 you may want to look here: http://geekswithblogs.net/rakker/archive/2006/04/21/76044.aspx
If you want to go with #1 - it is more tricky, since you need to control external application and different browsers would behave differently.
I've used "javascript:" protocol and the code below with IE as default browser when dealing with one "user-unfriendly" application. Please note that it's not "production-ready" code. There is no error handling, user may shift focus away from launched browser, or use browser without "javascript:" protocol support etc.
static void Main()
{
Settings s = Settings.Default;
Process.Start(s.URL1);
Thread.Sleep(s.Delay1);
SendKeys.SendWait("%D");
Thread.Sleep(100);
SendKeys.SendWait(EncodeForSendKey(s.URL2));
SendKeys.SendWait("{ENTER}");
}
public static string EncodeForSendKey(string value)
{
StringBuilder sb = new StringBuilder(value);
sb.Replace("{", "{{}");
sb.Replace("}", "{}}");
sb.Replace("{{{}}", "{{}");
sb.Replace("[", "{[}");
sb.Replace("]", "{]}");
sb.Replace("(", "{(}");
sb.Replace(")", "{)}");
sb.Replace("+", "{+}");
sb.Replace("^", "{^}");
sb.Replace("%", "{%}");
sb.Replace("~", "{~}");
return sb.ToString();
}
URL1: http://www.google.com
URL2: javascript:function x(){document.all.q.value='stackoverflow';document.forms[0].submit();} x();

You can create a hidden WebBrowser control and do Navigate() (using the overload that allows you to specify the request method). You will need to specify a "_blank" target frame to cause the navigation to happen in a new browser window.