將行添加到ASP.NET MVC表時更新連接的數據庫表

Question

以下代碼構成了我當前正在使用的ASP.NET MVC應用程序的一部分。 索引創建了一個表，用戶可以通過將標簽，服務器和頻率的值輸入到彈出模式（通過單擊“添加”按鈕激活，模式HTML代碼未顯示）來添加行。 該表的初始值當前是通過從鏈接的SQL數據庫表（通過使用實體框架創建）進行遷移而生成的。

我正在嘗試修改此代碼，以便“添加”按鈕添加的任何行都將自動添加到鏈接的數據庫表中（最好使用實體框架）。 任何幫助，將不勝感激。

調節器

namespace ExampleWebAppilcationTest.Controllers
{
public class HomeController : Controller
{
    ExampleDB _db = new ExampleDB();

    public ActionResult Index()
    {
        var model = _db.TData.ToList();
        return View(model);
    }

    protected override void Dispose(bool disposing)
    {
        if (_db != null)
        {
            _db.Dispose();
        }
        base.Dispose(disposing);
    }
}
}

類

namespace ExampleWebAppilcationTest
{
public class ExampleDB : DbContext
{
    public DbSet<TableData> TData { get; set; }
}
}



namespace ExampleWebAppilcationTest
{
public class TableData
{
    [Key]
    public String Tag { get; set; }
    public String Server { get; set; }
    public double Frequency { get; set; }
}
}

指數

@model IEnumerable<ExampleWebAppilcationTest.TableData>

@{
ViewBag.Title = "Home Page";
}

@{
ViewBag.Title = "Index";
}

<h2>Table Data</h2>

<table class="table table-bordered" id="mainTable">
<thead>
    <tr>
        <th></th>
        <th class="thTag" scope="col">
            @Html.DisplayNameFor(model => model.Tag)
        </th>
        <th class="thServer" scope="col">
            @Html.DisplayNameFor(model => model.Server)
        </th>
        <th class="thFreq" scope="col">
            @Html.DisplayNameFor(model => model.Frequency)
        </th>
    </tr>
</thead>
        <tbody>
            <tr>
                <td colspan="5">

                        @foreach (var item in Model)
                        {
            <tr>
                <td><input type="checkbox"/></td>
                <td>
                    @Html.DisplayFor(modelItem => item.Tag)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Server)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Frequency)
                </td>
            </tr>
</tbody>
</table>

        <button type="button" id="addBtn" class="btn btn-success">Add</button>

            <!-- The Modals -->

            <script>

                var table = document.getElementById('mainTable');
                // Get the modal
                var addmodal = document.getElementById('addModal');

                // When the user clicks the button, open the modal
                btn.onclick = function () {
                    addmodal.style.display = "block";
                }

               var sbtn = document.getElementById("subBtn");
                sbtn.onclick = function () {
                    var table = document.getElementById("mainTable");
                    var tag = document.getElementById("tag").value;
                    var server = document.getElementById("server").value;
                    var frequency = document.getElementById("frequency").value;
                    var objInputCheckBox = document.createElement("input");
                    objInputCheckBox.type = "checkbox";
                    var row = table.insertRow(-1);
                    var cell1 = row.insertCell(0);
                    var cell2 = row.insertCell(1);
                    var cell3 = row.insertCell(2);
                    var cell4 = row.insertCell(3);
                    cell1.appendChild(objInputCheckBox);
                    cell2.innerHTML = tag;
                    cell3.innerHTML = server;
                    cell4.innerHTML = frequency;
                    addmodal.style.display = "none";

                }

Answer 1

盡管您應該為您的項目提供一個具有獨立業務和數據訪問層的分層體系結構 ，並且控制器應僅是傳入請求的網關https://docs.microsoft.com/zh-cn/dotnet/standard/microservices-architecture/microservice- ddd-cqrs-patterns / infrastructure-persistence-layer-design ）

這是您當前可以進行的調整：

控制器 ：

namespace ExampleWebAppilcationTest.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            using (var dbContext = new ExampleDB())
            {
                var model = dbContext.TData.ToList();
                return View(model);
            }
        }

        [HttpPost]
        public ActionResult Index(TableData data)
        {
            using (var dbContext = new ExampleDB())
            {
                dbContext.TData.Add(data);
                dbContext.SaveChanges();
            }

            return RedirectToAction("Index");
        }
    }
}

資料存取

namespace ExampleWebAppilcationTest
{
public class ExampleDB : DbContext
{
    public ExampleDB() : base(nameOrConnectionString: "Your Database Connection String") { }
    public DbSet<TableData> TData { get; set; }
}
}



namespace ExampleWebAppilcationTest
{
public class TableData
{
    [Key]
    public String Tag { get; set; }
    public String Server { get; set; }
    public double Frequency { get; set; }
}
}

視圖

sbtn.onclick = function () {
            var table = document.getElementById("mainTable");
            var tag = document.getElementById("tag").value;
            var server = document.getElementById("server").value;
            var frequency = document.getElementById("frequency").value;

            //Here fetch all data in a class
            var data = { Tag: tag, Server: server, Frequency: frequency };

            //make ajax call to add data
            $.ajax({
                type: "POST",
                url: '@Url.Action("Index", "Home")',     //your action
                data: data,
                dataType: 'json',
                success: function (result) {
                    //to close the popup
                },
                error: function (result) {
                    //to show error message
                }
            });
                }

Answer 2

您需要向控制器添加某種類型的Add方法，並用POST屬性裝飾。 在您的模式中，需要有一個指向控制器的add方法url的表單。 該表格應包含所有表屬性的輸入字段。 然后，應通過“提交”按鈕將該表單發布到控制器上的add方法。 add方法需要采用提交表單的屬性，創建一個新對象，然后將新對象插入數據庫中。