Question

如果我将数据输入到表中，我想将数据作为数组在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>

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

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

  }

添加网格局部视图

注意：从安装BeginCollectionItem HtmlHelper，使name中的唯一form属性绑定到您的模型属性。

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

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

1 个答案: