Develop Reference

How to pass data from a controller to view during a JQuery AJAX call in MVC?

In my view, I have an AJAX call which sends an id parameter to my controller. This bit works fine. In my controller, I plan to query the database with that id, pull out associated data and want to send this back to the AJAX call/view. This is the bit I am struggling with, as I am new to AJAX calls.
var chosenSchoolID = $("#SelectedSchoolId").val();
$.ajax({
url: "/Home/GetSchoolDetailsAJAX",
type: "POST",
data: {
schoolID: chosenSchoolID
},
dataType: "text",
success: function(data) {
if (data == "success") {
}
},
error: function(data) {
if (data == "failed")
alert("An error has occured!");
}
});
The above is my AJAX call, and this does hit my controller method. However in my controller, I want to now send back other string data and I am unsure on how to do this (just placeholder code currently)
[HttpPost]
public ActionResult GetSchoolDetailsAjax(string schoolID)
{
// query database using schoolID
// now we have other data such as:
string SchoolName = "";
string SchoolAddress = "";
string SchoolCity = "";
return null;
}
Must I declare variables in my Jquery and pass into the data parameter of the AJAX call in order for the values to be passed?
Many thanks in advance

The simplest way to do this is to return the entities retrieved from your database using return Json() from your controller.
Note that when retrieving data then a GET request should be made, not a POST. In addition the default MVC configuration should have the routes setup to allow you to provide the id of the required resource in the URL. As such, try this:
$.ajax({
url: "/Home/GetSchoolDetailsAJAX/" + $("#SelectedSchoolId").val(),
type: "get",
success: function(school) {
console.log(school);
},
error: function() {
alert("An error has occured!");
}
});
[HttpGet]
public ActionResult GetSchoolDetailsAjax(string id) {
var school = _yourDatabaseContext.Schools.Single(s => s.Id == id); // assuming EF
return Json(school);
}
If you'd like to test this without the database integration, amend the following line:
var school = new {
Id = id,
Name = "Hogwarts",
Address = "Street, City, Country"
};

+how to pass data from ajax to controller mvc 5

I have a view that has an html form. This form posts data to two entities.The first entity is in a one-to-many relationship with the other.
This form has an html table where the user can add as many rows as needed. Then on submitting the form, data of form will be posted to entity1 and data inserted in the html table should be collected and added to entity2, that has a many-to-one relationship with entity1.
I collected data inserted by user in html table as a js array of objects
and tried to send this as ajax to post action in the controller on form submission.
I had an error:
[The required anti-forgery form field "__RequestVerificationToken" is not present]
So I passed token in header and added authorization filter to post action
data sent from ajax is not null, but it is received in controller as null.
How can I solve this?
cols.push("DIGITAL_FILE_TYPE_ID");
cols.push("DOCUMENT_LAPI_ID");
var digitalMapRows = [];
$("table#digital-map-table tbody tr").each(function () {
data = {};
var selectedDigitalMapVal =
$(this).data("selectedDigitalMapVal");
data[cols[0]] = selectedDigitalMapVal;
var documentId = $(this).data("documentID");
data[cols[1]] = documentId.toString();
digitalMapRows.push(data);
data = {};
});
var headers = { __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val() };
if (digitalMapRows != null) {
$.ajax({
headers: headers,
url: "#Url.Action("Initiate")",
type: "POST",
cache: false,
data: JSON.stringify(digitalMapRows),
dataType: "json",
success: function (succ) {
console.log(succ);
},
error: function (err) {
console.log(err.statusText);
}
});
}
And this is the post action I'm posting to from ajax. Should my data be included in viewmodel rather than a separate argument? Hence data passed in this argument won't be filled in all cases.
[HttpPost]
//[ValidateAntiForgeryToken]
[ValidateHeaderAntiForgeryToken]
public ActionResult Initiate(SODViewModel vm,
IEnumerable<DIGITAL_MAPS> digitalMapRows)
{
//digitalMapRows returns as null

Update List in ViewModel with Ajax ASP .NET MVC

I have a List (List) of Model objects which is presented in a view. I would like to add to that list without refreshing the page - therefore i thought Ajax is a great soloution. Im currently having a hard time getting it working.
My view is rendering a PartialView which contains the list.
Can somebody give me a hint how to pass a list to the controller and then back to the view without updating the whole page?
I hope my question makes sense.
/chris
EDIT:
I've been trying with JQuery. Looks like this:
<script>
$(document).ready(function () {
$("#btnSave").click(function () {
$.ajax(
{
type: "POST", //HTTP POST Method
url: "/Video/Index", // Controller/View
data: { //Passing data
testString: $("#txtArea").val(),
videoID: '#(Model.Video.iVideo_ID)',
taskID: document.getElementById('dropVal').value
}
}).success(function () {
$("#proever").load("/Video/Index");
});
})
})
With this method i get to HttpPost method in my controller. And i pass the parameters into it succesfully.
[HttpPost]
public ActionResult Index(CommentViewModel viewModel)
{
System.Diagnostics.Debug.WriteLine(viewModel.testString);
System.Diagnostics.Debug.WriteLine(viewModel.videoID);
System.Diagnostics.Debug.WriteLine(viewModel.taskID);
viewModel.testString = "new text string";
return View(viewModel);
}
The problem is now that i can't get the updated viewmodel back to the view.. What am i doing wrong?
In this example I don't update the list but just a test string to see if i can get it updated back to the view..

For those who's interested I solved the problem like this:
<script>
$(document).ready(function () {
$("#btnSave").click(function () {
$.ajax(
{
type: "POST", //HTTP POST Method
url: "/Video/AddComment", // Controller/View
data: { //Passing data
//Reading text box values using Jquery
sComment: $("#txtArea").val(),
videoID: '#(Model.Video.iVideo_ID)',
taskID: document.getElementById('dropVal').value
}
}).success(function () {
console.log("good");
var txt = document.getElementById('txtArea').value;
console.log(txt);
var taskId = document.getElementById('dropVal').value;
var taskCont = $("#dropVal option:selected").text();
var taskContNum = Number(taskCont) - 1
console.log(taskCont);
var node = document.createTextNode(txt);
var para = document.createElement("div");
para.appendChild(node);
document.getElementById('taskPalace').appendChild(para);
document.getElementById('cola-' + '' + taskContNum).appendChild(para);
document.getElementById('txtArea').value = "";
});
})
})
So if the request succeeds without any errors in the HttpPost method it adds the comment to the database(through the HttpPost) and the jquery adds it to the view.

You need to use persistent data store in your case. Currently, your async post request will change the view model data but data is lost in subsequent http requests when you try to load the view with .load(...) jquery function.
1- Send async request to http post controller action to change the data in db store for example.
2- Read the view model data from db in http get index action. ($("#proever").load("/Video/Index"))

You can try this:
$(document).ready(function () {
$("#btnSave").click(function () {
var model = {
testString: $("#txtArea").val(),
videoID: '#(Model.Video.iVideo_ID)',
taskID: document.getElementById('dropVal').value
};
$.ajax(
{
type: "POST", //HTTP POST Method
url: "/Video/Index", // Controller/View
data: JSON.stringify({ viewModel: model })
async: false,
processData: false,
contentType: false,
dataType: 'json'
}).success(function (json) {
$("#proever").html(json.responseText);
});
})
})

web api put is recognizing query strings but not body

when i pass in users as a query string (using params in $http) and set the web api method to look for them in the uri everything is peachy. but when i pass them in as below, users shows up as null. what am i missing here?
angular function
scope.saveChanges = function () {
// create array of user id's
var users = [];
angular.forEach(scope.usersInRole, function (v, k) {
users.push(v.Key);
});
var data = { user: users };
var token = angular.element("input[name='__RequestVerificationToken']").val();
// put changes on server
http({
url: config.root + 'api/Roles/' + scope.selectedRole + '/Users',
method: 'PUT',
data: data,
contentType: "application/json; charset=utf-8",
headers: { "X-XSRF-Token": token },
xsrfCookieName: '__RequestVerificationToken'
}).success(function (result) {
// notify user changes were saved
angular.element('#myModal').reveal({ closeOnBackgroundClick: false });
});
};
web api action
public HttpResponseMessage Put(HttpRequestMessage request, [FromUri]string role, [FromBody]string[] user)
{
return request.CreateResponse(HttpStatusCode.NoContent);
}

Try: data: users instead of data: data.
In asp.net api, the whole request body is bound to a parameter. For this reason, you cannot have multiple parameters with the [FromBody] in the action method parameters. There is only one => we don't need to specify a property name in the request body.

JQuery getJSON in MVC

I have the following JSon call that I want to call a method in Controller & accepts JSon object to update Partial View:
<script type="text/javascript">
function DoAjaxUpdate(btnClicked) {
btnClicked = $(btnClicked);
var $form = btnClicked.parents('form');
var url = '#Url.Action("Remove")';
$.getJSON(
url,
$form.serialize(),
function () {
if (data.htmlPartialView != null) {
return $("#divPartialView").load(obj.htmlPartialView);
}
});
return false;
}
</script>
Unfortunately, this isn't passing the data properly and instead appends it to the URL as a query string such as: http://www.myLink.com/MyController/Remove?dataID=1359&dataMember=1
Please help. Thanks

That's what happens with $("form").serialize(). It will serialize everything on the form and put it on the query string.
As long as your Remove action method takes an instance of the model that is on your original view, then it will be transformed using the values in the query string.
To send it as JSON, you'd have to use JSON.stringify():
JSON.stringify($form.serialize())

The callback need parameter,like this:
$.getJSON(
url,
$form.serialize(),
function (obj) {
if (obj.htmlPartialView) {
$("#divPartialView").load(obj.htmlPartialView);
}
});
by the way,if (obj.htmlPartialView) is same to if (data.htmlPartialView != null)

You are calling getJSON which sends the data as a GET request which uses the querystring. If you want to use the POST method, use (from the jQuery site):
$.post(url, data, function(data) {
});
or
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
More information: http://api.jquery.com/jQuery.post/