我要更改创建表的条件，如下所示:
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.
示例:如果DefineNumber为5，则表的行为5，该表的结构将与旧表相同(A列0和B列0 ++).
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++).
这是我的代码:
//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:
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>推荐答案
您可以将表放置在局部视图中，当您在索引视图中更改输入时，它将调用操作以返回具有相应模型数据的局部视图.
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.索引视图:
@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
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方法
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); }更多推荐
通过ASP .Net Core 2.2中的绑定模型更新表
发布评论