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.
Related
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
I noticed a weird problem in C# and it's been bothering my head for weeks, so I thought I just put this question out there. So my question is basically how does C# handle multiple client <form>'s inside the server form <form runat="server">? I've been writing a web site and I've encountered a very strange problem.
So here's the essential breakdown to recreate this problem.
1) Have a simple javascript method with an alert inside that fires if it is called.
eg: function tester() {
alert("adf");
}
2) Open a brand new Web Forms project in Visual Studios 2010. (It should have a <form runat="server"> already created inside for you.)
eg: <form runat="server"> <form/>
You can only have one of these.
3) Now inside this form tag, write an empty form tag that should theoretically do nothing:
eg: <form action=""><form/>
4) Now Create another form right after this form that calls the javascript method.
eg: <form action="javascript:tester()" >
<button type="submit" >Search</button>
</form>
5) Run this code now, and you should see the alert pop up after you press the button.
6) Now take out the empty form tags:
Delete: <form action=""><form/>
7) Run code again, and now you should find that your javascript call is not firing anymore, and it would rather be refreshing the page every time you press the button.
So this is my problem that has been bothering me, and I hope some guru may have an answer for me soon, for this has been bothering my head for a long time. I have no idea why it works with two forms, and why it doesn't with just one form. Hope someone can answer this soon. Thanks so much in advance!!!
Some Helpful Information:
According to this page, I can have multiple "client" based form tags and that shouldn't be a problem...
Why you can't have a page with multiple server-side Form tags?
...however... the problem somehow still manifests itself.
Having a form tag within a form tag is against the html specifications, and thus any result would be undefined behavior.
For your particular problem, can you not do this?
<button onclick="tester();">Search</button>
I have developed a web application in ASP.NET 3.5 and C#. When I deploy the application, people can see the telltale signs that I'm using ASP.NET. How do I make it so that anyone who sees my site won't see that I'm using ASP.NET?
Because of the nature of ASP.NET, any dynamically built control will show up with $Ctrl. If you use ViewState, that will show up. If you use ASP.NET Event Validation, that will show up.
If you don't want it to show up, all you can do is use another Framework (ASP.NET MVC), or not use any of those features of ASP.NET (Which would be silly if you're using ASP.NET).
If your pages are suffixed with .aspx, then everyone is going to know you're using ASP.NET anyway. Are you using URL Rewriting?
I would recommend:
Using a Url Rewriter to change or removing the page extensions
Not using view State.
Defining telltale signs? Without looking at the source, the only obvious way would be the .ASPX extension.
Looking at the source, you'd need to remove
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" ...
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
Any references to WebResource.axd or ScriptResource.axd
ASP.NET control names (ctl00, etc)
Response Headers X-Powered-By and X-AspNet-Version
Can anyone think of others?
You may also want to remove embedded resources. The .axd extenstions in the page source are a give-away.
Edit:
Coming to think of it, the hidden fields (ex. __EVENTVALIDATION) are give-aways too...
Your only real choice is to switch to ASP.NET MVC; otherwise, there will be tells somewhere for anyone who really knows ASP.NET, or you'll be limiting the features you use to the extent that there's no benefit in using ASP.NET. Even without ViewState, if you have controls embedded in panels, or use master pages, control IDs will be give-aways. Any MS-specific JavaScript emitted by controls or by the page will be give-aways. Consistent use of a single form per page is pretty much a give-away. Lots and lots of things indicate ASP.NET.
Why is this so important?
Basically, i don't want to use <input type="submit"> mainly because it's a button, i'd rather user ActionLink, so i am using Ajax.ActionLink, and i'm not sure what to place in the routeValues argument for it to pickup the new (edited) data (user enters comments etc) and send it to my action. would any of you know? thanks.
this is what i have, but of course, it sends the original comment before user edit back to the server/action :)
<%= Ajax.ActionLink("Update", "UpdateComment", Model.Comment,
New AjaxOptions With
{.UpdateTargetId = Model.CommentDivId, .HttpMethod = "Post"})%>
ps: i know how to do this in javascript, and doing ajax posts etc, hope to find and mvc only solution
Basically, you can not do this alone in an ActionLink and MVC, you need to use JavaScript to achieve what you are after! If you want to use JavaScript, there are examples above you can choose from!
I do wish therewas a HTML helper so we didn't need to do messy jquery mashups to access real-time form data, but there isn't, perhaps someone can create a helper and share it with us?
I would recommend you still wrap the comment field with form and submit the fields with an anchor and some javascript.The generated html looks like...
<form id="the_form">
<textarea id="comment"></textarea>
submit
</form>
You can easily replace this with the HtmlHelper in MVC or some other ViewEngine code, but the point is to submit the form with the link (anchor tag) and the parameters will get mapped to the action method.
Hope that helps,
Eddy
PS. You could also use the Ajax.BeginForm to achieve the same.
If it's only the button you're worried about then why not apply a bit of css to change the button into a link? No one will know the diff and you'll save yourself a bit of work.
If this is not what you're after then let me know and I can remove this answer.
As for Ajax, I'm not sure you're model will be updated as it should be out of scope. I think the way to do this is to pass all your data across as variables. Not an ideal solution really.
I'd use the css approach on this one.
edit
<head>
<style>
.buttonAsLink{ background-color:white; border:0; color:Blue; text-decoration:underline;}
.buttonAsLink:hover{ text-decoration:none;}
</style>
</head>
<body>
<input class="buttonAsLink" type=submit value="Click Me" />
</body>
How about just making an ajax call with jQuery on click of your html link? Something like this or this.
I want to show a pop-up on click of a button. The pop-up should have a file upload control.
I need to implement upload functionality.
The base page has nested forms. Totally three forms nested inside. If I comment the two forms then I can able to get the posted file from Request Object. But I was not suppose to comment the other two forms. With nested forms I am not getting the posted file from the Request object.
I need some protocols to implement this.
I am using C#. The pop-up was designed using jQuery.
As suggested, I am posting the sample code here.
<form id="frmMaster" name="frmMaster" method="post" action="Main.aspx" Runat="server" enctype="multipart/form-data">
<form method='Post' name='frmSub'>
<input type="hidden" name='hdnData' value=''>
</form> // This form is driven dynamically from XSL
<form method='Post' name='frmMainSub'>
<input type="hidden" name='hdnSet' value=''>
</form>
</form>
Note:
Commenting the inner forms works fine. But as it required for other functionalities not suppose to touch those forms.
I have given this code for sample purpose. The actual LOC in this page is 1200. and the second form is loaded with lots of controls dynamically. I have been asked not to touch the existing forms. Is it possible to do this functionality with nested forms?
You can have multiple HTML form tags in a page, but they cannot be nested within one another. You will need to remove the nesting for this to work. If you post some of your code, you're likely to get more help with some specific recommendations to address this.
From your posted code, it's also unclear why you'd even be tempted to use multiple forms. Can you elaborate on why you think you need multiple forms here? You don't have explicit actions in your subforms, so it's hard to tell where you want them to post, but I'm guessing it's all posting to the same page. So, why multiple forms at all?
You could always try putting one of the inner forms onto another page and serving it up in an iframe. That way the inner form is not technically inside the outer form. This will require you to alter some of the html, but there's really no way around that.
In your situation you're looking at a hack no matter how you put it. You aren't supposed to have nested forms.
Since you're using Javascript to do this, you could try moving the form element that is posting back out of the parent forms and then performing the .submit() action after it's been moved.
It's a ugly hack - but I so is the HTML -- :) (I kid, I kid!)