Обновление таблицы через модель связывания в ASP .Net Core 2.2 - PullRequest
Новая
       54

Обновление таблицы через модель связывания в ASP .Net Core 2.2

0 голосов
/ 16 мая 2019

Я хочу изменить условия создания таблицы следующим образом:

Существует способ создания таблицы с помощью модели списка.Моя цель: при вводе числа в текстовом поле «Определить номер» таблица изменится в соответствии с определением номера.

Пример: если DetermineNumber равен 5, то строка таблицы равна 5, и структура этой таблицы будетто же самое, что и более старые (столбец 0 и столбец B ++).

Вот мой код: 

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

Ответы [ 2 ]

1 голос
/ 16 мая 2019

Вы можете поместить таблицу в частичное представление, когда вы изменяете ввод в индексном представлении, она вызывает действие для возврата частичного представления с соответствующими данными модели.

Она не будет обновлять страницу каждый разВы меняете номер. См. демонстрационную версию ниже:

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.Добавить частичный просмотр _IndexPartial.cshtml в Shared папке 

@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);
    }
0 голосов
/ 17 мая 2019

Я пытаюсь это, но не могу работать: 

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