如何通过ajax请求将数据从视图传递到控制器作为控制器操作方法的输入参数 [英] How to pass data from view to controller by ajax request as input parameters to controller action method
本文介绍了如何通过ajax请求将数据从视图传递到控制器作为控制器操作方法的输入参数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题
无法通过ajax请求将数据从视图传递到控制器作为控制器操作方法的输入参数
我有类型号名称SalesHeader如下
public class SalesHeader
{
public int SalesOrderNo { get ; set ; }
public int SalesYear { get ; set ; }
public int CustomerID { get ; set ; }
public 客户客户{获取; set ; }
public ICollection< SalesFooter> SalesFooters { get ; set ; }
}
我制作控制器SalesOrder基于SalesHeader模型
<销售订单控制器中的
我有actionresult创建
我需要将创建操作结果视图中的数据传递给控制器销售订单创建方法作为输入参数< br $>
[HttpPost]
public ActionResult Create（SalesHeader sh，SalesFooter [] orderItems）
{
}
销售标题由SaleSeader表示为（SalesOrderNo，SalesYear，CustomerId）
销售页脚由SalesFooter表示为（SalesLineNo，ItemCode，Quantity，UnitPrice） ，总计）
和SalesFooter [] orderItems代表公共ICollection< salesfooter> SalesFooters {get;组; }
我会收到物品数据从视图到控制器的项目数组
表格设计
on 标题（代表 by 销售 标题模型）
SalesOrderNO 1
SalesYear 2019
CustomerNo 2509
on 页脚（代表 by 销售 页脚模型）
SalesLineNo ItemCode 数量 价格 总计
1 12929 5 10 50
2 17918 4 5 20
这样我就会在创建方法上设置断点并点击保存按钮
它必须在销售标题（sh）上有一条记录，在销售页脚上有两条记录（orderItems）
这样我的主要问题是如何将这些记录从视图传递给控制器
我在asp.net core 2.1 visual studio 2上工作017 sql server 2012
点击保存按钮后我做检查我发现已经发送了两条记录，但是在控制器上没有任何关于销售标题或页脚参数的创建
我尝试过：
我的观点如下
@model TabDataAccess.Dto.SalesHeader
< script>
$（document）.ready（function（）{
var orderItems = [];
//添加按钮点击功能
$（'#add'）。点击（功能（）{
//检查订单商品的验证
var isValidItem = true;
//如果有效
if（isValidItem）{$ b，则将项目添加到列表$ b orderItems.push（{
SalesLineNo：$（'＃SalesLineNo'）。val（）。trim（），
ItemCode：$（'＃ItemCode'）。val（）。trim（） ，
数量：parseInt（$（'＃Qunatity'）。val（）。trim（）），
UnitPrice：parseFloat（$（'＃UnitPrice'）。val（）。trim（）） ，
总计：parseInt（$（'＃Qunatity'）。val（）。trim（））* parseFloat（$（'＃UnitPrice'）。val（）。trim（））
}） ;
////清除字段
$（'＃SalesLineNo'）。val（''）。focus（）;
$（'＃ItemCode '，'＃Qunatity，＃UnitPrice'）。val（''）;
}
//填充订单商品
GeneratedItemsTable（）;
}）;
函数GeneratedItemsTable（）{
if（orderItems.length> 0）{
var $ table = $（'< table />'）;
$ table.append（'< thead>< tr>< th> SalesLineNo< / th>< th> ItemCode< / th>< th> Qunatity< / th>< th> UnitPrice< ; /第><的第i;总计< /第><的第i;< /第>< / TR>< / THEAD>'）;
var $ tbody = $（'< tbody />'）;
$ .each（orderItems，function（i，val）{
var $ row = $（'< tr />'）;
$ row.append（$（'< ; td />'）。html（val.SalesLineNo））;
$ row.append（$（'< td />'）。html（val.ItemCode））;
$ row.append（$（'< td />'）。html（val.Qunatity））;
$ row.append（$（'< td />'）。html（val.UnitPrice ））;
$ row.append（$（'< td />'）。html（val.Total））;
var $ remove = $（'< a href =＃ >删除< / a>'）;
$ remove.click（function（e）{
e.preventDefault（）;
orderItems.splice（i，1）;
GeneratedItemsTable（）;
}）;
$ row.append（$（'< td />'）。html（$ remove））;
$ tbody.append（ $ row）;
}）;
console.log（current，orderItems）;
$ table.append（$ tbody）;
$（'＃orderItems'）。html（$ table）;
}
else {
$（'＃orderItems'）。html（''）;
}
}
$（＃saveOrder）。click（function（e）{
e.preventDefault（）;
var orderItems = [];
orderItems.length = 0;
orderItems.push（{
SalesLineNo：$（'＃SalesLineNo'）。val（）。trim（），
ItemCode：$（'＃ItemCode'）。val（）。trim（），
数量：parseInt（$（'#Qunatity'）。val（）。trim（）），
UnitPrice ：parseFloat（$（'＃UnitPrice'）。val（）。trim（）），
总计：parseInt（$（'#Qunatity'）。val（）。trim（））* parseFloat（$（' #UnitPrice'）。val（）。trim（））
}）;
var data = JSON.stringify（{
orderfooter：orderItems
}）;
$ .ajax（{
contentType：'application / json; charset = utf-8'，
dataType：'json'，
type：'POST' ，
url： '/ SalesOrder / Create'，
data：orderItems，
success：function（result）{
alert（result）;
location.reload（）;
}，
错误：function（）{
alert（错误！）
}
}）;
}）;
}）;
< / script>
< h2>创建< / h2>
< h4> SalesHeader< / h4>
< hr />
< div class =row>
< div class =col-md-4>
< form asp-action =Create>
< div asp-validation-summary =ModelOnlyclass =text-danger>< / div>
< div class =form-group>
< label asp-for =SalesOrderNoclass =control-label>< / label>
< input asp-for =SalesOrderNoclass =form-control/>
< span asp-validation-for =SalesOrderNoclass =text-danger>< / span>
< / div>
< div class =form-group>
< label asp-for =SalesYearclass =control-label>< / label>
< input asp-for =SalesYearclass =form-control/>
< span asp-validation-for =SalesYearclass =text-danger>< / span>
< / div>
< div class =form-group>
< label asp-for =CustomerIDclass =control-label>< / label>
@ *< select asp-for =CustomerIDclass =form-controlasp-items =ViewBag.CustomerID>< / select> * @
< input asp- for =CustomerIDclass =form-control/>
< span asp-validation-for =CustomerIDclass =text-danger>< / span>
< / div>
< div class =details>
< h4>订单商品< / h4>
< table width =100％>
< tr>
< td> SalesLineNo< / td>
< td> ItemCode< / td>
< td>数量< / td>
< td> UnitPrice< / td>
< td>总计< / td>
< td> < / td>
< / tr>
< tr>
< td>
< input type =textid =SalesLineNo/>
< span class =error>需要商品名称< / span>
< / td>
< td>
< input type =textid =ItemCode/>
< span class =error>需要的有效数量< / span>
< / td>
< td>
< input type =textid =Qunatity/>
< span class =error>有效费率< / span>
< / td>
< td>
< input type =textid =UnitPrice/>
< span class =error>有效费率< / span>
< / td>
< td>
< input type =textid =Total/>
< span class =error>有效费率< / span>
< / td>
< td>
< input type =buttonid =addvalue =add/>
< / td>
< / tr>
< / table>
< div id =orderItemsclass =tablecontainer>
< / div>
@ *< div style =padding：10px 0px; text-align：right>
< input id =submittype =buttonvalue =Savestyle =padding：10px 20px/>
< / div> * @
< div class =form-group>
@ *< input type =submitvalue =创建class =btn btn-default/> * @
< button id =saveOrdertype =submitvalue =创建class =btn btn-default>保存订单< / button>
< / div>
< / div>
< / form>
< / div>
< / div>
解决方案
（document）.ready（function（）{
var orderItems = [];
//添加按钮单击功能
（'#add'）。click（function（）{
//检查订单项$ b的验证$ b var isValidItem = true;
//如果有效，则将项目添加到列表
if（isValidItem）{
orderItems.push（{
SalesLineNo：
（'＃SalesLineNo'）。val（）。trim（），
ItemCode：
Problem
cannot pass data from view to controller by ajax request as input parameters to controller action method
I have class model name SalesHeader as following
public class SalesHeader
{
public int SalesOrderNo { get; set; }
public int SalesYear { get; set; }
public int CustomerID { get; set; }
public Customer Customers { get; set; }
public ICollection<SalesFooter> SalesFooters { get; set; }
}
I make controller SalesOrder Based on SalesHeader model
in salesorder controller i have actionresult Create
I need to pass data from view of create action result to controller salesorder Create Method As Input parameters
[HttpPost]
public ActionResult Create(SalesHeader sh, SalesFooter[] orderItems)
{
}
sales header represented bySalesHeader sh as ( SalesOrderNo,SalesYear,CustomerId )
sales Footer represented by SalesFooter sh as ( SalesLineNo,ItemCode,Quantity,UnitPrice,Total )
and SalesFooter[] orderItems represent public ICollection<salesfooter> SalesFooters { get; set; }
and i will receive items data from view to controller as array of items
Design of form
on Header(represent by Sales Header Model)
SalesOrderNO 1
SalesYear 2019
CustomerNo 2509
on Footer(represent by Sales Footer Model)
SalesLineNo ItemCode Quantity Price Total
1 12929 5 10 50
2 17918 4 5 20
so that i will put break point on create method and when click save button
it must have one record on sales header(sh) and two records on sales footer ( orderItems)
so that my main question how to pass these record from view to controller
I work on asp.net core 2.1 visual studio 2017 sql server 2012
after click save button i make inspect i found two records already sent but on controller nothing exist on sales header or footet paramters of create
What I have tried:
my view as following
@model TabDataAccess.Dto.SalesHeader
<script>
$(document).ready(function () {
var orderItems = [];
//Add button click function
$('#add').click(function () {
//Check validation of order item
var isValidItem = true;
//Add item to list if valid
if (isValidItem) {
orderItems.push({
SalesLineNo: $('#SalesLineNo').val().trim(),
ItemCode: $('#ItemCode').val().trim(),
Quantity: parseInt($('#Qunatity').val().trim()),
UnitPrice: parseFloat($('#UnitPrice').val().trim()),
Total: parseInt($('#Qunatity').val().trim()) * parseFloat($('#UnitPrice').val().trim())
});
////Clear fields
$('#SalesLineNo').val('').focus();
$('#ItemCode','#Qunatity,#UnitPrice').val('');
}
//populate order items
GeneratedItemsTable();
});
function GeneratedItemsTable() {
if (orderItems.length > 0) {
var $table = $('<table/>');
$table.append('<thead><tr><th>SalesLineNo</th><th>ItemCode</th><th>Qunatity</th><th>UnitPrice</th><th>Total</th><th></th></tr></thead>');
var $tbody = $('<tbody/>');
$.each(orderItems, function (i, val) {
var $row = $('<tr/>');
$row.append($('<td/>').html(val.SalesLineNo));
$row.append($('<td/>').html(val.ItemCode));
$row.append($('<td/>').html(val.Qunatity));
$row.append($('<td/>').html(val.UnitPrice));
$row.append($('<td/>').html(val.Total));
var $remove = $('<a href="#">Remove</a>');
$remove.click(function (e) {
e.preventDefault();
orderItems.splice(i, 1);
GeneratedItemsTable();
});
$row.append($('<td/>').html($remove));
$tbody.append($row);
});
console.log("current", orderItems);
$table.append($tbody);
$('#orderItems').html($table);
}
else {
$('#orderItems').html('');
}
}
$("#saveOrder").click(function (e) {
e.preventDefault();
var orderItems = [];
orderItems.length = 0;
orderItems.push({
SalesLineNo: $('#SalesLineNo').val().trim(),
ItemCode: $('#ItemCode').val().trim(),
Quantity: parseInt($('#Qunatity').val().trim()),
UnitPrice: parseFloat($('#UnitPrice').val().trim()),
Total: parseInt($('#Qunatity').val().trim()) * parseFloat($('#UnitPrice').val().trim())
});
var data = JSON.stringify({
orderfooter: orderItems
});
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: '/SalesOrder/Create',
data: orderItems,
success: function (result) {
alert(result);
location.reload();
},
error: function () {
alert("Error!")
}
});
});
});
</script>
<h2>Create</h2>
<h4>SalesHeader</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="SalesOrderNo" class="control-label"></label>
<input asp-for="SalesOrderNo" class="form-control" />
<span asp-validation-for="SalesOrderNo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="SalesYear" class="control-label"></label>
<input asp-for="SalesYear" class="form-control" />
<span asp-validation-for="SalesYear" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CustomerID" class="control-label"></label>
@*<select asp-for="CustomerID" class="form-control" asp-items="ViewBag.CustomerID"></select>*@
<input asp-for="CustomerID" class="form-control" />
<span asp-validation-for="CustomerID" class="text-danger"></span>
</div>
<div class="details">
<h4>Order Items</h4>
<table width="100%">
<tr>
<td>SalesLineNo</td>
<td>ItemCode</td>
<td>Quantity</td>
<td>UnitPrice</td>
<td>Total</td>
<td> </td>
</tr>
<tr>
<td>
<input type="text" id="SalesLineNo" />
<span class="error">Item name required</span>
</td>
<td>
<input type="text" id="ItemCode" />
<span class="error">Valid quantity required</span>
</td>
<td>
<input type="text" id="Qunatity" />
<span class="error">Valid rate required</span>
</td>
<td>
<input type="text" id="UnitPrice" />
<span class="error">Valid rate required</span>
</td>
<td>
<input type="text" id="Total" />
<span class="error">Valid rate required</span>
</td>
<td>
<input type="button" id="add" value="add" />
</td>
</tr>
</table>
<div id="orderItems" class="tablecontainer">
</div>
@*<div style="padding:10px 0px; text-align:right">
<input id="submit" type="button" value="Save" style="padding:10px 20px" />
</div>*@
<div class="form-group">
@*<input type="submit" value="Create" class="btn btn-default" />*@
<button id="saveOrder" type="submit"value="Create" class="btn btn-default">Save Order</button>
</div>
</div>
</form>
</div>
</div> 解决方案
(document).ready(function () { var orderItems = []; //Add button click function
('#add').click(function () { //Check validation of order item var isValidItem = true; //Add item to list if valid if (isValidItem) { orderItems.push({ SalesLineNo:
('#SalesLineNo').val().trim(), ItemCode:
这篇关于如何通过ajax请求将数据从视图传递到控制器作为控制器操作方法的输入参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
