[英]Get data added with jQuery from HTML table ASP.net MVC
我的页面上有一些表格。 数据是使用jQuery动态添加的。
这很好
现在,我需要获取所有这些数据(逐个单元,由jQuery添加),并将其作为模型发送到我的控制器以插入到我的数据库中。
这是我的看法:
@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">×</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>
这是我的jQuery函数,将数据添加到HTML表:
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();
}
我已经尝试了很多东西,但是没有任何效果! 我没有结果!
我怎样才能做到这一点?
我建议将要存储在数据库中的数据序列化为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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.