asp.net mvc javascript postback - asp.net

I'm mixing asp.net webforms and asp.net-mvc. To use webforms I've included
routes.IgnoreRoute("Reports/{*pathInfo}");
in the public static void RegisterRoutes(RouteCollection routes) method.
It seems to work just fine. But javascript postbacks on the asp.net webform pages don't work. Specifically
<script type="text/javascript">
function callMethod(methodName, methodArgument)
{
alert('test1');
document.getElementById("methodname").value=methodName;
document.getElementById("methodargument").value=methodArgument;
alert('test2');
document.forms[0].submit();
}
</script>
doesn't work. Everything is fine until the document.forms[0].submit(); call which appears to do nothing. If I completely disable the asp.net MVC route mapping then the above Javascript works just fine.

I just completed a brand new sample project and was able to get this to work... I created a folder in the root of my project called Reports and added the Billing.aspx page there. I then added the code below to the default Index view within the Home folder as shown below.
Global.asax
routes.IgnoreRoute("Reports/{*pathInfo}");
MVC Page Views\Home\Index.aspx
<form method="post" action="../../Reports/Billing.aspx?tenantId=0003-0140&rentNum=0" id="myForm">
<input type="text" id="sample" /><br />
<input type="button" onclick="callMethod();" value="send" />
</form>
<script type="text/javascript">
function callMethod()
{
alert('test1');
alert(document.getElementById("sample").value);
alert('test2');
document.forms[0].submit();
}
</script>
My guess is that even though your form's action is set to Billing.aspx, it is not looking for it in the correct folder. Try adding "../../Reports/" in front of Billing.aspx to your form's action. Since the Billing page is not in the same root as the MVC page, that is likely to not go anywhere on a post action...

Related

Linking to a MVC controller from ASP page

I have inherited a asp project with all new projects being done in MVC. I have a link on an asp page which I would like to route to a MVC action but can't seem to manage this. This is what I have so far which doesn't work.
ASP page:
<div id="mainMenuAnalystics" class="panel pageLink" runat="server">
<div class="header">
<asp:HyperLink NavigateUrl="IDoNotExist.aspx"
Text="Analytics"
runat="server"/><br class="floatClear" />
</div>
</div>
In the routeConfig.cs file I added this:
routes.MapRoute(
name: "Analytics",
url: "DestinyWireless.src/aspx/IDoNotExist.aspx",
defaults:
new
{
controller = "Areas/MVC/Controllers/ReportingController",
action = "Index"
});
So instead of going to IdoNotexist.aspx, I want to redirect to the Index method in Reporting controller which is located at Areas/MVC/Controllers/ReportingController. Anyone know how to achieve this?
Of course it would be great if I could just add a #Url.action on the asp page itself but it seems asp does not support razor.
Folder structure:

asp.net mvc 5 date picker in form without any model

inside the page which is belong to other model and here I need only one input which should have date picker. I don't want I select type in model but here in html, is there any helper or library?
You just have to add required jQuery files or libraries as below for jQuery DatePicker: (If you are using bundling in ASP.NET MVC, then use the following. By the way, bundling means to add all jQuery or CSS files in a single class for optimization)
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",
"~/Content/jquery-ui.css"));
Or simply without bundling, you can do the following as well:
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
In the head section:
<script >
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Then finally:
<p>Date: <input type="text" id="datepicker" /></p>
For more, you can check the below links:
Sample-jQuery-DatePicker-01
jQuery-Plugin-Samples
Sample-jQuery-DatePicker-02

Submitting form in angularjs in asp.net web page

I am hating asp.net...
I have a really simple web site. In my master page I have a form runat="server".. I need it because in some page I have server side controls (login control for example, or my custom control)..
Now I have a simple page, with a really simple form. And in this page, I would like to use angularjs..
What I want is that (simply) when I submit this angularjs form, I arrive on the server just when the form is valid.
In this page I have tried different solution but no solution works!
The problem I think is that I have a (angularjs) form (in the page, this is not runat="server") that is nested in asp.netform (in the master page, runat="server")..
Here what I tried:
1) remove the asp.net form from the master page and add different asp.net form just where i need, but in some page i had more than one form with `runat="server" and this is not possible:
two form runat=server
2)remove the angularjs form, don't do a submit, but manage a simple ng-click event, but in this way I go on server always, even if form is not valid...
3)leave the angularjs form a do a submit, but in this way I obtain an "invalid postback error"... I have tired this solution but it does not work:
Invalid postback error
What I simply want is to use angularjs and go on server just when form is valid... How can I do? Thank you..
UPDATE:
My MasterPage is:
<body>
<form runat="server">
...
<asp:ContentPlaceHolder ID="content" runat="server"></asp:ContentPlaceHolder>
...
</form>
</body>
My Page is:
<asp:Content ID="Content3" ContentPlaceHolderID="content" runat="server">
<script type="text/javascript" src="/Scripts/angular.min.js"></script>
<script type="text/javascript" src="/Scripts/angular-resource.min.js"></script>
<script type="text/javascript">
(function (angular) {
var public_area = angular.module("public-area", ['ngResource']);
public_area.factory("PresentaUnAmicoService", function ($resource) {
return {
piani_tariffari: $resource("/api/PresentaUnAmico/")
};
});
public_area.controller("PresentaUnAmicoController", function ($scope, PresentaUnAmicoService) {
$scope.sendInvitation = function ()
{
var invitation =
new PresentaUnAmicoService
.piani_tariffari($scope)
.$save();
}
});
})(angular);
</script>
<div data-ng-app="public-area" data-ng-controller="PresentaUnAmicoController">
<form name="presenta_amico-form" novalidate>
<table class="three_column" data-ng-class="{ 'ng-submitted' : submitted }">
... //Here there is my form
<button type="button" class="button link" id="btnSendInvitation" runat="server" data-ng-click="submitted=true" ng-submit="sendInvitation()">
<span><b>INVIA EMAIL</b></span> <img class="middle" src="/Styles/img/continue_24x24.png" />
</button>
...
</table>
</form>
</div>
</asp:Content>
I Know, It's not correct have a form inside another form.. but I am looking for a solution...
What you need in order to nest form is to use
eg:
<form runat="server">
<ng-form name="myFormName" ...>
//Your Code
</ng-form>
</form>
have a look here

How to call aspx page without opening it

I have a aspx page that I need to call without going directly on that page.
I have tried to make POST from form but it opens this action url in browser.
<form method="POST" action="http://mysite/actionpage.aspx">
<input type="submit" value="Submit" />
</form>
You could use curl if you're on a *nix system.
Here is a reference on how to post data to a page. The result will be returned through the command line.
What is the curl command line syntax to do a post request?
Here is the syntax for reference:
curl -d "param1=value1&param2=value2" http://example.com/resource.cgi
or
curl -F "fileupload=#filename.txt" http://example.com/resource.cgi
If jQuery is allowed to use in your case, You may use jQuery ajax to call that page
$("form").submit(function(e){
e.preventDefault();
$.post("yoursecondpage",function(data){
//do whatever with the response from that page
});
});
You can do it via ajax.
For example, if you add a script reference to jQuery things will get much easier, and you can do the following:
<script type="text/javascript">
function postIt()
{
$.post(
"http://mysite/actionpage.aspx"
, function(data)
{
// data was returned from the server
alert("data posted in the background");
} );
}
</script>
The processing you be done via background.
Your final HTML woul be :
<form method="POST" action="http://mysite/actionpage.aspx">
<input type="submit" value="Submit" onclick="postIt();" />
</form>
I haven't tested , but looks like you are navigating to .aspx means server page, i.e. you need to use runat="Server" in your tags like this

Using embedded standard HTML forms with ASP.NET

I have a standard aspx page with which I need to add another standard HTML form into and have it submit to another location (external site), however whenever I press the submit button the page seems to do a post back rather than using the sub-forms action url.
A mock up of what the form relationships is below. Note in the real deployment the form will be part of a content area of a master page layout, so the form needs to submit independantly from the master page form.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<form id="subscribe_form" method="post" action="https://someothersite.com" name="em_subscribe_form" >
<input type="text" id="field1" name="field1" />
<input id="submitsubform" type="submit" value="Submit" />
</form>
</div>
</form>
</body>
</html>
It's an interesting problem. Ideally you only want the 1 form tag on the page as other users have mentioned. Potentially you could post the data via javascript without having 2 form tags.
Example taken from here, modified for your needs. Not 100% sure if this will work for you but I think this is how you'll have to approach it.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function postdata()
{
var fieldValue = document.getElementById("field1").value;
postwith("http://someothersite.com",{field1:fieldValue});
}
function postwith (to,p) {
var myForm = document.createElement("form");
myForm.method="post" ;
myForm.action = to ;
for (var k in p) {
var myInput = document.createElement("input") ;
myInput.setAttribute("name", k) ;
myInput.setAttribute("value", p[k]);
myForm.appendChild(myInput) ;
}
document.body.appendChild(myForm) ;
myForm.submit() ;
document.body.removeChild(myForm) ;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<input type="text" id="field1" name="field1" />
<asp:Button ID="btnSubmitSubscribe" runat="server" Text="Submit" OnClientClick="postdata(); return false;" />
</div>
</div>
</form>
</body>
</html>
If javascript is not a viable option - you can use .Net's HttpWebRequest object to create the post call in code behind. Would look something like this in the code behind (assuming your text field is an asp textbox:
private void OnSubscribeClick(object sender, System.EventArgs e)
{
string field1 = Field1.Text;
ASCIIEncoding encoding=new ASCIIEncoding();
string postData="field1="+field1 ;
byte[] data = encoding.GetBytes(postData);
// Prepare web request...
HttpWebRequest myRequest =
(HttpWebRequest)WebRequest.Create("http://someotherwebsite/");
myRequest.Method = "POST";
myRequest.ContentType="application/x-www-form-urlencoded";
myRequest.ContentLength = data.Length;
Stream newStream=myRequest.GetRequestStream();
// Send the data.
newStream.Write(data,0,data.Length);
newStream.Close();
}
If you add an ASP.NET button to the form, and set its PostBackUrl property to the external site, then all the form data will be posted to that URL.
There is a very nice tricky solution for this problem.
You can insert a </form> tag before your <form> to close the asp.net form which causes the problem. Do not forget to add a <form> tag after your html form. It may cause the editor to give you an exception, but do not worry, it will work.
Nested forms are not possible in HTML according to the W3C. You can achieve your intended result using JavaScript or with jQuery as explained by Peter on a blog called My Thoughts.
In my experience, Appetere Web Solutions has the best solution. Simple and elegant...and it's not a hack. Use the PostBackUrl.
I just tried it and everything works as expected. I didn't want to use Javascript because I didn't want to include it in my Master Page for every page that uses it.
I had the same situation as Ross - except that my input types were all of the "hidden" varitey.
Cowgod's answer got me thinking about nested forms within my .aspx page. I ended up "un-nesting" my 2nd form OUT of the main .aspx form ( ) and placed it (along with my js script tags) just under the body tag - but before the main .aspx form tag.
Suddenly, everything was submitting as it was supposed to. Is this a hack?
ASP.NET allows you to have multiple forms on one page, but only one can be runat=server. However I don't think you can nest forms at all.
You might have to make a new master page, one without a form tag on it so the form will work on that one page only. This is not a good solution, unless you can place the form outside the master pages' form, and use javascript to submit the second form, but that's hardly better. There really is no good solution for what you are trying to achieve, and if so I'd like to hear it. I don't think you can do a POST call from a code-behind, can you? I'm sure there's some way. But that's probably the only solution: from code.

Resources