mvc5中怎么将一个可添加行的表格中的数据以对象的方式返回给控制器？
0
悬赏园豆：10
[已解决问题]
解决于 2018-03-05 16:28
我用JavaScript写了一个添加视图，视图中有一个表格是用来将一个对象列表添加到这个对象中，我该怎么在控制器获得表格里的数据呢？如果在js里构建一个对象，并在控制器得到数据 这种方法可以吗，该怎么做呢？跪求大神指导。
这是我的视图代码
<script src="~/Scripts/AddAndRemove.js"></script> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>TheDataSource</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.DataSourceName, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.DataSourceName, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.DataSourceName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.DataSourceDescribe, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.DataSourceDescribe, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.DataSourceDescribe, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Subordinatesubsystem, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Subordinatesubsystem, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Subordinatesubsystem, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Enable, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.CheckBoxFor(model => model.Enable, new { @class = "checkBox" }) </div> </div> <div> <div> <form id="AddForm"> <table border="1" style="text-align:center;border-collapse:collapse" id="myTable"> <tr> <th width=100>字段</th> <th width=100>类型</th> <th width=100>描述</th> </tr> <tbody> <tr> <td> <input type="text" id="field1" class="form-control" title="字段" value="" /> </td> <td> <input type="text" id="txttype1" class="form-control" title="类型" value="" /> </td> <td> <input type="text" id="txtdescribe1" class="form-control" title="描述" value="" /> </td> <td> <input type="hidden" id="reC" value="1" /> <input type="button" class="btn btn-default" value="添加一行" onclick="addRows();"> <input type="button" class="btn btn-default" value="表格数据"onclick="saveTableValue();"> </td> </tr> </tbody> </table> @*<div> <input type="button" class="btn btn-default" value="确定" onclick="submitInfo();"> </div>*@ </form> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="添加" class="btn btn-default" onclick="submitInfo();" /> </div> </div> </div> </div>
js代码：
function addRows() { //记录总共添加几行 document.getElementById("reC").value = parseInt(document.getElementById("reC").value) + 1;//获取中的行数 //添加一行 var i = parseInt(myTable.rows.length); var newTr = myTable.insertRow(); //添加列 var newTd0 = newTr.insertCell(); var newTd1 = newTr.insertCell(); var newTd2 = newTr.insertCell(); var newTd3 = newTr.insertCell(); //设置列内容和属性 newTd0.innerHTML = '<input type="text" id="field' + i + '" class = "form-control" title="字段" value="" />'; newTd1.innerHTML = '<input type="text" id="txttype' + i + '" class = "form-control" title="类型" value=""/>'; newTd2.innerHTML = '<input type="text" id="txtdescribe' + i + '" class = "form-control" title="描述" value=""/>'; newTd3.innerHTML = '<input type="submit" class="btn btn-default" value="删除该行" onclick="deleRow()" id="btnDele' + i + '" />'; // saveTableValue();//保存值 return false; } //删除一行 function deleRow() { //获得行索引 //两个parentElement分别是TD和TR，rowIndex是TR的属性 var cGetRow = window.event.srcElement.parentElement.parentElement.rowIndex; //alert("点击了第" + cGetRow); myTable.deleteRow(cGetRow); // saveTableValue();//保存值 return false; } //保存表格中最新的值 //function saveTableValue() { // var myTable = document.getElementById("myTable"); // // alert("表格总行数="+ parseInt(myTable.rows.length)); // tableValue = ""; // for (var i = 1; i < myTable.rows.length; i++) { // var value1 = myTable.rows[i].cells[0].getElementsByTagName("input")[0].value;//字段 // var value2 = myTable.rows[i].cells[1].getElementsByTagName("input")[0].value;//类型 // var value3 = myTable.rows[i].cells[2].getElementsByTagName("input")[0].value;//描述 // var rowValue = value1 + "_" + value2 + "_" + value3; //"_"来连接 // tableValue = tableValue + rowValue + "+"; // } // alert("表格内拼接的值" + tableValue); // $("#USECATTYPENUM").val(tableValue);//把表格的值付给input //} //提交表单 function submitInfo() { //提交表单 $.messager.progress(); // 显示进度条 $('#AddForm').form('submit', { url: "/DataSource/Create", onSubmit: function () { }, success: function (data) { if (data > 0) { alert("保存成功"); } }}); }
Controller的代码：
[HttpPost] [ValidateAntiForgeryToken] public async Task<ActionResult> Create([Bind(Include = "id,DataSourceName,DataSourceDescribe,Subordinatesubsystem,Enable,datastructureList")]DataSource datasourceModel) { //{ // //1.获取行数 // int rowNum = 0; // string strDataStructurefield = ""; // bool flag = true; // do // { // rowNum++; // //stringstrTeachingName = "teachingClassName" + rowNum; // strDataStructurefield = Request["field" + rowNum]; // var formData= HttpContext.Request.Form[0]; // if (strDataStructurefield == null || strDataStructurefield == "") // { // flag = false; // } // } while (flag); // //2.循环每一行，给实体对象分别赋值 // List<DataStructure> datastructureList = new List<DataStructure>(); // for (int i = 1; i < rowNum; i++) // { // DataStructure datastructure = new DataStructure() // { // DataStructurefield=Request["field" +i], // DataStructuretype=Request["txttype" +i], // DataStructuredescribe=Request ["txtdescribe" +i] // }; // datastructureList.Add(datastructure); // } //} var ruls = await datasourceContext.dataSource.Find(x => true).ToListAsync(); //var form= HttpContext.Request.Form; await MongoHelper.MongoDB.GetCollection<DataSource>("DataSource").InsertOneAsync(datasourceModel); return RedirectToAction("Index"); }
求大神们指导，本人小白实在不会。
最佳答案
0
你用的是MongDB连接的？
收获园豆：10
是的
@xingcs: 我前几天也学了这个，有一篇文章，希望可以帮到你
@lcqll: 是你写的吗，如果不是可以给个链接吗
@xingcs: 是本人写的
@lcqll: 抱歉，我找不到，能发个链接吗
@xingcs: http://www.cnblogs.com/lcq529/p/8398004.html
@lcqll: 抱歉，是我没问清楚，我要的并不是这个，但还是非常感谢！
其他回答(2)
0
怎么从控制器中获得数据？请明白请求-响应机制，发送ajax请求到控制器返回Json即可！再看你又用到了模型绑定，所以建议先好好看看ASP.NET MVC基础自然迎刃而解！
我没有学过js，网上写的我看不太懂，大神能给点代码吗？
@xingcs: 没学过JS，那你要写JS，那肯定得学！ASP.NET MVC也不会？园子里这样的文章太多！给思路，完整代码没有，自己好好研究和琢磨！
@Jeffcky: 好吧，谢谢
@xingcs: 学的时候有什么问题和疑惑可以再提！自己研究出来的才是收获
0
你需要的是一个好用的UI库包含的网格组件，比如EasyUI的DataGrid
