在编辑模式下显示带有编辑按钮的 mvc html 表和数据作为标签，同时显示和数据作为文本框
Posted
技术标签:
【中文标题】在编辑模式下显示带有编辑按钮的 mvc html 表和数据作为标签，同时显示和数据作为文本框【英文标题】：Display mvc html table with edit button and data as label while display and data as textbox during edit mode 【发布时间】：2020-09-25 00:00:59 【问题描述】：我想显示带有编辑按钮和表格数据作为标签的 html 表格，当单击“编辑”按钮时，表格行应在文本框中显示数据，如下图所示
带标签的表格数据（正常显示）：
带有文本框的表格数据（点击编辑按钮时显示）：
整页浏览：
有以下问题：
-
有没有办法将表格数据分别显示为标签/文本框，而无需使用显示/隐藏控件，因为它需要复制每一行数据。在我的代码中，我使用 jQuery 来相应地显示和隐藏我不想做的控件。
由于我的视图绑定了两个模型，因此使用了 ViewModel(PurchaseComplete) 概念，一个是 PurchaseModel，另一个是 List
PurchaseComplete.cs
public class PurchaseComplete
public PurchaseModel purchase get; set;
public List<PurchaseModel> purchases get; set;
PurchaseModel.cs
public class PurchaseModel
public int Id get; set;
[Required]
[DisplayName("GST Number")]
public string GSTNumber get; set;
[Required]
[DisplayName("Distributor Name")]
public string DistributorName get; set;
[Required]
[DisplayName("Invoice Date")]
public DateTime? InvoiceDate get; set;
[Required]
[DisplayName("Invoice Number")]
public string InvoiceNumber get; set;
[Required]
[DisplayName("Purchase Amount")]
public double? Total get; set;
public DateTime? CreatedDate get; set;
HomeController.cs
public class HomeController : Controller
AEEntities aEEntities;
private List<Models.PurchaseModel> GetAllPurchaseDetails()
List<Models.PurchaseModel> modelObjPurchase = new List<Models.PurchaseModel>();
List<Purchase> lstPurchase = aEEntities.Purchases.ToList();
foreach (var item in lstPurchase)
modelObjPurchase.Add(new Models.PurchaseModel Id = item.Id, GSTNumber = item.GSTNumber, DistributorName = item.DistributorName, InvoiceDate = item.InvoiceDate, InvoiceNumber = item.InvoiceNumber, Total = item.Total );
return modelObjPurchase;
public ActionResult Purchase()
ViewBag.Message = "Your Purchase page.";
PurchaseComplete purchaseCompleteObj = new PurchaseComplete();
purchaseCompleteObj.purchases = GetAllPurchaseDetails();
return View(purchaseCompleteObj);
[HttpPost]
public ActionResult Purchase(PurchaseComplete purchaseComplete)
if (ModelState.IsValid)
//Database store operation
return RedirectToAction("Purchase");
//data received is null on click of update if sent as object
public ActionResult UpdatePurchase(PurchaseComplete data)
if (data != null)
Purchase itemToUpdate = aEEntities.Purchases.ToList().FirstOrDefault(a => a.Id == data.Id);
if (itemToUpdate != null)
//Database operation to delete
return RedirectToAction("Purchase");
//data received is not having the update value instead it has only binded data if sent as separate item
public ActionResult UpdatePurchase(int id, string gstNum, string distName, string invoDate, string invoNum, string total)
Purchase itemToUpdate = aEEntities.Purchases.ToList().FirstOrDefault(a => a.Id == id);
if (itemToUpdate != null)
//DB store operation
return RedirectToAction("Purchase");
Purchase.cshtml
@model AEWebSite.Models.PurchaseComplete
@
ViewBag.Title = "View";
@using (Html.BeginForm())
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Purchase</h4>
<hr />
@Html.ValidationSummary(true, "", new @class = "text-danger" )
<div class="form-group">
@Html.LabelFor(model => model.purchase.GSTNumber, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.purchase.GSTNumber, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.purchase.GSTNumber, "", new @class = "text-danger" )
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.purchase.DistributorName, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.purchase.DistributorName, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.purchase.DistributorName, "", new @class = "text-danger" )
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.purchase.InvoiceDate, htmlAttributes: new @class = "control-
label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.purchase.InvoiceDate, new htmlAttributes=new @class = "form-control" )
@Html.ValidationMessageFor(model => model.purchase.InvoiceDate, "", new @class = "text-
danger" )
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.purchase.InvoiceNumber, htmlAttributes: new @class =
"control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.purchase.InvoiceNumber, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.purchase.InvoiceNumber, "", new @class = "text-danger" )
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.purchase.Total, htmlAttributes: new @class = "control-label col-md-2" )
<div class="col-md-10">
@Html.EditorFor(model => model.purchase.Total, new htmlAttributes = new @class = "form-control" )
@Html.ValidationMessageFor(model => model.purchase.Total, "", new @class = "text-danger" )
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create Purchase" class="btn btn-outline-primary" />
</div>
</div>
</div>
<table class="table table-dark table-hover" id="myDataTable" style="border-radius:20px;">
<tr>
<th>
@Html.DisplayNameFor(model => model.purchase.GSTNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.purchase.DistributorName)
</th>
<th>
@Html.DisplayNameFor(model => model.purchase.InvoiceDate)
</th>
<th>
@Html.DisplayNameFor(model => model.purchase.InvoiceNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.purchase.Total)
</th>
<th></th>
</tr>
@foreach (var item in Model.purchases)
<tr>
<td class="txtcell cgst">
@Html.EditorFor(modelItem => item.GSTNumber,
new htmlAttributes = new @class = "form-control", style = "max-width:150px" )
</td>
<td class="lblcell">
@Html.DisplayFor(modelItem => item.GSTNumber)
</td>
<td class="txtcell cdistName">
@Html.EditorFor(modelItem => item.DistributorName,
new htmlAttributes = new @class = "form-control", style = "max-width:150px" )
</td>
<td class="lblcell">
@Html.DisplayFor(modelItem => item.DistributorName)
</td>
<td class="txtcell cinvoDate">
@Html.EditorFor(modelItem => item.InvoiceDate,
new htmlAttributes = new @class = "form-control", style = "max-width:150px" )
</td>
<td class="lblcell">
@Html.DisplayFor(modelItem => item.InvoiceDate)
</td>
<td class="txtcell cinvoNumber">
@Html.EditorFor(modelItem => item.InvoiceNumber,
new htmlAttributes = new @class = "form-control", style = "max-width:150px" )
</td>
<td class="lblcell">
@Html.DisplayFor(modelItem => item.InvoiceNumber)
</td>
<td class="txtcell ctotal">
@Html.EditorFor(modelItem => item.Total,
new htmlAttributes = new @class = "form-control", style = "max-width:150px" )
</td>
<td class="lblcell">
@Html.DisplayFor(modelItem => item.Total)
</td>
<td>
@Html.ActionLink("Edit", "UpdatePurchase", "Home", new data = item , new @class = "btnModify" ) |
@Html.ActionLink("Edit", "UpdatePurchase", "Home", new id = item.Id, gstNum = item.GSTNumber, distName = item.DistributorName, invoDate = item.InvoiceDate, invoNum = item.InvoiceNumber, total = item.Total , new @class = "btnModify" ) |
@Html.ActionLink("Delete", "DeletePurchase", new id = item.Id , new @class = "btn btn-secondary btn-sm" )
</td>
</tr>
</table>
<script>
$(document).ready(function ()
$('.txtcell').css('display', 'none');
$('a[class*=btnModify]').click(function (e)
if ($(this).html() == "Edit")
e.preventDefault();
$(this).html("Update");
var categorydivs = $(this).closest('td').siblings();
$.each(categorydivs, function (index, div)
if ($(this).hasClass("lblcell"))
$(this).css('display', 'none');
else if ($(this).hasClass("txtcell"))
$(this).css('display', 'table-cell');
);
else if ($(this).html() == "Update")
$(this).html("Edit");
var categorydivs = $(this).closest('td').siblings();
$.each(categorydivs, function (index, div)
if ($(this).hasClass("lblcell"))
$(this).css('display', 'table-cell');
else if ($(this).hasClass("txtcell"))
$(this).css('display', 'none');
);
);
);
</script>
【问题讨论】：
【参考方案1】：如果我理解正确，您可以为此使用 ajax 加载。
【讨论】：
以上是关于在编辑模式下显示带有编辑按钮的 mvc html 表和数据作为标签，同时显示和数据作为文本框的主要内容，如果未能解决你的问题，请参考以下文章
日期时间的显示格式在 MVC Core 和引导程序 4 中的编辑模式下不起作用