MVC Core 3.1 и Vue / Ax ios Проводка нулевых значений

Question

У меня проблемы с получением ASP. Net MVC Core 3.1 для отправки данных в метод Create controller. Может кто-нибудь сказать мне, что мне не хватает? Мой код достигает точки останова в методе Create Controller, но параметр всегда равен нулю. Пожалуйста помоги! Я потратил 3 дня на это и не могу понять это. В идеале я хотел бы отправить данные формы как 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>
}

Чего мне не хватает? Большое вам спасибо!

Answer 1

В Vue вы отправляете объект следующим образом:

{
    data: this.CardVendor                    
}

, но ваш метод Create контроллера принимает только строковый ввод, а не объект и, следовательно, его NULL.

[HttpPost]        
public ActionResult Create([FromBody]String CardVendor)

Исправлено : (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);
});