ASP.NET MVC表形式動態添加行

Question

我正在嘗試將 ASP.NET MVC 表下方的“添加”按鈕編程為動態 append 空白行，然后有一個提交按鈕，只需單擊一下即可將每一行保存到數據庫中。

SO 上有幾個類似的問題，但我無法將其應用於此。 我一直在嘗試應用此示例，但“添加”按鈕並未添加新行。

Model：

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; }

Razor 查看：

@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>

在這個階段，我不太關心 model 與 controller 的綁定，我只想讓這個添加按鈕正常工作。 例如 controller：

  [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();
        }

感謝您的任何見解。

當前的：

單擊“添加”按鈕后需要：

Answer 1

改變你的

<button id="add" type="submit" class="btn btn-primary">Add</button>

進入

<button id="add" class="btn btn-primary">Add</button>

我認為“ Add按鈕不應該submit 。

然后從script標記中刪除src="~/bundles/jqueryval.js"部分。 根據這個答案 ，我們不應該在這里保留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> 

讓我知道是否有幫助。

Answer 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>

原始帖子在這里

Answer 3

 var counter = 2; $(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>