通过ASP .Net Core 2.2中的绑定模型更新表 [英] 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.
示例:如果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中的绑定模型更新表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
