I want to pass value from view to controller by using ajax.
<button onclick="addCommentByAjax()" >Save</button>
My script:
function addCommentByAjax() {
$.ajax({
type: "POST",
url: '/Survey/DoDetailSurvey',
data: {
choiceId: "1"
}
});
}
Controller:
[HttpPost]
public ActionResult DoDetailSurvey(SurveyViewModel model, string choiceId)
{
//
}
but choiceId always null
Change couple of things.
First assign an id or class to your button.Second remove inline onclick function and use ajax click function.Then specify the request type as Post.
$('#btnComment').click(function () {
var choiceId = $('#YourChoiceId').val();
$.ajax({
url: '/Survey/DoDetailSurvey',
data: { 'choiceId' : choiceId},
type: "post",
cache: false,
success: function (response) {
//do something with response
},
error: function (xhr, ajaxOptions, thrownError) {
alert('error occured');
}
});
});
Then your controller should look like this
[HttpPost]
public ActionResult DoDetailSurvey(string choiceId)
{
//
}
I don't know how you are populating your viewmodel,so I purposely removed them and shown an working example.
In case you want to pass viewmodel you should construct your data object like this:
var data = {};
data.Property1 = some val;
data.Property2 = "some val";
$.post('/Survey/DoDetailSurvey', data);
Sample structure of SurveyViewModel I assume:
public class SurveyViewModel
{
public int Property1 { get; set; }
public string Property2 { get; set; }
}
Since there are two parameter in your controller, you need to identify them both form the client side. Further, you should specify the contentType.
You spread the payload like so:
function addCommentByAjax() {
var payload = {
model: {
// whatever properties you might have
},
choiceId: 1
};
$.ajax({
type: "POST",
url: '/Survey/DoDetailSurvey',
contentType: 'application/json',
data: JSON.stringify(payLoad)
});
}
function addCommentByAjax() {
$.ajax({
type: "POST",
url: '/Survey/DoDetailSurvey?choiceId=1'
}
});
}
You can also pass like this
or for more parameters
function addCommentByAjax() {
$.ajax({
type: "POST",
url: '/Survey/DoDetailSurvey?choiceId=1&Name=Arun'
}
});
}
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.
I´m having difficulties matching Javascript Ajax to ASP.NET Controller type. All parameters comes fine, except for the MsgData that comes null when received by the Controller.
My Controller classes and code:
public class AjaxMessage
{
public enum MsgStatusType : int { OK, NOK }
public string MsgType { get; set; }
public List<AjaxMessageItem> MsgData { get; set; }
public MsgStatusType MsgStatus { get; set; }
public string MsgStatusMsg { get; set; }
}
And
public class AjaxMessageItem
{
public string Name { get; set; }
public string Value { get; set; }
public AjaxMessageItem()
{
Name = String.Empty;
Value = String.Empty;
}
}
Finally:
public ActionResult Get(AjaxMessage ajaxMessage)
{
... do some stuff...
}
My Javascript call:
var url = '#Url.Action("Get", "AjaxServer")';
$.ajax({
url: url,
cache: false,
type: "POST",
data: {
'MsgType': 'MsgType1',
'MsgData': { 'Name': 'customerId', 'Value': 'current' },
'MsgStatus': 'OK',
'MsgStatusMessage' : ''
},
success: function (data) {
if (data.msgStatus != 'OK') {
var errorMsg = 'Error reading data.' + data.msgStatusMessage;
alert(errorMsg);
return;
}
... do some stuff...
}
},
error: function (data) {
alert('Error retrieving Ajax data.');
}
});
At controller, I´m getting MsgType, MsgStatus and MsgStatusMsg fine whan looking for ajaxMessage variable, but MsgData is always null and shall be receiving the customerId data.
I need some help to solve that. Please help me to find out what´s missing... Thanks.
Because you're sending an array, you will have to convert the object to JSON explicitly using JSON.stringify, wrap the MsgData in [] and set contentType: 'application/json, charset=utf-8'
$.ajax({
url: url,
cache: false,
type: "POST",
contentType: 'application/json, charset=utf-8',
data: JSON.stringify({
'MsgType': 'MsgType1',
'MsgData': [{ 'Name': 'customerId', 'Value': 'current' }],
'MsgStatus': 'OK',
'MsgStatusMessage' : ''
}),
success: function (data) {
if (data.msgStatus != 'OK') {
var errorMsg = 'Error reading data.' + data.msgStatusMessage;
alert(errorMsg);
return;
}
... do some stuff...
}
},
error: function (data) {
alert('Error retrieving Ajax data.');
}
});
your data is sent to server, but you cant get that correctly, you can check the network tab of your browser, or check data has been sent to server by something like this:
HttpUtility.UrlDecode(Request.Form.ToString())
i think the easiest way is always stringify your data, and deserializing that to your poco object on server
I'm trying to pass an array of objects into an MVC controller method using
jQuery's ajax() function. When I get into the PassThing() C# controller method,
the argument "things" is null. I've tried this using a type of List for
the argument, but that doesn't work either. What am I doing wrong?
<script type="text/javascript">
$(document).ready(function () {
var things = [
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'red' }
];
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: '/Xhr/ThingController/PassThing',
data: JSON.stringify(things)
});
});
</script>
public class ThingController : Controller
{
public void PassThing(Thing[] things)
{
// do stuff with things here...
}
public class Thing
{
public int id { get; set; }
public string color { get; set; }
}
}
Using NickW's suggestion, I was able to get this working using things = JSON.stringify({ 'things': things }); Here is the complete code.
$(document).ready(function () {
var things = [
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'red' }
];
things = JSON.stringify({ 'things': things });
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: '/Home/PassThings',
data: things,
success: function () {
$('#result').html('"PassThings()" successfully called.');
},
failure: function (response) {
$('#result').html(response);
}
});
});
public void PassThings(List<Thing> things)
{
var t = things;
}
public class Thing
{
public int Id { get; set; }
public string Color { get; set; }
}
There are two things I learned from this:
The contentType and dataType settings are absolutely necessary in the ajax() function. It won't work if they are missing. I found this out after much trial and error.
To pass in an array of objects to an MVC controller method, simply use the JSON.stringify({ 'things': things }) format.
Couldn't you just do this?
var things = [
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'red' }
];
$.post('#Url.Action("PassThings")', { things: things },
function () {
$('#result').html('"PassThings()" successfully called.');
});
...and mark your action with
[HttpPost]
public void PassThings(IEnumerable<Thing> things)
{
// do stuff with things here...
}
I am using a .Net Core 2.1 Web Application and could not get a single answer here to work. I either got a blank parameter (if the method was called at all) or a 500 server error. I started playing with every possible combination of answers and finally got a working result.
In my case the solution was as follows:
Script - stringify the original array (without using a named property)
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: mycontrolleraction,
data: JSON.stringify(things)
});
And in the controller method, use [FromBody]
[HttpPost]
public IActionResult NewBranch([FromBody]IEnumerable<Thing> things)
{
return Ok();
}
Failures include:
Naming the content
data: { content: nodes }, // Server error 500
Not having the contentType = Server error 500
Notes
dataType is not needed, despite what some answers say, as that is used for the response decoding (so not relevant to the request examples here).
List<Thing> also works in the controller method
Formatting your data that may be the problem. Try either of these:
data: '{ "things":' + JSON.stringify(things) + '}',
Or (from How can I post an array of string to ASP.NET MVC Controller without a form?)
var postData = { things: things };
...
data = postData
I have perfect answer for all this : I tried so many solution not able to get finally myself able to manage , please find detail answer below:
$.ajax({
traditional: true,
url: "/Conroller/MethodTest",
type: "POST",
contentType: "application/json; charset=utf-8",
data:JSON.stringify(
[
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'red' }
]),
success: function (data) {
$scope.DisplayError(data.requestStatus);
}
});
Controler
public class Thing
{
public int id { get; set; }
public string color { get; set; }
}
public JsonResult MethodTest(IEnumerable<Thing> datav)
{
//now datav is having all your values
}
The only way I could get this to work is to pass the JSON as a string and then deserialise it using JavaScriptSerializer.Deserialize<T>(string input), which is pretty strange if that's the default deserializer for MVC 4.
My model has nested lists of objects and the best I could get using JSON data is the uppermost list to have the correct number of items in it, but all the fields in the items were null.
This kind of thing should not be so hard.
$.ajax({
type: 'POST',
url: '/Agri/Map/SaveSelfValuation',
data: { json: JSON.stringify(model) },
dataType: 'text',
success: function (data) {
[HttpPost]
public JsonResult DoSomething(string json)
{
var model = new JavaScriptSerializer().Deserialize<Valuation>(json);
This is how it works fine to me:
var things = [
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'red' }
];
$.ajax({
ContentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: '/Controller/action',
data: { "things": things },
success: function () {
$('#result').html('"PassThings()" successfully called.');
},
error: function (response) {
$('#result').html(response);
}
});
With "ContentType" in capital "C".
This is working code for your query,you can use it.
Controler
[HttpPost]
public ActionResult save(List<ListName> listObject)
{
//operation return
Json(new { istObject }, JsonRequestBehavior.AllowGet); }
}
javascript
$("#btnSubmit").click(function () {
var myColumnDefs = [];
$('input[type=checkbox]').each(function () {
if (this.checked) {
myColumnDefs.push({ 'Status': true, 'ID': $(this).data('id') })
} else {
myColumnDefs.push({ 'Status': false, 'ID': $(this).data('id') })
}
});
var data1 = { 'listObject': myColumnDefs};
var data = JSON.stringify(data1)
$.ajax({
type: 'post',
url: '/Controller/action',
data:data ,
contentType: 'application/json; charset=utf-8',
success: function (response) {
//do your actions
},
error: function (response) {
alert("error occured");
}
});
I can confirm that on asp.net core 2.1, removing the content type made my ajax call work.
function PostData() {
var answer = [];
for (let i = 0; i < #questionCount; i++) {
answer[i] = $(`#FeedbackAnswer${i}`).dxForm("instance").option("formData");
}
var answerList = { answers: answer }
$.ajax({
type: "POST",
url: "/FeedbackUserAnswer/SubmitForm",
data: answerList ,
dataType: 'json',
error: function (xhr, status, error) { },
success: function (response) { }
});
}
[HttpPost]
public IActionResult SubmitForm(List<Feedback_Question> answers)
{}
Wrapping your list of objects with another object containing a property that matches the name of the parameter which is expected by the MVC controller works.
The important bit being the wrapper around the object list.
$(document).ready(function () {
var employeeList = [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'John' },
{ id: 3, name: 'Tom' }
];
var Employees = {
EmployeeList: employeeList
}
$.ajax({
dataType: 'json',
type: 'POST',
url: '/Employees/Process',
data: Employees,
success: function () {
$('#InfoPanel').html('It worked!');
},
failure: function (response) {
$('#InfoPanel').html(response);
}
});
});
public void Process(List<Employee> EmployeeList)
{
var emps = EmployeeList;
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
}
var List = #Html.Raw(Json.Encode(Model));
$.ajax({
type: 'post',
url: '/Controller/action',
data:JSON.stringify({ 'item': List}),
contentType: 'application/json; charset=utf-8',
success: function (response) {
//do your actions
},
error: function (response) {
alert("error occured");
}
});
Removing contentType just worked for me in asp.net core 3.1
All other methods failed
If you are using ASP.NET Web API then you should just pass data: JSON.stringify(things).
And your controller should look something like this:
public class PassThingsController : ApiController
{
public HttpResponseMessage Post(List<Thing> things)
{
// code
}
}
Modification from #veeresh i
var data=[
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'red' }
]; //parameter
var para={};
para.datav=data; //datav from View
$.ajax({
traditional: true,
url: "/Conroller/MethodTest",
type: "POST",
contentType: "application/json; charset=utf-8",
data:para,
success: function (data) {
$scope.DisplayError(data.requestStatus);
}
});
In MVC
public class Thing
{
public int id { get; set; }
public string color { get; set; }
}
public JsonResult MethodTest(IEnumerable<Thing> datav)
{
//now datav is having all your values
}
What I did when trying to send some data from several selected rows in DataTable to MVC action:
HTML
At the beginning of a page:
#Html.AntiForgeryToken()
(just a row is shown, bind from model):
#foreach (var item in Model.ListOrderLines)
{
<tr data-orderid="#item.OrderId" data-orderlineid="#item.OrderLineId" data-iscustom="#item.IsCustom">
<td>#item.OrderId</td>
<td>#item.OrderDate</td>
<td>#item.RequestedDeliveryDate</td>
<td>#item.ProductName</td>
<td>#item.Ident</td>
<td>#item.CompanyName</td>
<td>#item.DepartmentName</td>
<td>#item.ProdAlias</td>
<td>#item.ProducerName</td>
<td>#item.ProductionInfo</td>
</tr>
}
Button which starts the JavaScript function:
<button class="btn waves-effect waves-light btn-success" onclick="ProcessMultipleRows();">Start</button>
JavaScript function:
function ProcessMultipleRows() {
if ($(".dataTables_scrollBody>tr.selected").length > 0) {
var list = [];
$(".dataTables_scrollBody>tr.selected").each(function (e) {
var element = $(this);
var orderid = element.data("orderid");
var iscustom = element.data("iscustom");
var orderlineid = element.data("orderlineid");
var folderPath = "";
var fileName = "";
list.push({ orderId: orderid, isCustomOrderLine: iscustom, orderLineId: orderlineid, folderPath: folderPath, fileName : fileName});
});
$.ajax({
url: '#Url.Action("StartWorkflow","OrderLines")',
type: "post", //<------------- this is important
data: { model: list }, //<------------- this is important
beforeSend: function (xhr) {//<--- This is important
xhr.setRequestHeader("RequestVerificationToken",
$('input:hidden[name="__RequestVerificationToken"]').val());
showPreloader();
},
success: function (data) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
},
complete: function () {
hidePreloader();
}
});
}
}
MVC action:
[HttpPost]
[ValidateAntiForgeryToken] //<--- This is important
public async Task<IActionResult> StartWorkflow(IEnumerable<WorkflowModel> model)
And MODEL in C#:
public class WorkflowModel
{
public int OrderId { get; set; }
public int OrderLineId { get; set; }
public bool IsCustomOrderLine { get; set; }
public string FolderPath { get; set; }
public string FileName { get; set; }
}
CONCLUSION:
The reason for ERROR:
"Failed to load resource: the server responded with a status of 400 (Bad Request)"
Is attribute: [ValidateAntiForgeryToken] for the MVC action StartWorkflow
Solution in Ajax call:
beforeSend: function (xhr) {//<--- This is important
xhr.setRequestHeader("RequestVerificationToken",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
To send List of objects you need to form data like in example (populating list object) and:
data: { model: list },
type: "post",
Nothing worked for me in asp.net core 3.1. Tried all the above approaches.
If nothing is working and someone is reading the rows from table
and wanted to pass it to Action method try below approach...
This will definitely work...
<script type="text/javascript">
$(document).ready(function () {
var data = new Array();
var things = {};
// make sure id and color properties match with model (Thing) properties
things.id = 1;
things.color = 'green';
data.push(things);
Try the same thing for dynamic data as well that is coming from table.
// var things = [ { id: 1, color: 'yellow' }, { id: 2, color: 'blue' }, { id: 3, color: 'red' } ];
$.ajax({
contentType: 'application/json;',
type: 'POST',
url: 'your url goes here',
data: JSON.stringify(things)
});
});
</script>
public class ThingController : Controller
{
public void PassThing([FromBody] List<Thing> things)
{
// do stuff with things here...
}
public class Thing
{
public int id { get; set; }
public string color { get; set; }
}
}
The way that worked for me
$.ajax({
url: '#Url.Action("saveVideoesCheckSheet", "checkSheets")',
type: "POST",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: "data=" + JSON.stringify(videos),
success: function (response) {
window.location.reload(true);
},
failure: function (msg) {
}
});
});
Controller
public string saveVideoesCheckSheet(string data)
{
List<editvideo> lst = JsonConvert.DeserializeObject<List<editvideo>>(data);...}
After much experimentation, bit of a cheat.