add data on sql using javascript - 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");
}

Related

Pass multiple json objects throught ajax to razor pages

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:

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)

How to retrieve a web-api controller method(without database), from Javascript

I want to retrieve the function/method written in controller of Web-Api, from javascript of multi-channel devextreme template.(need to show data from Web-API Controller in front-end, where data is not from server).
Please suggest me which site I should refer/by writing simple code...
Controller
namespace WebApiODataService3.Controllers
{
public class ShaileshsController : ODataController
{
public string GetShailesh()
{
return "say hello";
}
}
}
shailesh.js of shailesh.dxview-from devextreme multichannel template
Application2.shailesh = function (params) {
"use strict";
var viewModel = {
// Put the binding properties here
};
return viewModel;
};
I think you ask for an example:
Classes
public class CustomModel
{
public int var1 { get; set; }
public string var2 { get; set; }
public IEnumerable<SubSetModel> subset { get; set; }
}
public class SubSetModel
{
public string subvar1 { get; set; }
public string subvar2 { get; set; }
}
Test Controller Methods
[Route("api/route/postaction")]
public System.Web.Http.Results.JsonResult<string> postaction(CustomModel data)
{
return Json<string>("ok");
}
[Route("api/route/getaction")]
public dynamic getaction()
{
var data = new CustomModel() { var1 = 1, var2 = "ter" };
data.subset = new List<SubSetModel>() { new SubSetModel() { subvar1 = "hi", subvar2 = "hola" } };
return data;
}
Call to getaction
$.ajax({
url: "http://localhost:45007/api/maestro/getaction",
method: "GET",
data: {}
}).done(function (dataSel) {
alert("OK");
}).fail(function (dataSel) {
alert("Fail");
});

How to Save an id for a dropdownlist using angular js?

I have a problem in my project using Angularjs. Here is my code:
Controller
// GET: api/CustomerLists/5
[ResponseType(typeof(CustomerList))]
public IHttpActionResult GetCustomerList(int id)
{
var data = (from cust in db.CustomerLists
join call24 in db.CallingList4
on cust.CustID equals call24.CustID
where cust.CustID == id
select new CustomerVM
{
CustID = cust.CustID,
Customer = cust.Customer,
Call4ID = call24.Call4ID,
Wk1WebID = call24.Wk1WebID,
Wk1OrdID = call24.Wk1OrdID
}).First();
return Ok(data);
}
// PUT: api/CustomerLists/5
[ResponseType(typeof(void))]
public IHttpActionResult PutCustomerList(CustomerVM vm)
{
if (ModelState.IsValid)
{
var cust = db.CustomerLists.Find(vm.CustID);
var call4 = db.CallingList4.Find(vm.Call4ID);
cust.Customer = vm.Customer;
cust.ContactName = vm.ContactName;
call4.Wk1OrdID = vm.Wk1OrdID;
call4.Wk1WebID = vm.Wk1WebID;
db.CustomerLists.Attach(cust);
db.Entry(cust).State = EntityState.Modified;
db.CallingList4.Attach(call4);
db.Entry(call4).State = EntityState.Modified;
db.SaveChanges();
}
return StatusCode(HttpStatusCode.NoContent);
}
JS
var EditCtrl = function ($scope, $routeParams, $location, data, $http) {
var id = $routeParams.editId;
$scope.lis = data.get({ id: id });
$scope.selectTest = null;
$scope.testTest = [];
$http({
method: 'GET',
url: '/api/OrderStatus/',
data: { OrderStatID: 1 }
}).success(function(result) {
$scope.testTest = result;
});
$scope.selectTest1 = null;
$scope.testTest1 = [];
$http({
method: 'GET',
url: '/api/WebStatus/',
data: { WebStatID: 1 }
}).success(function (result1) {
$scope.testTest1 = result1;
});
$scope.save = function () {
data.update({ id: id }, $scope.lis, function () {
$location.path('/');
});
};
Template
<select class="form-control" ng-model="selectTest" ng-model="lis.OrderStatID">
<option ng-repeat="s in testTest" value="{{s.OrderStatID}}">{{s.OrderStatus}}</option>
</select>
View Model
public class CustomerVM
{
public int CustID { get; set; }
public string Customer { get; set; }
public int? Priority { get; set; }
public string ContactName { get; set; }
public string ContactNumber { get; set; }
public int Call4ID { get; set; }
public int? Wk1WebID { get; set; }
public int? Wk1OrdID { get; set; }
public int? OrderStatId { get; set; }
public string OrderStatus { get; set; }
}
}
When I try to update, the CustomerList details update just fine, but the CallingList4 details return null when I select a status and I try to save an ID. How do I save the ID from another table to the main table which is callingList24? please help
UPDATED
look at this screen shot it does select from the table, but the problem it does not want to save an id to another table.
I see it is a design issue rather than code issue
You need to redesign your ViewModel to include subclasses for properties like Status and CallingList
Then pass the value using expression like {{s.Status.ID}} and so on for all composed properites

Categories