从 View 到 Controller 获取 html 表信息答案

【问题标题】：Get html table info from View to Controller从 View 到 Controller 获取 html 表信息
【发布时间】：2015-09-25 14:36:03
【问题描述】：

我正在使用 ASP.NET MVC，我的视图中有一个动态表，用户可以添加和删除行。

<table class="table" id="tableClasses">
        <tr>
            <th>Class</th>
            <!-- Icon to add a line. Done with javascript -->
            <th><span class="table-add glyphicon glyphicon-plus"></span></th>
        </tr>
        @foreach (string sClass in tClasses)
        {
            <tr>
                <td contenteditable="true">@sClass</td>
                <td>
                    <span class="table-remove glyphicon glyphicon-remove"></span>
                </td>
            </tr>
        }
        <!-- This is our clonable table line -->
        <tr class="hide">
            <td contenteditable="true">New Class</td>
            <td>
                <!-- Icon to remove the line. Done with javascript -->
                <span class="table-remove glyphicon glyphicon-remove"></span>
            </td>
        </tr>
</table>

我需要检索并保存控制器中所有行的值，但我不知道该怎么做。

由于我不知道表格中会有多少行，所以我不能使用 id 对吗？

如何访问和循环访问控制器中的表格单元格？

编辑：

这里是控制器代码：

public ActionResult Edit([Bind(Include = "PKAL,FKHC,SIATA,SICAO,SNAME,SETDEARLY,SETDLATE,SLASMIN,SCLASSFASTLANE,SDCSINTERFACE")] AIRLINE AIRLINE) { 如果（模型状态。IsValid） { AIRLINE.SETDEARLY = AIRLINE.SETDEARLY.Replace(":", string.Empty); AIRLINE.SETDLATE = AIRLINE.SETDLATE.Replace(":", string.Empty); AIRLINE.SLASTMIN = AIRLINE.SLASTMIN.Replace(":", string.Empty);

            FormCollection collection = new FormCollection();  
            collection.Get("classTemp");

            db.Entry(aIRLINE).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        ViewBag.FKHC = new SelectList(db.HANDLER, "PKHC", "SHCODE", aIRLINE.FKHC);
        return View(aIRLINE);
    }

棘手的是 SCLASSFASTLANE 在数据库中存储为“A,B,C,X”。

这就是为什么我使用自定义模板来显示和修改它，并且我需要一个动态表格（上面的代码）。

【问题讨论】：

您介意发布您的控制器代码吗？此外，您必须将其包含在 <form> 中或使用 jquery 执行 POST。
您似乎没有表单，即使有，您也没有生成任何表单控件，因此没有任何内容可以发布到控制器。您将需要使用 javascript/jquery 获取值并使用 ajax 将它们发布到您的控制器。您可以给<td> 元素一个类名，或者只使用循环每个<tr> 元素并获取它的第一个<td> 元素。
我发布了控制器代码。我尝试使用围绕元素的表单，但它似乎不起作用。你有我如何用 jquery 和 Ajax 做到这一点的例子吗？

你到底为什么要使用<td contenteditable？根据此代码无法理解您尝试做什么，但我建议您访问 MVC 站点并阅读一些教程。

标签： html asp.net-mvc view controller

【解决方案1】：

好的，我终于设法解决了，这就是我最终要做的：

这是视图（EditorTemplate）代码（没有太大变化）：

<div id="table" class="table-editable">
<table id="tableClasses" class="table">
    <tr>
        <th>@Resource.ClassFastLane</th>
        <th><span class="table-add glyphicon glyphicon-plus"></span></th>
    </tr>
    @foreach (string sClass in tClasses)
    {
        <tr>
            <td contenteditable="true">@sClass</td>
            <td>
                <span class="table-remove glyphicon glyphicon-remove"></span>
            </td>
        </tr>
    }
    <!-- This is our clonable table line -->
    <tr class="hide">
        <td contenteditable="true"></td>
        <td>
            <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
    </tr>
</table>

我通过 javascript 从表中检索了值：

<script>
    //Store the class html table values in a string array and post it to the controller.
    //function returnClasses() {
    $("form").submit(function (e) {
        //On empêche le formulaire de faire un submit.
        e.preventDefault();

        //On sauve les données de la table des classes vers le controller.
        var TableData = new Array();
        $('#tableClasses tr').each(function (row, tr) {
            TableData = TableData + $(tr).find('td:eq(0)').text();
        });
        var postData = { values: TableData };

        $.ajax({
            type: "POST",
            url: "/AIRLINE/SaveClasses",
            //url: "/ControllerHelper/SaveClasses",
            data: postData,
            success: function (result) {
                submit();
            },
        });
    })
    //Une fois les données sauvées, on fait le submit.
    function submit() {
        $("form").unbind('submit').submit();
    }
</script>

我阻止表单提交，提交类值，然后在控制器中，我按照我想要的方式重新排列值，并通过 Edit ActionResult 提交表单：

public ActionResult Edit([Bind(Include = "PKAL,FKHC,SIATA,SICAO,SNAME,SETDEARLY,SETDLATE,SLASTMIN,SCLASSFASTLANE,SDCSINTERFACE")] AIRLINE aIRLINE)
    {
        if (ModelState.IsValid)
        {
            aIRLINE.SCLASSFASTLANE = ControllerHelper.getClassesTemp();
            ControllerHelper.resetClassesTemp();

            db.Entry(aIRLINE).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        ViewBag.FKHC = new SelectList(db.HANDLER, "PKHC", "SHCODE", aIRLINE.FKHC);
        return View(aIRLINE);
    }

这可能不是最漂亮的解决方案，但根据我目前所掌握的知识和我能得到的一点帮助，它现在就可以了。

【讨论】：