An error is occurring that I can not identify
I know that the BeginForm in the Create.html of the entity framework, has some send options to do overload, one of them is the one I'm using, whose request, ActionName, ControllerName, FormMethod and htmlAttributes, so I'm doing the following shape
@using (Html.BeginForm("Create", "AreaClientes", FormMethod.Post, new { id= "formCrud" }))
It turns out that the created form returns me with
<form action="/AreaClientes/Create/Undefined">
This undefined I'm not sure where it's coming from.
When I move to
<form action="/AreaClientes/Create"> insert works perfectly
ItalsofollowsC#,andthejavascriptsthatcontrolit
/* EnviarFormulario.js **/
var btnAcao = $("input[type='button']");
var formulario = $("#formCrud");
btnAcao.on("click", submeter);
function submeter() {
if (formulario.valid ())
{
var url = formulario.prop("action");
var metodo = formulario.prop("method");
var dadosFormulario = formulario.serialize();
$.ajax({
url: url,
type: metodo,
data: dadosFormulario,
success: tratarRetorno
});
}
}
function tratarRetorno(resultadoServidor) {
if (resultadoServidor.resultado) {
toastr['success'](resultadoServidor.mensagem);
$("#minhaModal").modal("hide");
$("#gridDados").bootgrid("reload");
}
else {
toastr['error'](resultadoServidor.mensagem);
}
}
/* ControlarGrid.js**/
function configurarControles() {
var traducao = {
infos: "Exibindo {{ctx.start}} até {{ctx.end}} de {{ctx.total}} registros", //
loading: "Carregando, isso pode levar alguns segundos...",
noResults: "Não há dados para exibir",
refresh: "Atualizar",
search: "Pesquisar"
}
var controlarGrid = {
ajax: true,
url: urlListar,
labels: traducao,
statusMappins: {
0: "Finalizado",
1: "No prazo",
2: "Atenção próximo ao prazo do SLA",
3: "Prazo do SLA excedido"
},
searchSettings: {
characters: 2
},
formatters: {
"acoes": function (column, row) {
return "<a href='#' class='btn btn-info' data-acao='Details' data-row-id ='" + row.Id + "' > " +
"<span class='glyphicon glyphicon-list'></span></a>"
+
"<a href='#' class='btn btn-warning' data-acao='Edit' data-row-id ='" + row.Id + "' > " +
"<span class= 'glyphicon glyphicon-edit'></span></a>"
+
"<a href='#' class='btn btn-danger' data-acao='Delete' data-row-id ='" + row.Id + "' > " +
"<span class='glyphicon glyphicon-trash'></span></a>";
},
//"DescricaoGAreaCliente": function (column, row) {
// return row.GAreaCliente.Descricao;
//}
"DescricaoUf": function (column, row) {
return row.Uf.Descricao;
}
}
}
var grid = $("#gridDados").bootgrid(controlarGrid);
grid.on("loaded.rs.jquery.bootgrid", function () {
grid.find("a.btn").each(function (index, elemento) {
var botaoDeAcao = $(elemento);
var acao = botaoDeAcao.data("acao");
var idEntidade = botaoDeAcao.data("row-id");
botaoDeAcao.on("click", function () {
abrirModal(acao, idEntidade);
});
});
});
$("a.btn").click(function () {
var acao = $(this).data("action");
abrirModal(acao);
});
}
function abrirModal(acao, parametro) {
var url = "/{ctrl}/{acao}/{parametro}";
url = url.replace("{ctrl}", controller);
url = url.replace("{acao}", acao);
if (parametro !== null) {
url = url.replace("{parametro}", parametro);
}
else {
url = url.replace("{parametro}", "");
}
$("#conteudoModal").load(url, function () {
$("#minhaModal").modal('show');
});
}<!-- index.cshtml -->
@{
ViewBag.Title = "Area do Cliente";
}
<h2>@ViewBag.Title</h2>
<p>
<a href="#" class="btn btn-success" data-action="Create">
<span class="glyphicon glyphicon-plus"></span>
Nova
</a>
</p>
<table id="gridDados">
<thead>
<tr>
<th data-column-id="Area" data-order="asc">Area</th>
@*<th data-formatter ="DescricaoGAreaCliente">Gestor da Area do Cliente</th>*@
<th data-formatter="acoes"></th>
</tr>
</thead>
</table>
<div class="modal fade" id="minhaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="conteudoModal"></div>
</div>
</div>
</div>
</div>
<div class="form-actions no-color">
@Html.ActionLink("Menu Básico", "Index", "CBs")
</div>
@section scripts{
<script src="~/Scripts/jquery.bootgrid.js"></script>
<script src="~/Scripts/Projeto/ControlarGrid.js"></script>
<script type="text/javascript">
var controller = "AreaClientes";
var urlListar = "@Url.Action("Listar")";
$(document).ready(configurarControles);
</script>
}
<!-- Create.cshtml -->
@model PortalAdmCC.Models.AreaCliente
@{
ViewBag.Title = "Area do Cliente";
}
<h2>Nova</h2>
@using (Html.BeginForm("Create", "AreaClientes", FormMethod.Post, new { id= "formCrud" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Area do Cliente</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group col-xs-8">
@Html.LabelFor(model => model.Area, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Area, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Area, "", new { @class = "text-danger" })
</div>
</div>
@*<div class="form-group col-lg-10">
@Html.LabelFor(model => model.GAreaClienteId, "Gestor Area do Cliente", htmlAttributes: new { @class = "control-label" })
<div class="col-lg-10">
@Html.DropDownList("GAreaClienteId", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.GAreaClienteId, "", new { @class = "text-danger" })
</div>
</div>*@
</div>
<div class="form-group">
<input type="button" value="Salvar" class="btn btn-primary btn-lg" />
</div>
}
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/Projeto/EnviarFormulario.js"></script>
<script type="text/javascript">
var btnAcao = $("input[type='button']");
var formulario = $("#formCrud");
</script>