Update Table via Binding Model in ASP .Net Core 2.

2019-08-22 11:58发布

站内问答 / 前端开发
1294 2 4

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>

2条回答
beautiful°
2楼-- · 2019-08-22 12:00

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);
    }
查看更多
0人赞 添加讨论(0) 举报
何必那么认真
3楼-- · 2019-08-22 12:08

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)