Как я могу вставить данные из строки таблицы в базу данных, нажав кнопку в строке в C# MVC - PullRequest
0 голосов
/ 04 августа 2020

У меня есть приложение MVC, которое заполняет данные в таблице и отображает их. В каждой строке таблицы есть кнопка, которая должна сохранять данные в базе данных. Я знаю, как сохранить данные из контроллера, я просто хочу знать, как передать данные из строки таблицы, по которой щелкнули мышью, в контроллер?

@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>
    }

Это моя таблица, которая заполняет данные из модель. Когда я нажимаю кнопку добавления, я хочу отправить все данные строки в контроллер.

1 Ответ

1 голос
/ 06 августа 2020

Дэвид Лян делает несколько хороших замечаний. Может быть, этот подход сработает для вас. Основная идея c состоит в том, чтобы преобразовать данные каждой строки в JSON. Затем отправьте JSON на сервер. Поскольку мы используем службу, например NewtonSoft. Json, для сериализации и десериализации данных, мы избегаем проблемы жестко запрограммированных значений, о которой упоминает Дэвид Лян.

Я написал демонстрацию, чтобы показать подход. Я пытался сохранить его таким же, как и ваш, но мне пришлось делать предположения, поскольку вы не включили все.

Сначала вам нужно установить пакет nuget Newtonsoft. Json.

Вот код на стороне сервера, то есть viewModels и контроллер. GET просто отправляет тестовые данные в представление. Метод POST - это тот, который вас заинтересует, он принимает строку JSON и десериализует ее, чтобы предоставить вам объект строки.

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.cs html file

@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. Когда кнопка нажата, мы создаем форму на лету, добавляем токен защиты от подделки и данные из нажатой кнопки, а затем отправляем на сервер. После того, как сервер десериализовался, вы получите требуемые данные строки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...