首页新闻找找看学习计划

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");
        }
复制代码

求大神们指导,本人小白实在不会。

xingcs的主页 xingcs | 初学一级 | 园豆:4
提问于:2018-02-07 14:29
< >
分享
最佳答案
0

你用的是MongDB连接的?

 

收获园豆:10
豆子ll | 菜鸟二级 |园豆:364 | 2018-02-07 14:53

是的

xingcs | 园豆:4 (初学一级) | 2018-02-07 15:07

@xingcs: 我前几天也学了这个,有一篇文章,希望可以帮到你

豆子ll | 园豆:364 (菜鸟二级) | 2018-02-07 15:09

@lcqll: 是你写的吗,如果不是可以给个链接吗

 

xingcs | 园豆:4 (初学一级) | 2018-02-07 15:14

@xingcs: 是本人写的

豆子ll | 园豆:364 (菜鸟二级) | 2018-02-07 15:15

@lcqll: 抱歉,我找不到,能发个链接吗

xingcs | 园豆:4 (初学一级) | 2018-02-07 15:27

@xingcs: http://www.cnblogs.com/lcq529/p/8398004.html

 

豆子ll | 园豆:364 (菜鸟二级) | 2018-02-07 15:28

@lcqll: 抱歉,是我没问清楚,我要的并不是这个,但还是非常感谢!

xingcs | 园豆:4 (初学一级) | 2018-02-07 15:32
其他回答(2)
0

怎么从控制器中获得数据?请明白请求-响应机制,发送ajax请求到控制器返回Json即可!再看你又用到了模型绑定,所以建议先好好看看ASP.NET MVC基础自然迎刃而解!

Jeffcky | 园豆:2544 (老鸟四级) | 2018-02-07 14:51

我没有学过js,网上写的我看不太懂,大神能给点代码吗?

支持(0) 反对(0) xingcs | 园豆:4 (初学一级) | 2018-02-07 15:09

@xingcs: 没学过JS,那你要写JS,那肯定得学!ASP.NET MVC也不会?园子里这样的文章太多!给思路,完整代码没有,自己好好研究和琢磨!

支持(0) 反对(0) Jeffcky | 园豆:2544 (老鸟四级) | 2018-02-07 15:10

@Jeffcky: 好吧,谢谢

支持(0) 反对(0) xingcs | 园豆:4 (初学一级) | 2018-02-07 15:14

@xingcs: 学的时候有什么问题和疑惑可以再提!自己研究出来的才是收获

支持(0) 反对(0) Jeffcky | 园豆:2544 (老鸟四级) | 2018-02-07 15:15
0

你需要的是一个好用的UI库包含的网格组件,比如EasyUI的DataGrid

西漠以西 | 园豆:1670 (小虾三级) | 2018-02-22 16:21
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册