通过 ASP .Net Core 2.2 中的绑定模型更新表答案

【问题标题】：Update Table via Binding Model in ASP .Net Core 2.2通过 ASP .Net Core 2.2 中的绑定模型更新表
【发布时间】：2019-10-03 03:59:51
【问题描述】：

我想像这样更改创建表条件：

有一种通过列表模型创建表格的方法。我的目标是，当在Determine Number文本框中输入一个数字时，表格会根据Determine Number改变。

示例：如果DetermineNumber 为5，则该表的行为5，该表的结构将与旧表相同（A 列0 和B 列0++）。

这是我的代码：

//My Home Controller

using Microsoft.AspNetCore.Mvc;
using MyWeb.Models;
using System.Collections.Generic;

namespace MyWeb.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            var send_class = new GetChecking();
            var send_list = new List<MyClass>();
            send_class.DetermineNumber = 10;
            for (int i = 0; i < send_class.DetermineNumber; i++)
            {
                send_list.Add(new MyClass { A = 0, B = i });
            }
            send_class.GetMyList = send_list;
            return View(send_class);
        }
    }
}
//My Class

using System.Collections.Generic;

namespace MyWeb.Models
{
    public class GetChecking
    {
        public int DetermineNumber { get; set; }
        public List<MyClass> GetMyList { get; set; }
    }
    public class MyClass
    {
        public double A { get; set; }
        public double B { get; set; }
    }
}

最后，这是我的 Index.cshtml：

    <!-- My Index.cshtml -->

@model GetChecking
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>

    <div align="center">
        <table id="tablex">
            <tbody>
                    <tr>
                        <td>Tablex Row Count</td>
                        <td asp-for="@Model.DetermineNumber">@Html.TextBoxFor(m => Model.DetermineNumber)</td>
                    </tr>
            </tbody>
        </table>
    </div>
    <p></p>
    <div align="center">
        <table id="tablex">
            <thead>
                <tr><th colspan="2">My Main</th></tr>
                <tr>
                    <th colspan="1">A</th>
                    <th colspan="1">B</th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < Model.DetermineNumber; i++)
                {
                    <tr>
                        <td asp-for="@Model.GetMyList[i].A">@Html.TextBoxFor(m => Model.GetMyList[i].A)</td>
                        <td asp-for="@Model.GetMyList[i].B">@Html.TextBoxFor(m => Model.GetMyList[i].B)</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</body>
</html>

【问题讨论】：

您的要求不明确！请进一步解释！

标签： asp.net-mvc asp.net-core model-view-controller asp.net-ajax model-binding

【解决方案1】：

我尝试这样做但无法工作：

@model GetChecking
@{
    Layout = null;
}
<div align="center">
    <table id="tablex">
        <tbody>
            <tr>
                <td>Tablex Row Count</td>
                <td asp-for="@Model.DetermineNumber"><input id="number" name="number" type="text" oninput="changeNum()" /></td>
                <td asp-for="@Model.Checking"><input id="mycheck" name="mycheck" type="checkbox" oninput="changeNum()" /></td>

            </tr>
        </tbody>
    </table>
</div>
    <div align="center" id="indexWrapper">
        <partial name="_IndexPartial" model="@Model" />
    </div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
        function changeNum() {
            var num = $("#number").val();
            var che = $("#mycheck").val();
            $.ajax(
                {
                    type: "GET",
                    url:"/Home/GetTable?num=" + num + "&cont=" + che,
                    success: function (res) {
                        $("#indexWrapper").html(res)
                    }
                });
        }
</script>

【讨论】：

您需要在input 上使用asp-for 而不是<td>。 <input id="number" asp-for="@Model.DetermineNumber" oninput="changeNum()" /> <input id="mycheck" asp-for="@Model.Checking" type="checkbox" onchange="changeNum()" />。修改jsvar che = $("#mycheck").is(":checked");

【解决方案2】：

您可以将表格放在局部视图中，当您更改索引视图中的输入时，它会调用操作以返回带有相应模型数据的局部视图。

每次更改数字都不会刷新页面。参考下面的演示：

1.索引视图：

@model GetChecking

<div align="center">
    <table id="tablex">
        <tbody>
            <tr>
                <td>Tablex Row Count</td>
                <td><input asp-for="@Model.DetermineNumber" id="number" name="number" oninput="changeNum()" /></td>
            </tr>
        </tbody>
    </table>
</div>

<div align="center" id="indexWrapper">
    <partial name="_IndexPartial" model="@Model" />
</div>

@section Scripts
{
<script>
    function changeNum() {
        var num = $("#number").val();

        $.ajax(
            {
                type: "GET",
                url: "/Home/GetTable?Num=" + num,
                success: function (res) {
                    $("#indexWrapper").html(res)
                }
            });
    }
</script>
}

2.在Shared文件夹中添加部分视图_IndexPartial.cshtml

@model GetChecking
<table id="tablex">
    <thead>
        <tr><th colspan="2">My Main</th></tr>
        <tr>
            <th colspan="1">A</th>
            <th colspan="1">B</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.DetermineNumber; i++)
        {
            <tr>
                <td asp-for="@Model.GetMyList[i].A">@Html.TextBoxFor(m => Model.GetMyList[i].A)</td>
                <td asp-for="@Model.GetMyList[i].B">@Html.TextBoxFor(m => Model.GetMyList[i].B)</td>
            </tr>
        }
    </tbody>
</table>

3.HttpGet方法

public IActionResult GetTable(int num)
    {
        var send_class = new GetChecking();
        var send_list = new List<MyClass>();
        send_class.DetermineNumber = num;
        for (int i = 0; i < send_class.DetermineNumber; i++)
        {
            send_list.Add(new MyClass { A = 0, B = i });
        }
        send_class.GetMyList = send_list;
        return PartialView("_IndexPartial",send_class);
    }

【讨论】：

这是我正在寻找的工作和解决方案。要添加这个，有没有办法向控制器发送两个不同的变量？例如，在 ajax 中，发送变量只是“数字”。有没有机会喜欢输入中的整数和复选框中的布尔值？
当然你可以在url中添加更多变量作为查询字符串，并用&连接它们，例如url: "/Home/GetTable?Num=" + num + "&Value=" + value，和动作public IActionResult GetTable(int num, bool value)