How to access Model Data in Ajax response - javascript

I have two forms, consider Form1 and Form2, both are MVC forms only. These forms using two different view models as shown below :
public class Form1ViewModel
{
//some public properties
public string QueryString { get; set; }
}
public class Form2ViewModel
{
//some public properties
public string PreviousQueryString { get; set; }
}
In the controller Post Action I'm writing like this :
[HttpPost]
public ActionResult ProcessForm1(Form1ViewModel form1Obj)
{
//some logic goes here
//I'm preparing Querystring from form1 data and appending to Form2 model like
Form2ViewModel form2Obj=new Form2ViewModel();
form2Obj.PreviousQueryString = form1Obj.QueryString;
return View("Form2",form2Obj) ;
}
And in Form1, I'm submitting through Jquery Ajax as
frm.submit(function(ev) {
var formData = frm.serialize();
$.ajax({
type: "POST",
url: 'ControllerName/ProcessForm1',
data: formData,
success: function(response) {
//Here i need to read the PreviousQueryString and need to push to window.history.pushState()
}
error: function() {}
});
});
In the Ajax success, I need to read the PreviousQueryString from the response.
I knew how to do it client side(using pure JS) but it's my requirement.
How can I do it?

Try this
[HttpPost]
public string ProcessForm1(Form1ViewModel form1Obj)
{
JavaScriptSerializer js = new JavaScriptSerializer();
Form2ViewModel form2Obj=new Form2ViewModel();
form2Obj.PreviousQueryString = form1Obj.QueryString;
return js.Serialize(form2Obj);
}
success: function(response) {
var objResponse = $.parseJSON(response);
if (objResponse.PreviousQueryString != "") {
alert(objResponse.PreviousQueryString);
}
}

Related

Post a Complex object to MVC controller using AngularJS

So I am trying to build a travel-based site where I take some values from the UI and am trying to bind it to an object, and then hit an Http post to a controller, which will then take care of the DB part of the JOB. The problem is the controller will be receiving the post data as a complex object. So my present question is actually multifold.
How do I construct an instance and assign values for such a complex object in my client(AngularJS)code?
Is there any way razor can help us by fetching the object.
Once I have the finished, object if I stringify the JSON will the controller be able to accept that version.
I will be giving some code for reference.
ModelClass:
public class SearchCriteria
{
public Routes Routes { get; set; }
public int JType { get; set; }
public PaxInfo PaxInfo { get; set; }
public string SearchFingerPrintID { get; set; }
}
in the above class Routes is a complex type that needs to be addressed.
Razor Code to import the Model Object
#{
var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
var SampleReqObj = serializer.Serialize(Model.MyRequest);
}
Some Angularjs code.
$scope.ButtonClick = function () {
var ReqObjFinal = JSON.parse(SampleReqObj);
var post = $http({
method: "POST",
url: "/Main/DemoFormDataSubmit",
dataType: 'json',
data: JSON.stringify(ReqObjFinal),
headers: { "Content-Type": "application/json" }
});
post.success(function () {
$window.alert("Successful Call");
});
post.error(function () {
$window.alert("Not working bro");
});
}
Field that i want to fetch from my UI.
<input type="text" name="Departure" ng-click="DeptLoadList()"
ng-model="Departure" id="Departure" ng-keydown="completeDept(Departure)"
class="form-control" />
I am a beginner for angular-js so thanks in advance for the help!!!
You can create a ViewModel. And use to it your view page head
#Model.YourViewModel
and use page input name ex :
<form action="post" action="YourController/Save">
<input name="YourViewModel.PropName" type="text" value="#YourViewModel.PropName" />
</form>
and you can post to controller ex:
[HttpPost]
function void Save(YourViewModel data){
string value=data.YourProperty;
}
You can create a structure;
public class YourViewModel{
...
public string DataJson{get;set;}
}
and
var pageData=Json.parse(#Model.DataJson);
pageData.YourProp="Your value";
$http({ method: "POST", url: "/YourController/Save", dataType: 'json', data:
pageData, .. })
that object goes to your controller

Get json data from ajax,process it,return answer

I have some troubles with transfer json data.
I have some dynamic page. I collect data to json object "Filters".
var Filters = { daterange: $('#daterange').val(), shop: val_shop, pr: val_pr, plan: val_plan, TabsList: TabsList }
$.ajax({
url: "/Reports/Report_2",
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(
Filters
)
});
I try get it with JObject.
public IActionResult Report_2() //main Action
{
return View();
}
[HttpPost]
public async Task<IActionResult> Report_2([FromBody]JObject jsonResult)//catch json object
{
//do something
return View(_context.MyDatabase.Result);//return data from database for table(Razor Page)
}
I get Error 415. =(
If I try don't overload Report_2 Action().
$.ajax({
url: "/Reports/Report_2_Filter",
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(
Filters
)
});
[HttpPost]
public async Task<JObject> Report_2_Filter([FromBody]JObject jsonResult)
{
return jsonResult;
}
I don't know how return result on Report_2 page. I need result on Report_2 Action becouse I must fill table on Report_2 page. I'm newbee in web, so I will be greateful for any help.
May be you need write ("");
var Filters = { "daterange": $('#daterange').val(), "shop": val_shop, "pr": val_pr, "plan": val_plan, "TabsList": TabsList }
You can add a function to be executed on success. Try to add the following to your ajax request:
success: function(data){
// Do something here
}
Have a look here to see the ajax events.
My solution:
I create class which stores variables:
public class FilterModel
{
public string var1{ get; set; }
public string var2{ get; set; }
public string var3{ get; set; }
public string var4{ get; set; }
public List<string> var5{ get; set; }
}
[HttpPost]
public IActionResult Report_2(FilterModel filter)
{
FilterLogic filterLogic = new FilterLogic(_context);
var result = filterLogic.GetResult(filter);
return View();
}
In JS I use jQuery function $.post
$.post("/Reports/Report_2", { var1: $('#var1').val(), var2: var2, var3: var3, var4: var4, var5: var5});

Why ASP MVC model binder only accept JSON in POST?

Whenever I send 'GET' with JSON.stringify() using AJAX, model value is always accept null;
Why it can only bind 'POST'?
If it is possible, can I use 'GET' and still bind data to model?
Edit: adding Code Example
JS:
$.ajax({
var modelsend = {
itemname: 'shoe',
itemcolor: 'red',
itemsize: '31',
itemvariety: 'SR-31',
}
type: "POST",
url: "#Url.Action("ShowData", "Controller")",
data: JSON.stringify(modelsend),
dataType: "json",
contentType: "application/json",
success: function (data) {
//do something with data
},
error: function (jqXHR, textStatus, errorThrown) {
//show error
}
});
Model:
public class shoemodel
{
public string itemname { get; set; }
public string itemcolor { get; set; }
public string itemsize { get; set; }
public string itemvariety { get; set; }
}
Controller:
public ActionResult ShowData(shoemodel get)
{
List<DataGrid> fetch = func.getdata(get);
return Json(fetch);
}
Perhaps you are forgetting that GET is used for viewing something, without changing it, while POST is used for changing something. And Get can be used to change something only when you use Querystring. Post on the other hand sends form data directly.
HTTP 'GET' method doesn't support a body in the request. The way to send parameters via 'GET' is using the application/x-www-form-urlencoded format appending them in the URL like this.
http://example.com/?key1=value1&key2=value2

Pass object from Javascript to MVC Controller

I have tried many different solutions from other people but have had no luck with either, and I can't seem to be able to debug javascript.
These are some of the variables just so you can see the types. All variables contain data
My view is as follows:
var startTime = new Date();
var images = #Html.Raw(Json.Encode(ViewBag.Images));
var sound = #Html.Raw(Json.Encode(ViewBag.Tones));
var gamePlayed = #Html.Raw(Json.Encode(ViewBag.GamePlayedId));
function SaveGameData()
{
$.ajax({
type: 'POST',
url: '#Url.Action("Play", "Game")',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: {
GamePlayedId: gamePlayed,
Level: level,
ExpectedImageName: expectedImageArray,
ExpectedToneName: expectedToneArray,
SelectedImageName: selectedImageArray,
SelectedToneName:selectedToneArray,
StartTime: startTimeArray,
EndTime: endTimeArray
},
success: function () {
alert('suc');
},
error: function (args) {
alert('error');
}
});
}
My controller is as follows:
[Authorize]
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Play(SaveGameViewModel model)
{
// Do something
return Json(new { success = true , message ="successful"});
}
My viewmodel is as follows:
public class SaveGameViewModel
{
public int GamePlayedId { get; set; }
public int Level { get; set; }
public List<string> ExpectedImageName { get; set; }
public List<string> ExpectedToneName { get; set; }
public List<string> SelectedImageName { get; set; }
public List<string> SelectedToneName { get; set; }
public List<DateTime> StartTime { get; set; }
public List<DateTime?> EndTime { get; set; }
}
I keep getting the error message from the ajax alert. I have tried many different things and nothing seems to work. I appreciate any help that you can give. Thanks a lot!
There are at least 2 issues with the code your have shown.
First your method is marked with the [ValidateAntiForgeryToken] attribute but you do not pass the token so the method will never be run. Either remove the attribute, or include it using (this assumes your form includes #Html.AntiForgeryToken())
data: {
__RequestVerificationToken: $('[name=__RequestVerificationToken]').val(),
.... // your other properties
},
Second, your posting a javascript object so you need to remove the contentType: "application/json; charset=utf-8", option (or alternatively you need to stringify the data using JSON.stringify()
Side note: Its unclear from you code why you are manually constructing an object to send to the controller. If your form controls are based on SaveGameViewModel and are correctly generated using the strongly typed html helpers, then you can post it all back using
$.ajax({
data: $('form').serialize(),
....
});

MVC5 controller action not called from JSON AJAX Post

I am sending data from from a javascript app to a MVC5 controller, however when data is submitted to the Submit controller action, it is never called. I have some very simple mappers which create the following JSON object:
function mapContactDto(vm)
{
var contactDto = {};
contactDto.firstName = vm.firstName();
contactDto.lastName = vm.lastName();
contactDto.companyName = vm.companyName();
contactDto.emailAddress = vm.emailAddress();
contactDto.phonePrimary = vm.phonePrimary();
contactDto.phoneSecondary = vm.phoneSecondary();
contactDto.address1 = vm.address1();
contactDto.address2 = vm.address2();
contactDto.city = vm.city();
contactDto.postalCode = vm.postalCode();
contactDto.country = vm.country();
return contactDto;
}
function mapCartItems(vm)
{
var cartItemsDto = new Array();
$.each(vm.selectedOptions(), function (index, step, array) {
var sku = step.selection().sku;
if (sku !== "0") {
cartItemsDto.push(sku);
}
});
return cartItemsDto;
}
/* if i dump the object that is sent to the server with `console.log(JSON.stringify(item))` I get:
{
"skus": ["1001","8GB","201"],
"contact": {
"firstName":"Jon",
"lastName":"Doe",
"companyName":"Yup my company",
"emailAddress":"contact#me.com",
"phonePrimary":"012111 231",
"phoneSecondary":"",
"address1":"1 Billing Way",
"address2":"Navigation House",
"city":"London",
"postalCode":"112211",
"country":"GB"
}
}
*/
I then send the data with the following code:
var contactDto = mapContactDto(self.billingVm());
var cartItemsDto = mapCartItems(self.configurationVm());
var req = new XMLHttpRequest();
req.open('HEAD', document.location, false);
req.send(null);
var item = {
skus: mapCartItems(cartItemsVm()),
contact: mapContactDto(billingVm())
};
var url = '/Knockout/Submit';
$.ajax({
cache: false,
url: url,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: item,
type: 'POST',
success: function (data, textStatus, jqXHR) {
},
error: function (data, textStatus, jqXHR) {
}
});
My controller code is below:
public JsonResult Submit(string[] Skus, ContactDto Contact)
{
return Json(new { success = true, message = "Some message" });
}
/* and MVC models are: */
public class ContactDto
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string CompanyName { get; set; }
public string EmailAddress { get; set; }
public string PhonePrimary { get; set; }
public string PhoneSecondary { get; set; }
public string Address1 { get; set; }
public string Address2 { get; set; }
public string City { get; set; }
public string PostalCode { get; set; }
public string Country { get; set; }
}
I have the following questions please:
Submit is never called however, if I comment out the controller parameters so it becomes Submit() then it is called, why is this?
From the above, it seems like the controller framework cannot match up the parameters - any idea what I am doing wrong please?
How to enable debugging on the MVC controller so I can see what's going on?
Four things you must check using ajax calls,
1. If using javascript object you must stringify the object before passing.
2. The Action verb for the action method should be same as the type of your ajax call if POST then the action method should be decorated by action verb [HttpPost].
3. Always use the relative path for url's in ajax as #Url.Action("action", "controller").
4. The input parameters of your action method method should match the json object parameters (exactly i.e. case sensitive).
For debugging you may use firebug addon in your browser so that you can see what is sent over the network or press F12 for debugging tool in that check in network tab.
You will have to make two changes:
Stringify your Json as below:
$.ajax({
cache: false,
url: url,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: JSON.stringify(item),
type: 'POST',
success: function (data, textStatus, jqXHR) {
},
error: function (data, textStatus, jqXHR) {
}
});
Second, Just Annotate your Method with [HttpPost] as below:
[HttpPost]
public JsonResult Submit(string[] Skus, ContactDto Contact)
{
return Json(new { success = true, message = "Some message" });
}

Categories