Pass multiple json objects throught ajax to razor pages - javascript

I am trying to pass multiple parameters using ajax 'data:'. In cs file parameter model is null.
What am I doing wrong here? I've tried with and without JSON.stringify
this is in chtml razor page.
var Obj_A = [];
var obj = {};
var inputs = $("#fieldset1 input[name^=show_all_]");
for(var i = 0; i < inputs.length; i++){
var text_id = $(inputs[i]).attr("id").replace('show_all_','');
var value = $(inputs[i]).val();
obj[text_id]=value;
}
Obj_A.push(obj);
.
.
same for Obj_B
.
var model = {
Item_1: Obj_A ,
Item_2: Obj_B
};
$("#btn_insert").click(function () {
$.ajax({
type: "POST",
url: "/Home/Edit?handler=Import",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
data: JSON.stringify(model),
contentType: "application/json",
success: function (response) {
},
error: function (e) {
}
});
});
console.log for model has values.
this is in chtml.cs razor page.
public async Task<JsonResult> OnPostImport([FromBody]All_Obj model)
{
{
return new JsonResult(new { message = "2", filename = "1" });
}
}
model parameter is always null.
model class
public class model
{
public Item_1 field_1 { get; set; }
public Item_2 field_2 { get; set; }
}
Item_1 class
public class Item_1
{
public string field_item_1_1 { get; set; }
public string field_item_1_2 { get; set; }
public string field_item_1_3 { get; set; }
}
Item_2 class
public class Item_2
{
public string field_item_2_1 { get; set; }
public string field_item_2_2 { get; set; }
public string field_item_2_3 { get; set; }
}

Please use the following code to add data to model:
var Obj_A = {};
Obj_A.field_item_1_1=$("#show_all_field_item_1_1").val();
Obj_A.field_item_1_2=$("#show_all_field_item_1_2").val();
Obj_A.field_item_1_3=$("#show_all_field_item_1_3").val();
var Obj_B = {};
Obj_B.field_item_2_1=$("#show_all_field_item_2_1").val();
Obj_B.field_item_2_2=$("#show_all_field_item_2_2").val();
Obj_B.field_item_2_3=$("#show_all_field_item_2_3").val();
So that the model structure will be like this:

Related

Passing Form Serialize and list to controller is not working?

i have controller like this:
public ActionResult SaveWorkOrder(DTO_WorkOrder objWork, List<DTO_PartsWO> listTry)
{
//something
}
and model :
public class DTO_WorkOrder
{
public string Id { get; set; }
public string WoNo { get; set; }
public string ReqNo { get; set; }
public string ReqSparepartDate { get; set; }
public List<DTO_PartsWO> PartsList { get; set; }
}
this is my javascript to pass data to controller:
function SaveWorkOrder()
{
debugger;
var dd = $('#tbParts').DataTable().rows().data().toArray();
var vDataDet = new Array();
//Loop through the Table rows and build a JSON array.
$.each(dd, function (i, value) {
debugger;
var dataDetail = {};
dataDetail.Line = i;
dataDetail.PartCode = value[1];
dataDetail.PartDesc = value[2];
vDataDet.push(dataDetail);
debugger;
});
var tmp = $('#WorkOrderForm').serialize();
$.ajax({
type: 'POST',
url: '/Transactions/WorkOrder/SaveWorkOrder',
data: JSON.stringify({ objWork: tmp, listTry: vDataDet}),
success: function (mdl)
{
debugger;
},
error: function (mdl)
{
debugger;
}
)}
}
the codes pass the serialize form but not the list, my list null...
please help, already code for 3 days to pass both list and serialize form but not worked
I don't know if this is the right way, but it is working fine, instead using serialize, serializeArray work good so I can add list parameter in form, so this is the code I use:
function SaveWorkOrder()
{
debugger;
var dd = $('#tbParts').DataTable().rows().data().toArray();
var vDataDet = new Array();
// step 1 serialize array the form
var data = $("#WorkOrderForm").serializeArray();
//Loop through the Table rows and build a JSON array.
$.each(dd, function (i, value) {
debugger;
data[data.length] = { name: "PartsList[" + i + "].Line", value: i };
data[data.length] = { name: "PartsList[" + i + "].PartCode", value: value[1] };
data[data.length] = { name: "PartsList[" + i + "].PartName", value: value[2] };
debugger;
});
$.ajax({
type: 'POST',
url: '/Transactions/WorkOrder/SaveWorkOrder',
data: data,
success: function (mdl)
{
debugger;
},
error: function (mdl)
{
debugger;
}
})
}
This is the controller:
public ActionResult SaveWorkOrder(DTO_WorkOrder objWork)
{
//something
}
This is the models:
public class DTO_WorkOrder
{
public string Id { get; set; }
public string WoNo { get; set; }
public string ReqNo { get; set; }
public string ReqSparepartDate { get; set; }
public List<DTO_PartsWO> PartsList { get; set; }
}
public class DTO_PartsWO
{
public string WoNo { get; set; }
public Int32 Line { get; set; }
public string PartCode { get; set; }
public string PartName { get; set; }
}
you can see the result in pictureList in Object and detail List.

ASP.Net Core 3 Posting JSON array to controller

I´m having issues passing an array of JSON objects to an MVC controller in ASP.Net core 3. The JSON object is built from a CSV file and passed through an AJAX call. The correct action is called but the object received is always null.
JS:
async function updateData(){
var obj = await getData();
$.ajax({
type: "POST",
contentType: "application/json",
url: "/admin/metric/Update",
data: obj,
dataType: 'json',
success: function (data) {
console.log("SUCCESS : ", data);
},
error: function (e) {
console.log("ERROR : ", e);
}
});
}
async function getData(){
var metric = {};
var metrics = [];
var response = await fetch('https://bloburi.net/source/file.csv');
var data = await response.text();
var table = data.split('\n').slice(1);
table.forEach(row => {
var columns = row.split(',');
metric["FirstName"] = columns[0];
metric["LastName"] = columns[1];
metric["Email"] = columns[2];
metric["AverageHandleTime"] = columns[3];
metric["AverageFollowUp"] = columns[4];
metric["AverageHold"] = columns[5];
metric["Date"] = columns[6];
metrics.push(JSON.stringify(metric));
});
console.log(metrics);
return metrics;
}
Models:
public class MetricBase
{
[Required]
public string Date { get; set; }
public double AverageHandleTime { get; set; }
public double AverageHold { get; set; }
public double AverageFollowUp { get; set; }
public string Email { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
public class MetricModel
{
public IEnumerable<MetricBase> MetricBase { get; set; }
}
Controller:
[HttpPost]
public IActionResult Update([FromBody]MetricModel obj)
{
return Json(new { obj });
}
I think the issue may be on how I'm deffining the class that is receiving the JSON, but I've tried multiple things like deffining MetricBase as a List<> or straight up as an array in MetricModel, but it doesn't seem to work.
Any help is appreciated!
You adding the stringify item inside array via code
metrics.push(JSON.stringify(metric));
instead of stringify the whole array. Change the line to
metrics.push(metric);
and data: obj, to
data: JSON.stringify(obj),.
With the mentioned change, the $.ajax sends the whole array. Also change the action to
public IActionResult Update([FromBody]IEnumerable<MetricBase> obj)

MVC6 Assign a viewmodel list property to a javascript variable

I have a viewmodel with the following property:
public class CompanyDetailsViewModel
{
[Required(ErrorMessage = "A Company Name is required")]
[Display(Name = "Company Name:")]
[StringLength(100)]
public string CompanyName { get; set; }
...
public IList<SuburbAndPostcode> SuburbAndPostcodesList { get; set; }
}
The list was created from this POCO class:
public class SuburbAndPostcode
{
[Key]
public int SuburbsAndPostcodesId { get; set; }
public string Suburb { get; set; }
public string PostCode { get; set; }
public State State { get; set; }
}
This is the state object:
public class State
{
[Key]
public int StateId { get; set; }
public string ShortName { get; set; }
public string Name { get; set; }
public virtual ICollection<CompanyDetail> CompanyDetails { get; set; }
}
I am trying to create a variable with the suburb and postcode properties as a list that I can use for an autocomplete function however I cant seem to assign the Model.SuburbsAndPostCodesList to a variable.
I have tried various javascript options indicated from other questions on this forum like here.
I would like to have a javascript variable that represents the list and I have tried just setting:
var suburbs = #Model.SuburbAndPostcodesList
I've tried using json and I have tried looping through the Model but get an error saying that the variable "test" is out of context:
var test =[];
#for (int i = 0; i < Model.SuburbAndPostcodesList.Count; i++)
{
test[i]=...
}
I have also tried using "push" and ".Encode".
I would like to know how to assign this list of strings and state object to a javascript variable?
Use Ajax Call to achieve Auto-complete functionality
$(document).ready(function () {
$("#txtPostcodes").keyup(function () {
//AutoComplete the Results
$("#txtPostcodes").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "../ControllerName/ActionName",
data: "{'input':'" + document.getElementById('txtPostcodes').value + "'}",
dataType: "json",
success: function (data) {
if (data != null) {
var suburbs = data;
}
},
error: function (result) {
}
});
}
});
}
});
});
In the end I simply equated the various members of the viewmodel list and build up a javascript multi dimensional array for the autocomplete function. Here it is:
var suburbs = [
#for (var i = 0; i < Model.SuburbAndPostcodesList.Count; i++) {
<text>{
id: "#Model.SuburbAndPostcodesList[i].SuburbsAndPostcodesId",
suburb: "#Model.SuburbAndPostcodesList[i].Suburb",
postCode: "#Model.SuburbAndPostcodesList[i].PostCode",
state: "#Model.SuburbAndPostcodesList[i].State.ShortName"
}#(i == Model.SuburbAndPostcodesList.Count - 1 ? "" : ",")</text>
}
];
$("#Suburb").autocomplete({
source: function (req, responseFn) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp("^" + re, "i");
var a = $.grep(suburbs, function (item, index) {
return matcher.test(item.suburb);
});
a = $.map(a, function (x) {
return {
label: x.suburb + " - " + x.postCode,
value: x.suburb,
suburbDetails: x
};
});
responseFn(a);
},
select: function (value, data) {
if (typeof data == "undefined") {
} else {
$("#Postcode").val(data.item.suburbDetails.postCode);
}
},
change: function (event, ui) {
if (!ui.item) {
$("#Suburb").val("");
$("#Postcode").val("");
}
}
});

Iterate over JSON object and gather model values

I am trying to send an ajax get request to receive all of the entries in one of my tables in the database as a JSON object.
After retrieving this, I am trying to iterate over all of the objects and compare the objects ID, to a local ID.
If there is a match, I want to set some html text boxes to their values, but I can't get it to work.
JavaScript:
$.ajax({
url: "/Home/AllEvents",
data: calEvent.id,
dataType: "json",
success: function(response) {
for (var i = 0; i < response.length; i++) {
var obj = response[i];
if (obj.ID == calEvent.id)
{
document.getElementById('updateID').value = obj.ID;
document.getElementById('updateType').value = obj.EventType;
document.getElementById('updateDuration').value = obj.Hours;
break;
}
}
},
AllEvents:
public JsonResult AllEvents(double? start, double? end)
{
var eventList = new List<object>();
foreach (Event ev in db.Events)
{
eventList.Add(ev);
}
return Json(eventList.ToArray(), JsonRequestBehavior.AllowGet);
}
Event Model:
public int ID { get; set; }
[Required]
[DataType(DataType.Date, ErrorMessage = "Please enter a valid date.")]
[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
[Display(Name = "Date")]
public DateTime Date { get; set; }
[Required]
[EnumDataType(typeof(EventType), ErrorMessage = "Submitted value is not valid.")]
[Display(Name = "Type")]
public EventType? EventType { get; set; }
[Required]
public double Hours { get; set; }
[Timestamp]
public byte[] RowVersion { get; set; }
public virtual Person Person { get; set; }
Any help is greatly appreciated.
With the help of Stephen, I managed to get this working with the following:
FindEvent:
public JsonResult FindEvent(int ID)
{
Event ev = db.Events.Where(e => e.ID == ID).FirstOrDefault();
object eventObject = new
{
hours = ev.Hours.ToString(),
eventType = ev.EventType.ToString()
};
return Json(eventObject, JsonRequestBehavior.AllowGet);
}
JavaScript:
$.ajax({
url: '#Url.Action("FindEvent", "Event")',
data: { ID: calEvent.id },
dataType: "json",
success: function (response) {
console.log(response);
document.getElementById('updateID').value = calEvent.id;
document.getElementById('updateType').value = response.eventType;
document.getElementById('updateDuration').value = response.hours;
},
error: function() {
// Handle error
}
});

add data on sql using javascript

Hello i want to add data on database in sql but i can't find how to do this using javascript,i work on visual studio
You can use Javascript to pass data back to your .NET MVC C# Controller method
var myViewModel = {};
var team= {};
team.TeamID = 1234;
team.TeamName = "Test Team";
myViewModel.Team= team;
var teamPlayerList = [];
var player1= {};
player1.id= "1";
player1.Name = "Patrick";
var player2 = {};
player2.id= "2";
player2.Name = "Padraig";
teamPlayerList.push(player1);
teamPlayerList.push(player2 );
myViewModel.TeamPlayerList = teamPlayerList;
$.ajax(
{
url: 'Team/Create',
data: JSON.stringify({teamViewModel : myViewModel}),
contentType: 'application/json',
dataType: 'json',
type: 'POST',
success: function (data) {
alert("success");
},
error: function () { alert('error'); }
});
On the backend in the C# you will need A controller class, and some C# classes to hold the data you pass in from javascript
public class Team
{
public long TeamID { get; set; }
public string TeamName { get; set; }
}
public class TeamPlayer
{
public string id{ get; set; }
public string Name { get; set; }
}
A ViewModel
public class TeamViewModel
{
public Team Team { get; set; }
public IList<TeamPlayer> TeamPlayerList { get; set; }
}
The controllers method will be something like this
public class TeamController : Controller
{
[HttpPost]
public ActionResult Create(TeamViewModel teamViewModel)
{
//USE HERE TO EXTRACT DATA PASSED IN
var myTeam = teamViewModel.Team;
var teamPlayerList = teamViewModel.TeamPlayerList;
//call your db insert class/code and use values passed in
return Content("success");
}

Categories