如何在單擊 C# MVC 中的行中的按鈕時將表行中的數據插入數據庫

Question

我有一個 MVC 應用程序，它將數據填充到表中並顯示它。 每個表行都有一個按鈕，可以將數據保存到數據庫中。 我知道如何從 controller 保存數據，我只想知道如何將點擊的表格行中的數據傳遞給 controller？

@foreach (var item in Model.Properties)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.GrossYield)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.listPrice)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.monthlyRent)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.yearBuilt)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Addresses.address1)
                <br />
                @Html.DisplayFor(modelItem => item.Addresses.address2),
                @Html.DisplayFor(modelItem => item.Addresses.district),
                @Html.DisplayFor(modelItem => item.Addresses.state),
                @Html.DisplayFor(modelItem => item.Addresses.zip),
                @Html.DisplayFor(modelItem => item.Addresses.country).
            </td>
            <td>
                <button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
             </td>
        </tr>
    }

這是我的表格，它填充來自 model 的數據。 當我單擊添加按鈕時，我想將整個行數據發送到 controller。

Answer 1

David Liang 提出了一些很好的觀點。 也許這種方法對你有用。 基本思路是將每一行的數據轉換成JSON。 然后將 JSON 發送到服務器。 因為我們使用服務，即 NewtonSoft.Json，來序列化和反序列化數據，我們避免了 David Liang 提到的硬編碼值問題。

我寫了一個演示來展示這種方法。 我試圖保持與您的相同，但由於您沒有包括所有內容，因此不得不進行猜測。

首先，您需要安裝 nuget package Newtonsoft.Json。

這是服務器端代碼，即 viewModels 和 controller。 GET 只是將測試數據發送到視圖。 POST 方法是您感興趣的方法，它接受 JSON 字符串並將其反序列化以提供您的行 object。

using Newtonsoft.Json;
using System.Collections.Generic;
using System.Web.Mvc;

namespace InsertRow.Controllers
{
    public class MyViewModel
    {
        public List<BuildingViewModel> Properties { get; set; }
    }

    public class BuildingViewModel
    {
        public string GrossYield { get; set; }
        public string listPrice { get; set; }
        public string monthlyRent { get; set; }
        public string yearBuilt { get; set; }
        public AddressViewModel Addresses { get; set; }
    }

    public class AddressViewModel
    {
        public string address1 { get; set; }
        public string address2 { get; set; }
        public string district { get; set; }
        public string state { get; set; }
        public string zip { get; set; }
        public string country { get; set; }
    }

    public class HomeController : Controller
    {       
        public ActionResult Index()
        {
            var myTestData = new List<BuildingViewModel>()
            {
                new BuildingViewModel
                {
                    GrossYield = "gy1",
                    listPrice = "lp1",
                    monthlyRent = "mr1",
                    yearBuilt = "yb1",
                    Addresses = new AddressViewModel
                    {
                        address1 = "a11",
                        address2 = "a21",
                        district = "d1",
                        state = "s1",
                        zip = "z1",
                        country = "c1"
                    }
                },
                new BuildingViewModel
                {
                    GrossYield = "gy2",
                    listPrice = "lp2",
                    monthlyRent = "mr2",
                    yearBuilt = "yb2",
                    Addresses = new AddressViewModel
                    {
                        address1 = "a12",
                        address2 = "a22",
                        district = "d2",
                        state = "s2",
                        zip = "z2",
                        country = "c2"
                    }
                }
            };

            var viewModel = new MyViewModel
            {
                Properties = myTestData
            };           

            return View(viewModel);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Index(string rowJson)
        {
            var data = JsonConvert.DeserializeObject<BuildingViewModel>(rowJson);
            //code to save the data to the database goes here.
            return RedirectToAction("index");
        }
    }
}

這是 index.cshtml 文件

@using InsertRow.Controllers
@using Newtonsoft.Json
@model MyViewModel

@Html.AntiForgeryToken()
<table>
    <tbody>
        @foreach (var item in Model.Properties)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.GrossYield)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.listPrice)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.monthlyRent)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.yearBuilt)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Addresses.address1)
                    <br />
                    @Html.DisplayFor(modelItem => item.Addresses.address2),
                    @Html.DisplayFor(modelItem => item.Addresses.district),
                    @Html.DisplayFor(modelItem => item.Addresses.state),
                    @Html.DisplayFor(modelItem => item.Addresses.zip),
                    @Html.DisplayFor(modelItem => item.Addresses.country).
                </td>
                <td>
                    <button data-row="@JsonConvert.SerializeObject(item)"
                            class="clsActionButton">Add</button>
                </td>
            </tr>
        }
        </tbody>
</table>

<script>
    var addButtons = document.querySelectorAll(".clsActionButton");
    var addButtonCount = addButtons.length;
    for (var i = 0; i < addButtonCount; i++) {
        addButtons[i].addEventListener('click', onAddRowClicked);
    }

    function onAddRowClicked(e) {
        e.preventDefault();
        var btn = this;
        var data = btn.dataset.row;
        var form = document.createElement("form");
        form.method = "post";
        form.action = '/home/index';
        var antiForgeryInput = document.querySelector('input[name="__RequestVerificationToken"]');
        form.appendChild(antiForgeryInput); 
        var input = document.createElement('input');
        input.setAttribute("type", "hidden");
        input.setAttribute("value", data);
        input.setAttribute("name", "rowJson");
        form.appendChild(input); 
        document.body.appendChild(form);
        form.submit();
    }
</script>

請注意我對按鈕所做的操作。 我已將該行的所有數據添加為數據屬性。 這種方法的好處是，如果將來數據發生變化，此按鈕的代碼可以保持不變。

另請注意 javascript。 單擊按鈕時，我們會即時創建一個表單，添加防偽令牌和來自單擊按鈕的數據，然后提交到服務器。 服務器反序列化后，您將獲得所需的行數據。