Originally, I was passing one parameter to my MVC Controller via Ajax and it was working correctly. The parameter data was being received without any problems. However, I now need to pass an extra parameter and when I do this, neither parameter is sending data to the Controller? Thanks!
Ajax Code:
function uploadFile() {
var fileData = new FormData($(form1)[0]); //THIS IS A FILE UPLOAD
var details = JSON.stringify(markers); //MARKERS IS AN ARRAY
$.ajax({
url: '../Home/FilePost',
type: 'Post',
success: function (result) {
var newWindow = window.open('LasView?fileName=' + result, "", "new window");
},
error: function (xhr, status, error) {
alert(xhr.responseText);
},
xhr: function () { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { // Check if upload property exists
// TODO...
}
return myXhr;
},
error: function () { },
data: { filePost: fileData, googleMarkers: details },
cache: false,
contentType: false,
processData: false
});
}
My Controller:
[HttpPost]
public string LasPost(HttpPostedFileBase filePost, string googleMarkers){
return something;
}
My Array:
var markerObject = {
lat: marker.position.lat(),
lng: marker.position.lng()
};
markers.push(markerObject);
You cannot mix FormData and objects. You must .append() each name/value pair to the FormData instance.
Because you stringified your array, and are binding to a string googleMarkers parameter, then your code would need to be
function uploadFile() {
var fileData = new FormData($(form1)[0]); //THIS IS A FILE UPLOAD
var details = JSON.stringify(markers); //MARKERS IS AN ARRAY
fileData.append('googleMarkers', details); // append the name/value pair
$.ajax({
....
data: fileData, // send only the FormData instance
....
});
})
However you should be taking advantage of MVC's model binding features and posting data which binds to a model representing your coordinates, for example
public class Coordinate
{
public double Latitude { get; set; }
public double Longitude { get; set; }
}
and the POST method would then be
[HttpPost]
public string LasPost(HttpPostedFileBase filePost, IEnumerable<Coordinate> googleMarkers)
and to send that data
var fileData = new FormData($(form1)[0]);
for(var i = 0; i < markers.length; i++)
{
fileData.append('[' + i + '].Latitude', markers[i].lat);
fileData.append('[' + i + '].Longitude', markers[i].lng);
}
$.ajax({
....
data: fileData,
....
});
Related
This is my Jquery! Here i am not getting success response, instead a error response is thrown when a list is returned from controller to below jquery. Please let me know where i am going wrong.
//ajax method to retrieve the data from controller where controller returns list
function doAjaxPost() {
// get the form values
var pid = $('#pid').val();
$.ajax({
type: "GET",
url: "http://localhost:8085/HMS/iochart1.html",
data: "pid=" + pid,
success: function (response) {
alert(response.list4);
$.each(response, function (index, datec) {
alert(datec.name); //to print name of employee
});
},
// Even though controller returns the list,but i am not getting the above success response,instead below error method is executed.
error: function (e) {
alert('Error: ' + e);
}
});
}
Below is the controller which returns the list.
#RequestMapping(value="/iochart1", method = RequestMethod.GET)
public #ResponseBody List<Iochart> iochart1(#ModelAttribute("s") Iochart s) {
System.out.println("Patient"+s.getPid());
List<Iochart> list4 = dao.getPatientdet1(s.getPid());
return list4;
}
getPatientdet1() which retrieves the data from database
public List<Iochart> getPatientdet1(String pid) {
// TODO Auto-generated method stub
System.out.println(pid);
return template.query(
"select pid,name,fileno,age,gender,date,wardno,doctord,doctsig,ratef,nursesig,time,type,amount,typecommence,amtgiv,urine,vomitus,remarks from iochart where pid='"+pid+"'",
new RowMapper<Iochart>() {
public Iochart mapRow(ResultSet rs, int row) throws SQLException {
Iochart i = new Iochart();
i.setPid(rs.getString(1));
i.setName(rs.getString(2));
i.setFileno(rs.getString(3));
i.setAge(rs.getString(4));
i.setGender(rs.getString(5));
i.setAdmdate(rs.getString(6));
i.setWardno(rs.getString(7));
i.setDoctord(rs.getString(8));
i.setDoctsig(rs.getString(9));
i.setRatef(rs.getString(10));
i.setNursesig(rs.getString(11));
i.setTime(rs.getString(12));
i.setOraltype(rs.getString(13));
i.setOralamt(rs.getString(14));
i.setOralcommence(rs.getString(15));
i.setAmtgiv(rs.getString(16));
i.setUrine(rs.getString(17));
i.setVomitus(rs.getString(18));
i.setRemarks(rs.getString(19));
System.out.println(rs.getString(2));
return i;
}
}
);
}
Change your controller method like so. Mind the #RequestParam that is used to get the pid
#RequestMapping(value="/iochart1", method = RequestMethod.GET)
public #ResponseBody List<Iochart> iochart1(#RequestParam(name = "pid") String pid) {
return dao.getPatientdet1(pid);
}
And your ajax url like so
function doAjaxPost() {
// get the form values
var pid = $('#pid').val();
$.ajax({
type: "GET",
url: "http://localhost:8085/HMS/iochart1", //Don't postfix .hmtl
data: "pid=" + pid,
...
});
}
I have some data and files that should be posted in one same AJAX request. Tried some solutions but I always get null in the controller (files are sent fine and when I change Tester class to simple string it also works).
My JS:
function sendAjaxWithFile (formData, successCallback, errorCallback) {
successCallback = successCallback || function () { };
errorCallback = errorCallback || function () { };
$.ajax({
url: "/Test/Save",
type: "POST",
data: formData,
cache: false,
processData: false,
contentType: false,
success: successCallback,
error: errorCallback
});
}
var data = new FormData();
data.append("tester", { Name: "QWERTY" });
data.append("someFile", file);
$scope.sendAjaxWithFile(data, function (response, textStatus, jqXHR) {
}, function (jqXHR, textStatus, errorThrown) {
});
And the server side code:
[AjaxOnly]
[HttpPost]
[Route("Save")]
public async Task<JsonResult> Save(Tester tester, HttpPostedFileBase someFile)
{
return await Task.FromResult(Json(0));
}
Tester class:
public class Tester
{
public string Name { get; set; }
public DateTime Date { get; set; }
}
I did a workaround, because I don't think it can be resolved in a normal way...
My solution is to send string data which is serialized from my JS object.
data.append("serializedJsonString", JSON.stringify({ Name: "QWERTY" })); // I can serialize what I want to
I needed to change the parameter of my Save method to get JSON string data and convert it into Tester class manually:
[AjaxOnly]
[HttpPost]
[Route("Save")]
public async Task<JsonResult> Save(string serializedJsonString, HttpPostedFileBase someFile)
{
var decodedJson = HttpUtility.UrlDecode(serializedJsonString);
var jTester = JObject.Parse(decodedJson);
var tester = new Tester { Name = jTester["Name"].ToString() };
return await Task.FromResult(Json(0));
}
What I have:
A Model like this:
public class ProductModel
{
public string ProductName { get; set; }
public List<string> SkipUpdates { get; set; }
}
A controller method like this:
public ActionResult GetProductUpdates(ProductModel productModel)
{
return View("AddEdit");
}
Not doing anything for now just want to make sure that data from JS comes in correctly.
The JS:
function productModel() {
this.productName = "";
this.SkipUpdates = [];
}
Filling the model and AJAX:
var newProductModel = new productModel();
var options = $('#AdditionalSkipDates option');
var skipDates = [];
options.each(function (i, option) {
skipDates[i] = $(option).text();
});
newProductModel.productName = "ABC";
newProductModel.SkipUpdates = skipDates;
$.ajax({
type: "GET",
url: urlToGetProductSchedule,
data: newProductModel,
dataType: "json"
}).success(function () {
}).fail(function (xhr) {
alert("Something went wrong!!!");
console.log(xhr.responseText);
});
AdditonalSkip dates is a listbox with a bunch of dates in it.
What's happening:
The SkipUpdates array does have values which I can see in the browser's console.
Put a breakpoint in the controller and it hits the method.
The SkipUpdates value is null.
What's not happening:
How do I get the array to come-into the controller?
Thanks in advance.
Try to stringify the object before sending it:
$.ajax({
type: "GET",
url: urlToGetProductSchedule,
data: JSON.stringify(newProductModel),
dataType: "json"
}).success(function () {
}).fail(function (xhr) {
alert("Something went wrong!!!");
console.log(xhr.responseText);
});
My ajax call fails with the message in question.
[WebMethod(EnableSession = true)]
public static string UpdateTotalPrice(List<TicketPriceAjax> jsonTickets)
{
// some server-side processing
return "a string value";
}
The object Iʻm trying to pass
public class TicketPriceAjax
{
public string Fullname { get; set; }
public string Price { get; set; }
public string TicketDescription { get; set; }
}
My javascript which gets invoked on a change event
$("select.combobox").change(function(e) {
var ticketsArray = GetTicketsArray();
postTotalPrice(ticketsArray);
});
function GetTicketsArray() {
var tickets = {};
var prices = [];
tickets.prices = prices;
$("#divFullNames div.row").each(function () {
var price = {
"Fullname": $(this).find("input").val(),
"Price": $(this).find("select").val(),
"TicketDescription": $(this).find(":selected").text()
};
tickets.prices.push(price);
});
return tickets;
};
function postTotalPrice(prices) {
$.ajax({
type: "POST",
url: "Details.aspx/UpdateTotalPrice",
data: JSON.stringify(prices),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data) {
UpdateTotalPrice(data);
},
error: function(data, textStatus, jqXHR) {
console.log('error!', data, textStatus, jqXHR);
}
});
};
What am I doing wrong?
Change data part to this
data: JSON.stringify({jsonTickets:prices})
Your webmethod expects a parameter with name jsonTickets so you need to specify parameter name in data part.
Also you do not need to assign tickets.prices simply create an array and push objects in it and pass it to webmethod.This way you are creating a list and than assigning list to its property prices and in webmethod you are expecting a list.
var tickets = [];
$("#divFullNames div.row").each(function () {
var price = {
"Fullname": $(this).find("input").val(),
"Price": $(this).find("select").val(),
"TicketDescription": $(this).find(":selected").text()
};
tickets.push(price);
This will pass list to webmethods.
Here is the javascript code I use to create the array and send it on it's way:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#update-cart-btn").click(function() {
var items = [];
$(".item").each(function () {
var productKey = $(this).find("input[name='item.ProductId']").val();
var productQuantity = $(this).find("input[type='text']").val();
items[productKey] = productQuantity;
});
$.ajax({
type: "POST",
url: "#Url.Action("UpdateCart", "Cart")",
data: items,
success: function () {
alert("Successfully updated your cart!");
}
});
});
});
</script>
The items object is properly constructed with the values I need.
What data type must my object be on the backend of my controller?
I tried this but the variable remains null and is not bound.
[Authorize]
[HttpPost]
public ActionResult UpdateCart(object[] items) // items remains null.
{
// Some magic here.
return RedirectToAction("Index");
}
If you are going to send JSON to the server you need to JSON.stringify the data and specify the contentType as application/json to play nice with the MVC3 model binder:
$.ajax({
type: "POST",
url: "#Url.Action("UpdateCart", "Cart")",
data: JSON.stringify(items),
success: function () {
alert("Successfully updated your cart!");
},
contentType: 'application/json'
});
And as the datatype on the server you can use strongly typed classes eg:
public class Product
{
public int ProductKey { get; set; }
public int ProductQuantity { get; set; }
}
[HttpPost]
public ActionResult UpdateCart(Product[] items)
{
// Some magic here.
return RedirectToAction("Index");
}
But you need to tweak the items list a bit:
var items = [];
$(".item").each(function () {
var productKey = $(this).find("input[name='item.ProductId']").val();
var productQuantity = $(this).find("input[type='text']").val();
items.push({ "ProductKey": productKey, "ProductQuantity": productQuantity });
});
Basically the JSON object structure should match the C# model class structure (also the property name should match) and then the model binder in MVC takes care to populate your server side models with the JSON data that you've sent. You can read more about model binders here.