Form creation error with Entity framework

Question

There’s a mistake going on that I can’t identify

I know that Beginform in Create.html from the Entity framework, has some upload options to overload, one of them is the one I’m using, whose request, Actionname, Controllername, Formmethod and htmlAttributes, so I’m doing it as follows

 @using (Html.BeginForm("Create", "AreaClientes", FormMethod.Post, new { id= "formCrud" }))

It turns out that the form created returns me with

<form action="/AreaClientes/Create/Undefined">

This Undefined I’m not aware of where it’s coming from

When I change to <form action="/AreaClientes/Create">the Insert works perfectly

It also follows c#, and the Avascripts that control it

/* 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>

Edit 1: When I put in actionName "Create/", it works perfectly

Answer 1

That one undefinedcomes from JavaScript your helpers in the View are correct the problem is your button "New"

That gets the following bind:

   $("a.btn").click(function () {

        var acao = $(this).data("action");

        abrirModal(acao);
    });

He won’t pass the argument parametro for Function abrirModal(acao, parametro) and it in turn validates only if the same is null and not undefined. You can add the treatment to it, or simply assign null in your call.

$("a.btn").click(function () {   
   var acao = $(this).data("action");   
   abrirModal(acao, null);
});

Answer 2

switch to Html.Beginform("Create.cshtml", "Areaclientes"