MVC Core 3.1和Vue/Axios发布空值

本文介绍了MVC Core 3.1和Vue/Axios发布空值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在获取ASP.Net MVC Core 3.1将数据发布到创建"控制器方法时遇到问题.有人可以告诉我我想念什么吗?我的代码到达了Create Controller方法中的断点，但是参数始终为null.请帮忙！我花了三天的时间，无法解决.理想情况下，我想将表单数据作为JSON发送，并让JSON.Net将其转换为对象.我当前正在使用的源位于: github/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: github/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); });