Update Table via Binding Model in ASP .Net Core 2.2

问题

I want to change creating table conditions like this:

There is a way of creating table via list model. My aim, when input a number in Determine Number Text Box, then the table will change according to Determine Number.

Example: If DetermineNumber is 5, then the table's row is 5 and the structure of this table will be same like older (A column 0 and B column 0++).

Here is my code:

//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; }
    }
}

Lastly, here is my 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>

回答1:

You could place the table in a partial view, when you change the input in Index view, it calls the action to return the partial view with corresponding model data.

It will not refresh the page each time you change the number.Refer to below demo:

1.Index View:

@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 a partial view _IndexPartial.cshtml in Shared folder

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

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);
    }

回答2:

I try to this but cant work:

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

来源：https://stackoverflow.com/questions/56158977/update-table-via-binding-model-in-asp-net-core-2-2

标签

asp.net-mvc

asp.net-core

model-view-controller

asp.net-ajax

model-binding