如何生成html表格网格数据并将其作为数组发布到mvc控制器答案

【问题标题】：How to generate and post html table Grid data to mvc controller as array如何生成html表格网格数据并将其作为数组发布到mvc控制器
【发布时间】：2018-05-15 09:13:11
【问题描述】：

如果我将数据输入到表中，我想在 mvc 控制器中将数据作为数组获取。我想将每一行和每一列的输入值作为数组传递给控制器。所以我可以对数组执行各种操作

function createTable()
{
    document.getElementById('tb_container').innerHTML = "";
    var rows = document.getElementById('tb_rows').value;
    var cols = document.getElementById('tb_cols').value;

    tblHtml = '<table>'
    for (i = 0; i < rows; i += 1)
    {
        tblHtml += '<tr>';
        for (j = 0; j < cols; j += 1)
        {
            tblHtml += '<td><input type="text"></td>';
        }
        tblHtml += '</tr>';
    }
    tblHtml += '</table>';
    document.getElementById('tb_container').innerHTML = tblHtml;
}



td {
    min-width: 100px;
    min-height: 20px;
    border: solid 1px #000;
}




<ul>
    <li>
        Rows:
        <input type="text" id="tb_rows">
    </li>
    <li>
        Columns :
        <input type="text" id="tb_cols">
    </li>
    <li>
        <input type="button" value="Create Table" onclick="createTable()">
    </li>
</ul>

<div id="tb_container"></div>

请建议我如何将用户的输入数据（即行和列中的值）作为数组传递。

【问题讨论】：

您是否尝试根据用户输入动态生成网格表？
您需要编写两个循环，一个用于行，一个用于列，您可以在其中渲染 x 个 trs 和 y 个 tds。
@stom 请你看看jsfiddle.net/EKfut/2。我想将表数据作为数组传递给 .net mvc 控制器。
您的第一个问题标题是grid-view on basis of input rows and coloums，我回答了这个问题，现在您已经更改了问题标题，这是不可取的，如果您是新手，请在询问之前检查this :)跨度>
好的先生，我会通过它

标签： jquery asp.net-mvc

【解决方案1】：

这应该可以从用户输入生成行和列，并将这些网格数据发布到 mvc 操作方法：

网格视图模型：

public class GridVM
{
    public GridVM()
    {
        GridData = new List<GridData>();
    }
    public int NoOfRows { get; set; }

    public int NoOfColumns { get; set; }

    public List<GridData> GridData { get; set; }
}


public class GridData
{
    public string CellData { get; set; }

    public int NoOfRows { get; set; }

    public int NoOfColumns { get; set; }
}

网格获取索引操作方法：

public ActionResult Index()
 {

   return View();
 }

网格获取索引视图：

@model Demo.Models.GridVM

<style>
table td {
    border: 1px solid black;
}
</style>


<label>No Of Rows</label>

@Html.TextBoxFor(m => m.NoOfRows)

<br />

<label>No Of Columns</label>

@Html.TextBoxFor(m => m.NoOfColumns)

<button type="button" id="addGrid">Add Grid</button>

<br />

@using (Html.BeginForm("SaveGridData", "Home", FormMethod.Post))
{
<table id="gridData">

@Html.Partial("_AddGridPartials", new Demo.Models.GridData())

</table>

<br />

<input type="submit" value="Submit Grid Data"/>

}

添加网格动作方法：

[HttpPost]
public PartialViewResult AddGrid(GridVM addGrid)
 {

  var gridData = new GridData();

  gridData.NoOfRows = addGrid.NoOfRows;
  gridData.NoOfColumns = addGrid.NoOfColumns;

  return PartialView("_AddGridPartials", gridData);

  }

添加网格局部视图：

注意：从here 安装BeginCollectionItem HtmlHelper 以在form 中具有唯一的name 属性以绑定到您的模型属性。

@model Demo.Models.GridData
@using HtmlHelpers.BeginCollectionItem


@for (var i = 0; i < Model.NoOfRows; i++)
{


<tr>

@for (var j = 0; j < Model.NoOfColumns; j++)
{
 using (Html.BeginCollectionItem("gridData"))
  {
    <td>
     @Html.TextBoxFor(model => model.CellData)
    </td>
  }
}

</tr>

<br />

}

保存网格数据操作方法：

[HttpPost]
public ActionResult SaveGridData(GridVM gridDetails)
 {

  var gridDataArray = gridDetails.GridData.ToArray();

  // Or you can loop through the list save using you repository

  foreach (var data in gridDetails.GridData)
    {
      var cellValue = data.CellData;

      // TODO save cellValue using your repository

    }

  return Json(new { Message = "Done!, All Details Saved" },JsonRequestBehavior.AllowGet);

  }

添加网格脚本：

   <script>

   $(document).ready(function () {

    var gridDetails = $('#gridData');
    $('#addGrid').click(function () {

        var gridObject = new Object();
        gridObject.NoOfRows = $("#NoOfRows").val();
        gridObject.NoOfColumns = $("#NoOfColumns").val();


        $.ajax({
            url: '@Url.Action("AddGrid", "Home")',
            type: "POST",
            cache: false,
            data: JSON.stringify({ addGrid: gridObject }),
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                if (data) {
                    gridDetails.append(data);
                }
            },
            error: function(jqXhr, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    })

    });

   </script>

【讨论】：