Develop Reference

Call Authenticated action method from Webform

I have implemented one MVC application with Basic implementation as per this
Now when I call this action method from my Webform application using AJAX, it did not asking for credentials and throwing an 401 error.
This is my ajax function:
function testSS()
{
$.ajax({
url: 'http://localhost:52099/Controller/Sample',
type: 'GET',
success: function (result) {
$("#ctl00_cphPageContent_SSlbl12").val(result);
},
error: function (xhr) {
alert(xhr);
}
});
}
How can I call authenticated method from webform project?
Thanks!

In order to make this work, you need to add an Authorization header, containing base64-encoded login and password.
To encode base 64, you can use btoa()
var authHeader = window.btoa("login:password");
Now, you can add this header (see $.ajax documentation)
$.ajax({
url: 'http://localhost:52099/Controller/Sample',
headers: { Authorization: authHeader },
type: 'GET',
success: function (result) {
$("#ctl00_cphPageContent_SSlbl12").val(result);
},
error: function (xhr) {
alert(xhr);
}
});
Please note this will not be very secure, because login/password are known from the client, and sent in an easily readable way, so very easy to be found by an attacker.
If the webform page and MVC action are in the same project, and the user is ogged on your website, you should probably use the asp.net [Authorize] attribute instead : it will check the auth cookie, and not rely on a login/password, it's much more secure.

JSON data POST to Web API works in Fiddler but "Not Found" error from JQuery AJAX

my stuff works fine with Fiddler and I get desired result. But when i do it on web page thru JQuery AJAx, it says "Not Found". I am struggling since sometime but couldn't get around.
My Controller method is like this
[Route("AddDonors/")]
[HttpPost]
public dynamic addDonors(localDonor localDonor)
{
return localDonor;
}
This is how i am calling from web page
var userInput = { 'FullName': 'Lakshman', 'Mobile': '9924210053' };
$.ajax({
type: "POST",
url: "/AddDonors",
data: userInput,
error: function (result) {
alert(result);
},
datatype: "json"
});
this is the model class
public class localDonor
{
public String FullName { get; set; }
public String Mobile { get; set; }
}
API registering and other settings are just fine since this works in fiddler.
Please help. Thanks.

I strongly suspect that the url in your AJAX request is to blame (404 - Not Found) the request can't be routed to a controller for processing.
Without knowing what your full controller looks like and if you have a RoutePrefixAttribute on this specific controller I can't say what the url should be.
I would suggest you monitor network traffic in your browser developer tools (press F12) and compare the request url for your failing POST request to those of your successful requests in Fiddler
If your webpage is created in ASP.Net MVC as part of the same web project you may want to generate the url server side in future see Construct url in view for Web Api with attribute routing. The #Url helper is only available within your .cshtml files though so you will not be able you shift your JavaScript code to a separate .js file.

i was able to solve the issue by changing the url to url: "AddDonors",

Try to put [WebMethod] attribute.
[Route("AddDonors/")]
[HttpPost]
[WebMethod]
public dynamic addDonors(localDonor localDonor)
{
return localDonor;
}
Hope this works!

Try this for your POST data
var userInput = JSON.stringify({ 'FullName': 'Lakshman', 'Mobile': '9924210053' }),

I had the same error.
As you are using ASP.NET, try making all AJAX calls using the #Url.Action helper.I don't know why, but in some situations in ASP.NET passing the URL as a String doesn't work.And try passing your data like the code belowYour modified code should look something like this:
$.ajax({
type: "POST",
url: "#Url.Action("AddDonors", "ControllerName")",
data: { localDonor: userInput },
error: function (result) {
alert(result);
},
datatype: "json"
});

How does ASP.NET MVC Data Binding work without reloading webpage?

I've just started using ASP.NET MVC 4.0 to build a web application. I've been through the tutorials that explain and demonstrate View/Controller/Models, but now I'm wanting to go a step further.
Instead of having all of my pages constantly reload as users interact with my application, i'd like to learn how to make async calls to the server side to load data.
A great example of what I would like to learn how to implement is:
http://demo.aspnetawesome.com/AjaxDropdownDemo/Index
The Drop Downs are bound to each other, and the page never refreshes. Does anyone have some suggestions on where I can go to learn how to begin learning this? Also, since I am using MVC how can I use Model Binding to help make it more simple?

To Make and async calls to your action you can make ajax call as follows
Jquery Code:
var AsyncCall = function () {
$.ajax({
type: "POST",
url: "Home/Index",
data: JSON.stringify(yourData),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
// Success implementation
},
error: function () {
}
});
};
In Controller :
[HttpPost]
public ActionResult Index(DataType model)
{
// Implementation
return View(model);
}

jquery ajax call return value

I have an asp.net application with a static page method. I'm using the below codes to call the method and get its returned value.
$.ajax({
type: "POST",
url: "myPage/myMethod",
data: "{'parameter':'paramValue'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {alert(result);}
});
What i got returned is [object Object].
Below is my static method. And I also have EnablePageMethods="true" EnablePartialRendering="true" in my ScriptManager.
[WebMethod]
[ScriptMethod]
public static string myMethod(string parameter)
{
return "Result";
}
Is there a way for me to get the returned value?

Try using Chrome developer tools or the firebug plugin from Firfox. Not sure if IE's developer tools lets you inspect the ajax calls?
The resulting string you are looking for is actually within the result object. You need to look at the d variable. I remember reading somewhere why this was, I think it is ASP.NET playing around :|
Try:
success: function(data) {alert(data.d);}
c#
[WebMethod]
public static string GetTest(string var1)
{
return "Result";
}
Hope this helps.

Its just that you are stuck at the .d that is introduced in the JSON response from ASP.NET 3.5. To quote Dave Ward,
If you aren’t familiar with the “.d”
I’m referring to, it is simply a
security feature that Microsoft added
in ASP.NET 3.5’s version of ASP.NET
AJAX. By encapsulating the JSON
response within a parent object, the
framework helps protect against a
particularly nasty XSS vulnerability.
So just check whether .d exists and then unwrap it. Change your success function like this.
success: function(result) {
var msg = result.hasOwnProperty("d") ? result.d : result;
alert(msg );
}

What about this?
$.ajax({
type: "POST",
url: "myPage/myMethod?paramater=parameter",
success: function(result) {
alert(result);
}
});

I found out the solution.
You can use parseJSON to get the result
http://api.jquery.com/jQuery.parseJSON/
or change the datatype to html to see the actual value.
http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests
Thank you guys for your help.

Getting Better Error Message From ASP.Net [WebMethod] Called From JQuery

[NOTE:I am really looking for some good debugging techniques here. Perhaps some tricks or ways to simplify things of which I am unaware.]
I am using the technique of calling [WebMethods] defined in an ASPX page from JQuery as mentioned here and here. It seems to be an increasingly common method.
I've been using it for a while and, in general, it works great. But while developing it is pretty fragile. Any incorrect parameter will result in a really vague, non-specific, error message. For instance, if I have a fairly complex web method defined as:
[WebMethod]
public static string SaveComplexRecord(int recID, GeneralData general, SomeObject data, SomeOtherObject moreData)
{
//do a bunch of stuff with that data
}
And GeneralData, SomeObject, and SomeOtherObject all have a mix of various types of parameters (strings, ints, bools, datetimes.) It is very likely, especially during initial development, that I will build the JSON on the client side incorrectly. Perhaps I will do this:
var data = {
recID: curID,
general:
{
a: aValue,
b: bValue,
c: cValue
},
data:
{
d: dValue,
e: eValue,
f: fValue
},
moredata:
{
g: gValue,
h: hValue,
i: iValue
}
};
Which will result in an error because the name of the third parameter is moreData, not moredata. And that's just an example, there could be any of a hundred other subtle typo-style errors.
If I were calling this method from C# the compiler would give me an error message something like "No overloaded method of SaveComplexRecord takes three parameters." or some other helpful message that points you in the right direction.
So... is there a way of getting ASP.Net to produce better error messages here?
Or is there some utility that will automatically build the JSON parameter structure of a [WebMethod] call? (just like you can automatically get the WSDL of a web service)
...or any other technique that I may be missing?
And for completeness here is how I call these WebMethods from JQuery:
var jsondata = $.toJSON(data);
$.ajax({
type: "POST",
url: "MyWebPage.aspx/SaveComplexRecord",
data: jsondata,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function(xhr)
{
xhr.setRequestHeader("Content-type",
"application/json; charset=utf-8");
},
success: function(msg)
{
//do something on success
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("ERROR status:" + textStatus + " error:" + errorThrown);
}
});

Or is there some utility that will automatically build the JSON parameter structure of a [WebMethod] call? (just like you can automatically get the WSDL of a web service)
Yes! The ASP.Net AJAX framework can do this! You could get the framework to generate client side proxy classes for GeneralData, SomeObject and SomeOtherObject classes using the 'GenerateScriptType' attribute on a web service class.
See understanding asp net ajax web servcies for a very good article about the subject.
[Unfortunately, AFAIAA, the GenerateScriptType has no effect when applied to the Page class where your page method is defined - so you will have to add an .asmx purely to get the proxy generation.]
You could perhaps use these classes to build up the data structure that you then JSON stringify when you call .ajax? [One of (the very few) things I really like about the MS AJAX framework is the client side proxy generation: it really does make calling web services and page methods very easy. Having said that, I too am moving towards using jQuery in preference to MS AJAX.]
Or alternatively...
Your problem is really that the de-serialisation of the JSON data into the arguments of your page method is done transparently by the framework (which in most cases is a good thing) but when it goes wrong, the feedback you get is less-than-helpful. If you want to trap de-serialisation problems then I think you have to take control of the serialisation either by using custom JSON converters (see here) or by using the rather inelegant sledgehammer approach of having your method accept a string and de serializing the JSN yourself in the method - which is trivial with anyone of the numerous JSON libs out there.

Javascript is dynamically typed so you can't get a compile-time error. But you could use the old window.onerror + ajax trick (or send the error via ajax in the error callback of jQuery.ajax()), and once you're in the server you can treat it just like any other runtime error (throw an exception, log the error, whatever)

From a jQuery standpoint, your problem is in the error function declaration. Only take one input parameter, and that will have all properties of the error, then you can debug more easily.
If the problem is server side, catch the error there, and create return json containing the error message.
Oh, and if you DO want to check your javascript at compile time, I recommend the add-in from jslint.com.
So:
$.ajax({
type: "POST",
url: "MyWebPage.aspx/SaveComplexRecord",
data: jsondata,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function(xhr)
{
xhr.setRequestHeader("Content-type",
"application/json; charset=utf-8");
},
success: function(msg)
{
//do something on success
},
error: function(err)
{
alert(e.message);
}
});

What I do when returning JSON from a web service is have an object called "ret" containing an attribute "err" as well as the attribute "data" containing the result of the service call. Inside the web service I trap any exceptions and put the exception message on the "err" attribute. Then in the client I check for the "err" attribute being non empty, if it is I know that an error occurred.