通过 ASP .Net Core 2.2 中的绑定模型更新 Table

Question

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

有一种方法可以通过列表模型创建 table。我的目标是，当在确定数字文本框中输入数字时，table 将根据确定数字发生变化。

示例：如果 DetermineNumber 为 5，则 table 的行为 5，并且此 table 的结构将与旧版本相同（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>

Answer 1

您可以将 table 放置在分部视图中，当您更改 Index 视图中的输入时，它会调用 return 具有相应模型数据的分部视图的操作。

每次将number.Refer更改为以下演示时不会刷新页面：

1.Index 查看：

@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.Add 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);
    }

Answer 2

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

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

通过 ASP .Net Core 2.2 中的绑定模型更新 Table

Update Table via Binding Model in ASP .Net Core 2.2

model-view-controller

asp.net-mvc

asp.net-ajax

model-binding

asp.net-core