以 ASP.NET MVC 表格形式动态添加行
Posted
技术标签:
【中文标题】以 ASP.NET MVC 表格形式动态添加行【英文标题】：Dynamically add rows in ASP.NET MVC table form 【发布时间】：2019-09-28 22:22:27 【问题描述】：我正在尝试在 ASP.NET MVC 表下方编写一个“添加”按钮来动态追加一个空白行，然后有一个提交按钮以一键将每一行保存到数据库中。
在 SO 上有 several similar questions 但没有一个我能够应用到这个。我一直在尝试申请this example，但“添加”按钮没有追加新行。
型号：
public class TableForm
public int Id get; set;
public List<TableFormData> TableFormDatas get; set;
public class TableFormData
public int Id get; set;
public string ClientSampleID get; set;
public string AdditionalComments get; set;
public string AcidStables get; set;
剃刀视图：
@model NewTestSix.Models.TableForm
@
ViewData["Title"] = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
@using (Html.BeginForm())
@Html.ValidationSummary(true)
<fieldset>
<legend>Sample submission</legend>
<table id="submissionTable" class="table table-bordered">
<thead>
<tr>
<td>Sample ID</td>
<td>Additional Comments</td>
<td>Acid-stable amino acids</td>
</tr>
</thead>
<tr id="tablerow0">
<td>
<div class="editor-field">
<input class="text-box single-line" name="ClientSampleID[0]" type="text" value="" required="required" />
</div>
</td>
<td>
<div class="editor-field">
<input class="text-box single-line" name="AdditionalComments[0]" type="text" value="" required="required" />
</div>
</td>
<td>
<div class="editor-field">
<input class="text-box single-line" name="AcidStables[0]" type="text" value="" />
</div>
</td>
<td>
<button type="button" class="btn btn-primary" onclick="removeTr(0);">Delete</button>
</td>
<td>
</td>
</tr>
</table>
<p>
<button id="add" type="submit" class="btn btn-primary">Add</button>
</p>
<hr />
<p>
<input type="submit" value="Create" class="btn btn-default" />
</p>
</fieldset>
@section Scripts
<script src="~/bundles/jqueryval.js" type="text/javascript">
var counter = 1;
$(function ()
$('#add').click(function ()
$('<tr id="tablerow' + counter + '"><td>' +
'<input type="text" class="text-box single-line" name="ClientSampleID[' + counter + ']" value="" required="required" />' +
'</td>' +
'<td>' +
'<input type="text" class="text-box single-line" name="AdditionalComments[' + counter + ']" value="" required="required" />' +
'</td>' +
'<td>' +
'<input type="text" class="text-box single-line" name="AcidStables[' + counter + ']" value="" required="required" />' +
'</td>' +
'<td>' +
'<button type="button" class="btn btn-primary" onclick="removeTr(' + counter + ');">Delete</button>' +
'</td>' +
'</tr>').appendTo('#submissionTable');
counter++;
return false;
);
);
function removeTr(index)
if (counter > 1)
$('#tablerow' + index).remove();
counter--;
return false;
</script>
现阶段我并不太关心模型与控制器的绑定，我只是想让这个添加按钮工作。示例控制器：
[HttpPost]
public ActionResult Index(string any = "")
IList<TableForm> _TableForm = new List<TableForm>();
//Loop through the forms
for (int i = 0; i <= Request.Form.Count; i++)
var ClientSampleID = Request.Form["ClientSampleID[" + i + "]"];
var additionalComments = Request.Form["AdditionalComments[" + i + "]"];
var acidStables = Request.Form["AcidStables[" + i + "]"];
if (!String.IsNullOrEmpty(ClientSampleID))
_TableForm.Add(new TableForm ClientSampleID = ClientSampleID, AcidStables = acidStables, AdditionalComments = additionalComments );
return View();
感谢您提供任何见解。
当前：
点击“添加”按钮后需要：
【问题讨论】：
【参考方案1】：改变你的
<button id="add" type="submit" class="btn btn-primary">Add</button>
进入
<button id="add" type="button" class="btn btn-primary">Add</button>
...因为我认为“添加”按钮不应该让浏览器在单击时提交表单，它应该只调用按钮的客户端 'click' 事件处理程序。
然后从script 元素的开始标记中删除src="~/bundles/jqueryval.js" 部分：inline scripts 不能有src="" 属性。
像这样：
<script type="text/javascript">
var counter = 1;
//... the rest of your code is here...
</script>
如果您确实有一个jqueryval.js 文件，请将其放在另一个<script> 标记中。
如果我没记错的话，这就是你所期望的结果。
var counter = 1;
$(function ()
$('#add').click(function ()
$('<tr id="tablerow' + counter + '"><td>' +
'<input type="text" class="text-box single-line" name="ClientSampleID[' + counter + ']" value="" required="required" />' +
'</td>' +
'<td>' +
'<input type="text" class="text-box single-line" name="AdditionalComments[' + counter + ']" value="" required="required" />' +
'</td>' +
'<td>' +
'<input type="text" class="text-box single-line" name="AcidStables[' + counter + ']" value="" required="required" />' +
'</td>' +
'<td>' +
'<button type="button" class="btn btn-primary" onclick="removeTr(' + counter + ');">Delete</button>' +
'</td>' +
'</tr>').appendTo('#submissionTable');
counter++;
return false;
);
);
function removeTr(index)
if (counter > 1)
$('#tablerow' + index).remove();
counter--;
return false;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<legend>Sample submission</legend>
<table id="submissionTable" class="table table-bordered">
<thead>
<tr>
<td>Sample ID</td>
<td>Additional Comments</td>
<td>Acid-stable amino acids</td>
</tr>
</thead>
<tr id="tablerow0">
<td>
<div class="editor-field">
<input class="text-box single-line" name="ClientSampleID[0]" type="text" value="" required="required" />
</div>
</td>
<td>
<div class="editor-field">
<input class="text-box single-line" name="AdditionalComments[0]" type="text" value="" required="required" />
</div>
</td>
<td>
<div class="editor-field">
<input class="text-box single-line" name="AcidStables[0]" type="text" value="" />
</div>
</td>
<td>
<button type="button" class="btn btn-primary" onclick="removeTr(0);">Delete</button>
</td>
<td></td>
</tr>
</table>
<p>
<button id="add" type="button" class="btn btn-primary">Add</button>
</p>
<hr />
<p>
<input type="submit" value="Create" class="btn btn-default" />
</p>
</fieldset>如果有帮助，请告诉我。
【讨论】：
一直在寻找类似的东西，因为它基本上是我历史上使用过的方法，但是真的没有比将要添加的整个表格行编码为更好的方法了一个字符串，然后将其添加到 DOM 中？即使对于中等复杂的表与 HTML Helper 函数之类的东西，它也感觉不是很干净/可维护。我能想到的唯一其他选择是使用局部视图和 AJAX，但感觉一直到服务器并返回少数表行感觉很浪费。 如果需要复杂的 DOM 操作，我认为我们需要前端库。它不必像 Angular 那样是成熟的框架。像 Vue 这样的轻量级工具，甚至像 Mustache 这样的模板库都可以解决问题。【参考方案2】：你可以使用jQuery jqGrid
它是一个免费和开源的 jquery 插件。这完全 启用 Ajax 以显示表格数据并进行操作。此外， 我们可以应用不同的 Jquery UI 主题，看演示。
操作方法：这里什么都没有，因为我们将使用 json 格式的 Ajax 获取产品详细信息。
public ActionResult GetProducts(string sidx, string sord, int page, int rows)
var products = Product.GetSampleProducts();
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = products.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var data = products.OrderBy(x => x.Id)
.Skip(pageSize * (page - 1))
.Take(pageSize).ToList();
var jsonData = new
total = totalPages,
page = page,
records = totalRecords,
rows = data
;
return Json(jsonData, JsonRequestBehavior.AllowGet);
并将此标签添加到目标页面
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
在脚本部分之后添加：
<script>
var myGrid = $('#jqGrid');
myGrid.jqGrid(
url: '/Home/GetProducts/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['ProductID', 'Name', 'Price', 'Department', 'Action'],
colModel: [
name: 'Id', key: true, width: 75 ,
name: 'Name', key: true, width: 200 ,
name: 'Price', key: true, width: 75 ,
name: 'Department', key: true, width: 200 ,
name: 'Edit', key: true, width: 100, editable: true, formatter: editButton
],
rowNum: 4,
pager: '#jqGridPager',
gridview: true,
rownumbers: true,
pagerpos: 'center'
);
</script>
原帖是here
【讨论】：
以上是关于以 ASP.NET MVC 表格形式动态添加行的主要内容，如果未能解决你的问题，请参考以下文章
在 asp .NET MVC 中提交表单之前动态地将项目添加到列表中
在 ASP.Net Web 表单/MVC 中动态加载和添加字段