从 HTML 表 ASP.net MVC 中获取使用 jQuery 添加的数据

Question

我的页面中有一些表格。数据是使用 jQuery 动态添加的。
这很好
现在我需要逐个单元格地获取所有这些数据，这些数据是由 jquery 添加的，并将其作为模型发送到我的控制器以插入我的DB。
这是我的观点：

@model prjArqBuild.entidade_endereco
<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#endereco">
                    Endereços
                </a>
            </h4>
        </div>
        <div id="endereco" class="panel-collapse collapse">
            <div class="panel-body">
                <table class="table" id="tabEndereco">
                    <thead>
                        <tr>
                            <th>
                                Endereco
                            </th>
                            <th>
                                Numero
                            </th>
                            <th>
                                Complemento
                            </th>
                            <th>
                                Bairro
                            </th>
                            <th>
                                Cidade
                            </th>
                            <th>
                                UF
                            </th>
                            <th>
                                CEP
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="panel-footer">
                <p class="panel-title">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalEndereco">
                        Adicionar Endereço
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="ModalEndereco" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">Cadastro de Endereço</h4>
                                </div>
                                <div class="modal-body">
                                    <fieldset id="infoEndereco">
                                        <div class="row">
                                            <div class="col-md-8">
                                                @Html.EditorFor(model => model.een_endereco, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Endereço" } })
                                                @Html.ValidationMessageFor(model => model.een_endereco, "", new { @class = "text-danger" })
                                            </div>
                                            <div class="col-md-4">
                                                @Html.EditorFor(model => model.een_numero, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Numero" } })
                                                @Html.ValidationMessageFor(model => model.een_numero, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                        <br />
                                        <div class="row">
                                            <div class="col-md-12">
                                                @Html.EditorFor(model => model.een_comple, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Complemento" } })
                                                @Html.ValidationMessageFor(model => model.een_comple, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                        <br />
                                        <div class="row">
                                            <div class="col-md-6">
                                                @Html.EditorFor(model => model.een_bairro, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Bairro" } })
                                                @Html.ValidationMessageFor(model => model.een_bairro, "", new { @class = "text-danger" })
                                            </div>
                                            <div class="col-md-6">
                                                @Html.EditorFor(model => model.een_cidade, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Cidade" } })
                                                @Html.ValidationMessageFor(model => model.een_cidade, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                        <br />
                                        <div class="row">
                                            <div class="col-md-6">
                                                @Html.EditorFor(model => model.een_uf, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Estado" } })
                                                @Html.ValidationMessageFor(model => model.een_uf, "", new { @class = "text-danger" })
                                            </div>
                                            <div class="col-md-6">
                                                @Html.EditorFor(model => model.een_cep, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "CEP" } })
                                                @Html.ValidationMessageFor(model => model.een_cep, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                                    <button id="addEndereco" type="button" OnClick="gravarDetalheEnd();" class="btn btn-primary">Salvar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </p>
            </div>
        </div>
    </div>
</div>

这是我将数据添加到 HTML 表中的 jQuery 函数：

  function gravarDetalheEnd() {
            $('#tabEndereco tr:last').after('<tr><td>' + $('#een_endereco').val() + '</td><td>' + $('#een_numero').val() + '</td>' +
                '<td>' + $('#een_comple').val() + '</td>' + '<td>' + $('#een_bairro').val() + '</td>'
                + '<td>' + $('#een_cidade').val() + '</td>' + '<td>' + $('#een_uf').val() + '</td>'
                + '<td>' + $('#een_cep').val() + '</td></tr>');          
        }

我需要获取所有单元格并将其作为 EntEnd 传递给此 Controller Action：

public void AddEndereco(entidade_endereco entEnd)
        {
            db.entidade_endereco.Add(entEnd);
            db.SaveChanges();
        }

我尝试了很多东西，但没有任何效果！我没有结果！
我该怎么做？

Answer 1

我建议将您想要存储在数据库中的数据作为 JSON 序列化，并使用 jQuery 进行 AJAX POST 到您的控制器操作。比如：

var json = {
            entidade_endereco : {
//TODO: structure as per your model
            }
        }


$.ajax({
                url: "/Controller/AddEndereco",
                type: "POST",
                data: json,
                success: function (data) {
//TODO: success message or something
                }