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
Related
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"
};
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);
});
})
})
I am trying to upload an image in asp .net mvc using FormData for a specific item in my database. For that I need to send along with the image the id of the item in the database to link the image to.
I need to use FormData because I need the page not to be refreshed. So I am using jquery for ajax with the image.
I added the id of the image using formdata.append but I get an error in the server which tells me that the id parameter of the method that is called when doing ajax request, is not nullable and so it can't be mapped. It should be mapped to the id of the item in the database I mentioned earlier.
But I added in the form data the id of the item.
This is my javascript code:
var formData = new FormData();
var totalFiles = document.getElementById("inputImage").files.length;
formData.append("categoryId", response.data.toString());
for (var i = 0; i < totalFiles; i++) {
var file = document.getElementById("inputImage").files[i];
formData.append("categoryImage", file);
}
$.ajax("#Url.Action("SaveCategoryImage", "Categories")",
{
type: "POST",
dataType: "JSON",
data: formData,
contentType: false,
processData: false,
headers: { __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val() }
});
And this is the method in the controller that should get called:
public async Task<ActionResult> SaveCategoryImage(long cateogoryId, HttpPostedFileBase image)
{
return new JsonNetResult(new BasicActionResultViewModel {IsSuccessful = true});
}
So why doesn't asp .net mvc map the id I send in the form data to the id in the method of the controller?
It turns out I made a typo, the key for categoryId in the form data was different than the key in the method in the controller. And I also remove the data type from the ajax call.
I have created from wizard Asp Mvc 5 solution with Odata service to EF 6.
I want to send post request and create a record in database
but odata controller ran request, but not map JSON to EF object
what is wrong with my ajax request ?
Odata Method:
// POST: odata/SchoolChildrens
public async Task<IHttpActionResult> Post(SchoolChildrens schoolChildrens)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.SchoolChildrensSet.Add(schoolChildrens);
await db.SaveChangesAsync();
return Created(schoolChildrens);
}
JavaScript object Side (not all DB property here no need on client side):
var children = function () {
var self = this;
self.Id = ko.observable(0);
self.FullName = ko.observable();
self.IsPrivilege = ko.observable(false);
self.UseInShortMenu = ko.observable(false);
}
part of code that sent request, both case can't init data
self.addItem = function () {
var newStudent = ko.toJSON(self.newRow());
$.post("/odata/SchoolChildrens", JSON.stringify(newStudent), function (result) {
self.childrenList.push(result.value);
}).fail(function () { console.log("Function : Add SchoolChildrens error"); });
$.ajax({
type: "POST",
url: "/odata/SchoolChildrens",
data: newStudent,
success: function(result) {
self.childrenList.push(result.value);
},
dataType: 'json',
contentType: 'application/json'
});
};
I tried send JSON {schoolChildrens : ko.toJSON(self.newRow())} for map variable name but it also failed.
How I should send post request to odata controller correctly ?
Firstly, check if your request really contains any data (request object from page contains not null or undefined data property)
Second, when you use http methods that can send data in request body (POST, PUT, DELETE), it is necessary to add [FromBody] attribute before object as you want to map as method argument
I have the strangest situation. I have two ajax POST. First I had problems passing the parameters to the controller but at some point I got them trough and with some debugging I figured out that I only get all of the values to the controller if my ajax definition is followed by an alert.
One of them:
$.ajax({
type: 'POST',
url: '/Contact/IntresseAnmälan/',
dataType: 'json',
data: {
Namn: $('#namn').val(),
Mail: $('#mail').val(),
Info: $('#meddelande').val(),
Telefon: $('#nr').val(),
IsEnkel: false,
PassId: function () {
var url = window.location.pathname;
var id = url.substring(url.lastIndexOf('/') + 1);
return id;
},
Participanter: getParticipant(),
ParticipantMail: getParticipantMail()
},
traditional: true,
success: function (result) {
// window.location.href = '#Url.Action("IntresseAnmälan", "Contact")';
}
});
alert("Hur sparas dina uppgifter?");
Here are my Getters for name and mail. The form-elements(input type mail and text) theese are dynamicly added to the form if the user wants clicks a button two inputs are added. Then theese functions returns an array with the inputed values from the form.
function getParticipant() {
var p = [];
for (var i = 1; i <= participantCount; i++) {
var name = '#anNamn' + i;
p[i -1] = $(name).val()
}
return p;
}
function getParticipantMail() {
var p = [];
for (var i = 1; i <= participantCount; i++) {
p[i -1] = $('#anMail' + i).val();
}
return p;
}
And here is my controller. I've removed the body in the controller. It saves to the Db and send a verification mail to the admin.
[HttpPost]
public ActionResult IntresseAnmälan(BokningContainer bokning)
{
//Saves to Db and Send a verification mail to admin
}
If I exclude the alert after the ajax some parameters are passed, I think it's Namn and Mail, but most of them not passed. I'm quite puzzled.
Also, is ajax the only way to pass an object to a controller from jQuery?
Also, is ajax the only way to pass an object to a controller from
jQuery?
No, you can use a regular HTML Form to submit your data, you just have to conform to the expected object in the controller Action (should be decorated with HttpPostAttribute) - There is a Model-Binding process which attempting to bind the Request data to your domain object.
You don't need to pass every field's value using jQuery. Instead you can create a form whose data you want to post like :
<form id="frmTest">
... add input types here
</form>
and you can pass data of form using $('#frmTest').serialize() method to the controller
$.ajax({
type: "POST",
data: $('#frmTest').serialize(),
url: "url",
dataType: "json",
success: function (data) { alert('worked!'); },
error: function (data) {
alert('error');
}
});