I have an object in jquery:
function SaveRequest() {
var request = BuildSaveRequest();
$.ajax({
type: "POST",
processData: false,
data: JSON.stringify({'model':request}),
url: "somepage.aspx/JsonSave",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(response, status, xhr) {
},
error: function (res, status, exception) {
}
});
return false;
}
function BuildSaveRequest() {
var request = {
customerName: $("#CustomerName").val(),
contactName: $("#ContactName").val(),
};
return request;
}
And I have the following c# code:
[WebMethod]
public static string JsonSave(MyModel model)
{
}
}
public class MyModel
{
public string CustomerName { get; set; }
public string ContactName { get; set; }
}
When the ajax call goes, the web method JsonSave automatically place the values (CustomerName, & ContactName) from the jquery object 'request' into the appropriate properties in object 'model'. How does it know to do that???
Added answer from comments:
Model Binders are a beautiful thing.
I would recommend reading the source found here this is for MVC but I'm pretty sure it acts the same in webforms as well.
It is really smart and checks the in request for the data so it doesn't really matter if you use webforms or mvc. You can even create our own.
Related
I have an MVC controller which takes an int and a complex object
[HttpPost]
public async Task<JsonResult> AddComment(int ticketId, TicketReply ticketReply)
Even if I take out the object, I can't seem to pass a simple value. Here's what the AJAX call looks like
var dataObject = {
ticketId: ticketId //, ticketReply: { Attachements: attachements }
};
$.ajax({
url: $('#updateTicketURL').val(),
data: dataObject, //, //JSON.stringify(dataObject), //JSON.stringify(dataObject),
type: 'POST',
//dataType: 'JSON',
contentType: 'application/json',
success: function (data) {
console.log(data);
}
})
I have tried every combination of JSON.stringyfy etc. but I never seem to get the value. Even if I replace with static values it never seems to work.
You need an object model that matches the data being sent
public class DataObject {
public int ticketId { get; set; }
public TicketReply ticketReply { get; set; }
}
next you update the controller action to expect the data using the [FromBody] attribute so that the model binder can create and populate the sent data
[HttpPost]
public async Task<JsonResult> AddComment([FromBody]DataObject dataObject) {
int ticketId = dataObject.ticketId;
TicketReply ticketReply = dataObject.ticketReply;
//...
}
Finally you need to send the data correctly from the client.
var dataObject = {
ticketId: ticketId ,
ticketReply: { Attachements: attachements }
};
$.ajax({
url: $('#updateTicketURL').val(),
data: JSON.stringify(dataObject),
type: 'POST',
dataType: 'JSON',
contentType: 'application/json',
success: function (data) {
console.log(data);
}
});
I have a test js function that should post data to webapi by Post method
function test() {
var puffs = [];
var puffObject = {
id: "2735943",
priority: "1"
};
puffs.push(puffObject);
puffs.push(puffObject);
var dto =
{
po: puffs
};
$.ajax({
type: "POST",
url: "../api/PuffPriority/",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(dto),
dataType: "json",
success: function (data, status) {
if (data) {
console.log("Welcome");
} else {
console.log("No data");
}
},
error: function (error) {
console.log("Error");
}
});
}
In the controller class i have
public void Post(PuffPriority[] po){
//Do something here with po, but po is always empty
}
where PuffPriority Model is
public class PuffPriority
{
public string id { get; set; }
public string priority { get; set; }
}
I dont know whats wrong , the values are sent by JS but api Controller don't fetch it :( Please help, i have already wasted a lot of time.
You have a bug in your code.
Simply change
url: "../api/PuffPriority/"
to
url: "../api/Post/"
or change your method name from Post to PuffPriority
Changed
public void Post(PuffPriority[] po){
//Do something here with po, but po is always empty
}
To
[FromBody]List<PuffPriority> po{
//Do something here with po, but po is always empty
}
I am using jquery 1.8 to post data to ASP.Net 4 MVC 2 like this
PostData('Home/Login',{ "username": $("#username").val(),"password": $("#password").val()})
function PostData(url, data) {
$.ajax({
url: url,
data:data,
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
Success:successFunction, Error: ErrorFunction
});
};
My model
namespace FmsMvc.Models
{
public class UsersModel
{
public int UserID { get; set; }
public string Role { get; set; }
public string Email { get; set; }
public DateTime ts { get; set; }
public string Username { get; set; }
public string Password { get; set; }
}
}
My Controller
[HttpPost]
public JsonResult Login(UsersModel u)
{
if (doSomething(Prop1, Prop2)
return Json(null); // Success
return Json(new { Status:'success',Msg:" Your username"+u.username });
}
My controller does not get the data. It gets null when debugging.
what am i doing wrong?
NOTE
I deleted all the javascript in the Scripts folder, as I am using a custom script
Have you tried JSON.strinfigy-ing your data before POSTing?
function PostData(url, data) {
$.ajax({
url: url,
data:JSON.stringify(data),
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
Success:successFunction, Error: ErrorFunction
});
};
Try it like this:
var data = { "username": $("#username").val(),
"password": $("#password").val()
};
PostData('Home/Login',JSON.stringify(data));
You can use the JQuery .post() method which will parse the values for you
var url = '#Url.Action("Login", "Home")'; // beter to use this rather than hardcoding
var userName = `$("#username").val();
var password = $("#password").val();
$.post(url, { Username: userName, Password: password }, function(result) {
// do something with the result you returned from the action method
alert(result.Msg);
});
Note, only properties Username and Password will be set in the model. The other properties will be their default values.
After much debugging, i found the culprit
in my ajax function above i have this two line
contentType: 'application/json; charset=utf-8',
dataType:'json',
Somehow, this should not be. when i submitted the form with the two lines present, this is what i saw in chrome dev
But when i removed the line contentType: 'application/json; charset=utf-8', so that the $.ajax is now
$.ajax({ // create an AJAX call...
type: 'post', // GET or POST
url: url, // the file to call
dataType:'json',
data: data, // get the form data
Success:successFunction, Error: ErrorFunction
});
when i look in chrome dev after submit, i see this, which was not there before
I dont' know why this is the case, i will try in other browsers to see if it all works
I started switching things over to [WebMethod]s but started having trouble and decided I needed to do some more research on how to use them properly.
I put the following in $(document).ready()
$.ajax({
type: "POST",
data: "{}",
url: "http://localhost:3859/Default.aspx/ajxTest",
dataType: "json",
success: function (msg, status) {
alert(msg.name + " " + msg.value);
},
error: function (xhr, status, error) {
var somethingDarkside; //only to put a breakpoint in.
alert(xhr.statusText);
}
});
My [WebMethod]
[WebMethod]
public static string ajxTest()
{
JavaScriptSerializer ser = new JavaScriptSerializer();
DummyString dum = new DummyString("Please","Work");
string jsonString = ser.Serialize(dum);
return jsonString;
}
I never get "Please work". I get "undefined undefined" I'm able to debug in VS and the call enters the [WebMethod], the return string looks correct for JSON but I haven't been able to get a successful call out of it yet. I've got parse errors, transport errors. Everything is inconsistent but nothing has ever been right. I've had up to 47 different blogs, SO posts and google group tabs up today, I can't quite crack it.
The xhr.statusText status is OK as posted. I am getting a status parse error. I'm lost.
Thanks in advance.
EDIT: jQuery 1.9.1
EDIT2: DummyString object
public class DummyString
{
public string name { get; set; }
public string value { get; set; }
public DummyString(string n, string v)
{
name = n;
value = v;
}
}
EDIT 3: Also I have <asp:ScriptManager EnablePageMethods="true" ...
Simplify to:
$.ajax({
type: "POST",
url: "Default.aspx/ajxTest",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert('success');
},
error: function (data) {
alert('fail');
}
});
and
[WebMethod]
public static string ajxTest()
{
return #"{ ""hello"":""hola"" }";
}
and test. (the above will work)
Service return response in .d parameters try following
msg.d.name
Here's my jquery:
$.ajax({
type: 'GET',
url: '/services/Service.asmx/FamilyHistory',
data: JSON.stringify({
userID: 10,
historyID: famid
}),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(val) {
var famHist = val.d;
alert(famHist.ID);
},
error: function() {
parent.$.jGrowl('<b>Failed</b>',
{
header: 'User Action:',
life: 3000
});
}
});
My Class:
public sealed class FamilyHistoryEntity
{
public string ID { get; set; }
public string RelativeName { get; set; }
}
My Web service:
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public FamilyHistoryEntity FamilyHistory(int userID, string historyID)
{
return GetFamilyHistory(historyID, userID); // returns a FamilyHistoryEntity class
}
Problem is, i can't even make it do a breakpoint onto the webservice, it just throws the jquery ajax event of error.
Why are you using the stringify function? It would seem like it is looking to call a method with a string parameter rather than the two parameters you have for your method.
Maybe I am missing something?
EDIT: So you would change the data property to:
data: { userID: 10, historyID: famid },
Especially since you specify the contentType as json.