问MVC Core 3.1和Vue/Axios发布的空值
EN

Stack Overflow用户

提问于 2020-02-26 05:54:34

回答 1查看 2.3K关注 0票数 1

我在使用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>
}

我遗漏了什么？

vue.js

axios

asp.net-core-mvc

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-26 06: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);
});