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

Question

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

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

带有文本框的表数据（单击“编辑”按钮时显示：

] >>

整页视图：

存在以下问题：

1. 有一种方法可以将表数据分别显示为标签/文本框，而无需使用显示/隐藏控件，因为它需要复制每行数据。在我的代码中，我使用jQuery来显示和隐藏我不想做的控件。
2. 由于我的视图绑定了两个模型，所以使用了ViewModel（PurchaseComplete）概念，一个是PurchaseModel，另一个是List ，以及如何像常规形式提交一样通过POST方法将表编辑行中的数据发送到控制器。在我的代码中，UpdatePurchase（PurchaseComplete数据）方法接收到null，UpdatePurchase（int id，字符串gstNum，字符串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>
            
我想显示带有编辑按钮和表格数据作为标签的html表格，当单击'编辑'按钮时，表格行应在文本框中显示数据，如下图所示带有标签的图像表格数据（正常显示：...

] >

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

Answer 1

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