MVC Core 3.1和Vue/Axios发布的空值
MVC Core 3.1和Vue/Axios发布的空值
提问于 2020-02-26 13:54:34
我在使用ASP.Net MVC Core3.1将数据发布到Create控制器方法时遇到了问题。谁能告诉我我错过了什么吗？我的代码到达了Create控制器方法中的断点，但参数始终为null。
理想情况下，我希望以JSON的形式发送表单数据，并让JSON.Net将其转换为对象。我目前正在处理的消息来源是：https://github.com/encouragingapps/DebtRefresh。
这是我的控制器代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using DebtRefresh.WebUI.Models;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
namespace DebtRefresh.WebUI.Controllers
{
public class CreditCardController : Controller
{
// GET: CreditCard
public ActionResult Index()
{
return View();
}
// GET: CreditCard/Details/5
//public ActionResult Details(int id)
//{
// return View();
//}
// GET: CreditCard/Create
public ActionResult Create()
{
return View();
}
// POST: CreditCard/Create
[HttpPost]
public ActionResult Create([FromBody]String CardVendor)
{
try
{
String card;
card = CardVendor;
// THIS CODE ALWAYS RETURNS NULL DATA No matter what I try
return RedirectToAction(nameof(Index));
}
catch
{
return View();
}
}
// GET: CreditCard/Edit/5
//public ActionResult Edit(int id)
//{
// return View();
//}
// POST: CreditCard/Edit/5
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(int id, IFormCollection collection)
{
try
{
// TODO: Add update logic here
return RedirectToAction(nameof(Index));
}
catch
{
return View();
}
}
// GET: CreditCard/Delete/5
//public ActionResult Delete(int id)
//{
// return View();
//}
// POST: CreditCard/Delete/5
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Delete(int id, IFormCollection collection)
{
try
{
// TODO: Add delete logic here
return RedirectToAction(nameof(Index));
}
catch
{
return View();
}
}
}
}以下是vue代码：
var app = new Vue({
el: '#app',
data: {
CardVendor: '',
CardNickname: '',
CreditCardType: '',
CardLimit: '',
CardBalance: '',
InterestRates: [
{
interestRate: '0.30',
startDate: '1/1/2020',
endDate: '6/30/2020'
},
{
interestRate: '0.60',
startDate: '7/1/2020',
endDate: '12/31/2020'
}
]
},
methods: {
addInterestRate: function (event) {
this.interestRates.push({});
},
removeInterestRate: function (event) {
this.interestRates.pop({});
},
addCard: function (event) {
//alert(JSON.parse(JSON.stringify(app.$data)));
axios
.post('/CreditCard/Create', {
data: this.CardVendor
}).then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
})以下是视图：
@{
ViewData["Title"] = "Add Credit Card";
}
<h1>
Add Credit Card
</h1>
<div id="app">
<!--Vue App Start-->
<label>Credit Card Vendor Name:</label>
<br />
<input v-model="CardVendor" placeholder="[Enter Credit Card Vendor Name]" size="50">
<br /><br />
<label>Credit Card Nick Name:</label>
<br />
<input v-model="CardNickname" placeholder="[Enter Credit Card Nickname]" size="50">
<br /><br />
<label>Credit Card Type:</label>
<br />
<select v-model="CreditCardType">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
<option value="3">Discover</option>
<option value="4">American Express</option>
<option value="5">Other</option>
</select>
<br /><br />
<label>Credit Card Credit Limit:</label>
<br />
<input v-model="CardLimit" placeholder="[Enter Credit Card Limit]" size="50">
<br /><br />
<label>Credit Card Credit Balance:</label>
<br />
<input v-model="CardBalance" placeholder="[Enter Credit Card Balance]" size="50">
<br /><br />
<label>Add Interest Rate(s):</label>
<table border="1">
<thead>
<tr>
<th>Interest Rate %</th>
<th>Start Date</th>
<th>End Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in InterestRates">
<td><input type="text" v-model="item.interestRate"></td>
<td><input type="text" v-model="item.startDate"></td>
<td><input type="text" v-model="item.endDate"></td>
<td><button type="button" v-on:click="removeInterestRate(item)">Remove</button>
</tr>
</tbody>
</table>
<button v-on:click="addInterestRate">Add Interest</button>
<br />
<br />
<button v-on:click="addCard">Add Card</button>
<br />
<br />
<font color="gray">CardVendor-debug: {{ CardVendor }}</font><br />
<font color="gray">CardNickname-debug: {{ CardNickname }}</font><br />
<font color="gray">Creditcardtype-debug: {{ CreditCardType }}</font><br />
<font color="gray">CardLimit-debug: {{ CardLimit }}</font><br />
<font color="gray">CardBalance-debug: {{ CardBalance }}</font><br />
<!--Vue App End-->
</div>
@section Scripts{
<script src="~/lib/vue/vue.js"></script>
<script src="~/lib/axios/axios.js"></script>
<script src="~/js/addcreditcard.js"></script>
}我遗漏了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-26 14:37:55
在Vue中，您要发送这样一个对象：
{
data: this.CardVendor
}但是您的控制器Create方法只接受字符串输入，而不是对象，因此它是空的。
[HttpPost]
public ActionResult Create([FromBody]String CardVendor)Fix：(1) 可以修改c#控制器以接收对象而不是字符串。因此，请修改您的控制器操作，以便在下面这样的对象中执行：
[HttpPost]
public ActionResult Create([FromBody]CardVendorModel cardVendorModel)并定义一个C#模型如下：
public class CardVendorModel
{
public string data {get; set;}
}(2) 或修改Vue代码将字符串发送到MVC控制器操作，如下所示：
axios.post('/CreditCard/Create',
'\'' + this.CardVendor + '\'')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60415517
复制相关文章
相似问题
腾讯云开发者
