MVC Core 3.1和Vue/Axios发布空值 [英] MVC Core 3.1 and Vue/Axios Posting Null Values
问题描述
我在获取ASP.Net MVC Core 3.1将数据发布到创建"控制器方法时遇到问题.有人可以告诉我我想念什么吗?我的代码到达了Create Controller方法中的断点，但是参数始终为null.请帮忙！我花了三天的时间，无法解决.理想情况下，我想将表单数据作为JSON发送，并让JSON.Net将其转换为对象.我当前正在使用的源位于: https://github.com/encouragingapps/DebtRefresh .
I am having issues getting ASP.Net MVC Core 3.1 to post data to the Create controller method. Can someone tell me what I am missing? My code is hitting the break point in the Create Controller method but the parameter is always null. Please help! I have spent 3 days on this and can't figure it out. Ideally I would like to send the form data as JSON and have JSON.Net convert it to an object. The source I am currently working on is at: 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>
}
我想念什么?非常感谢！
What am I missing? Thank you so much!
推荐答案
在Vue中，您正在发送这样的对象:
In Vue, you are sending an object like this:
{
data: this.CardVendor
}
但是您的控制器的Create方法仅接受字符串输入而不是对象，因此其值为NULL.
but your controller Create method takes just string input not an object and hence its NULL.
[HttpPost]
public ActionResult Create([FromBody]String CardVendor)
修复:(1)可以修改c#控制器以使用对象而不是字符串.因此，请修改您的控制器操作以接收如下对象:
Fix: (1) Either modify c# controller to take in an object instead of string. So, please modify your controller action to take in an object like below:
[HttpPost]
public ActionResult Create([FromBody]CardVendorModel cardVendorModel)
并定义如下的C#模型:
and define a C# model as below:
public class CardVendorModel
{
public string data {get; set;}
}
(2)或修改Vue代码以将字符串发送到MVC控制器操作，如下所示:
(2) Or modify Vue code to send a string to MVC controller action like below:
axios.post('/CreditCard/Create',
'\'' + this.CardVendor + '\'')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
这篇关于MVC Core 3.1和Vue/Axios发布空值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
