在编辑模式下显示带有编辑按钮的 mvc html 表和数据作为标签，同时显示和数据作为文本框

Question

我想显示带有编辑按钮和表格数据作为标签的 html 表格，当单击“编辑”按钮时，表格行应在文本框中显示数据，如下图所示

带标签的表格数据（正常显示）：

带有文本框的表格数据（点击编辑按钮时显示）：

整页浏览：

有以下问题：

1. 有没有办法将表格数据分别显示为标签/文本框，而无需使用显示/隐藏控件，因为它需要复制每一行数据。在我的代码中，我使用 jQuery 来相应地显示和隐藏我不想做的控件。
2. 由于我的视图绑定了两个模型，因此使用了 ViewModel(PurchaseComplete) 概念，一个是 PurchaseModel，另一个是 List，以及如何像普通表单提交一样通过 POST 方法将数据从表编辑行发送到控制器。在我的代码中，UpdatePurchase(PurchaseComplete data) 方法接收到 null 并且 UpdatePurchase(int id, string gstNum, string distName,...) 方法接收到绑定数据而不是编辑数据。

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>

Answer 1

如果我理解正确，您可以为此使用 ajax 加载。