Referenceerror: Getcamposdinamicogrid is not defined

Question

I need a help, I can not solve a stop, when I load a web screen, I have an add button that create 3 html fields and so will add one at the bottom of the other, but it’s giving way, because I have my page Partialcomposicaoemail.cshtml below with the fields:

@using Itau.DPE.MesaPrecos.DAO.Models;
@model List<TB_Campos_Email>


@if (Model != null && Model.Count > 0)
{
  <div class="col-md-12">
    <table class="table table-striped Exp-Table">
            <tr class="table-tr">
                <th style="text-align: center">Origem</th>
                <th style="text-align: left">Campo</th>
                <th style="text-align: left">Alias</th>
                <th style="text-align: center"></th>
            </tr>
        @foreach (var item in Model)
        {
            <tr class="listCamposDinamicos">
                    @*Origem Campo Validador*@
                   <td>
                             <select class="selectpicker selvalorOrigem" data-live-search="true" aria-expanded="true">
                             
                                    <option value="@item.Origem" selected>@item.Origem 0</option>
                                                            
                                    @*<option value="0" selected></option>*@
                            </select>                      
                    </td>

                    @*Campo Validador*@
                    <td>
                            <select class="selectpicker selvalorCampo" data-live-search="true" aria-expanded="true">
                             
                                    <option value="@item.Valor_Campo" selected>@item.Valor_Campo 0</option>
                                                            
                                    @*<option value="0" selected></option>*@
                            </select>
                    </td>
                 

                 <td class="text" style="text-align: left;" id="tdValor">
                            <input type="text" class="txtAlias" value="@item.Alias" style="width: 215px;" maxlength="100" aria-expanded="true" />

                  @*Botão Remover*@
                   <td class="text-center">
                       <a href="#" id="btn-remover-comp">
                           <span class="glyphicon glyphicon-trash exp-glyphicon-remove" style="font-size: large"></span>
                       </a>
                   </td>
                 </td>
           </tr>
        }
    </table>
  </div>    
}

I have my Email.js that has the functions Getcamposdinamicogrid and Addcamposdinamico, ta giving Getcamposdinamicogrid with the error: message: "Getcamposdinamicogrid is not defined" stack: "Referenceerror: Getcamposdinamicogrid is not defined at Eval (Eval at Getcamposdinamicogrid (http://localhost:54771/Mesaprecos/Scripts/Email.js:583:9), :1:1) at Getcamposdinamicogrid (http://localhost:54771/Mesaprecos/Scripts/Email.js:583:9)At Addcamposdinamico (http://localhost:54771/Mesaprecos/Scripts/Email.js:600:32)At Htmldivelement. (http://localhost:54771/Mesaprecos/Scripts/Email.js:5:9)At Htmlbodyelement.Dispatch (http://localhost:54771/Mesaprecos/Scripts/Core/jquery-1.12.0.min. js:3:12344)At Htmlbodyelement.r.Handle (http://localhost:54771/Mesaprecos/Scripts/Core/jquery-1.12.0.min. js:3:9071)" proto: Error

 function GetCamposDinamicoGrid() {
        
        var obj = [];
        debugger;

        $(".listCamposDinamicos").each(function () {
            var origemCampo = {};

            origemCampo.origem = $('.selvalorOrigem').find(":selected").text();  //$(this).find(".selvalorOrigem").text();
            origemCampo.valorCampo = $('.selvalorCampo').find(":selected").text();  //$(this).find(".selvalorCampo").text();
            origemCampo.alias = $(this).find(".txtAlias").text();

            obj.push(origemCampo);
        });

        return obj;
    }

    function AddCamposDinamico(){
        MensagemBloqueio("Aguarde...");
        var listacamposEmail = GetCamposDinamicoGrid();
        debugger;
        $.ajax({
            type: 'POST',
            url: 'Email/AddCamposDinamico',
            data: { 'listCamposDinamicos': JSON.stringify(listacamposEmail) },
            dataType: 'html',
            cache: false,
            async: true,
            statusCode: {
                200: function (resultado) {
                    DesbloquearPagina();
                    $('#divCamposDinamicos').slideDown();
                    $('#divCamposDinamicos').html(resultado);
                },
                99: function (resultado) {
                    DesbloquearPagina();
                    ExibirMensagem(resultado.responseText);
                }
            }
        });
    }

Function Addcamposdinamico sends to a controller below to decentralize the fields and create:

 public ActionResult AddCamposDinamico(string listacamposEmail)
        {
            var campos = new JavaScriptSerializer().Deserialize<List<TB_Campos_Email>>(listacamposEmail);

            if (campos == null)
                campos = new List<TB_Campos_Email>();

            campos.Add(new TB_Campos_Email { Origem = "", Valor_Campo = "", Alias = "" });

            Response.StatusCode = 200;

            return PartialView("PartialComposicaoEmail", campos);
        }

I don’t know if this is the way I’m using in jquery to capture the selects you’ve been playing, because when you get to the line var fields = new Javascriptserializer(). Deserialize>(Mail field lists); brings error {"Value cannot be null. nName of parameter: input"} I have tried to make several changes, but it remains, I am waiting for a help.

Answer 1

Below what I wanted to do, are three fields, two optionlists and an input text, with an add button, it was necessary to recreate more times the same fields:

<div class="col-md-12">
@if (Model != null && Model.Count > 0)
{
    <table class="table table-striped Exp-Table">
        <tr class="table-tr">
            <th style="text-align: center">Origem</th>
            <th style="text-align: left">Campo</th>
            <th style="text-align: left">Alias</th>
            <th style="text-align: center"></th>
        </tr>

    @foreach (var item in Model)
    {
        <tr class="listCamposEmail">
            <td>
                <select class="selectpicker form-control selOrigemCampo" onchange="CarregarCamposPorOrigem(this)">
                    @{pSelect = (item.TB_Parametro_CampoValidador.Origem_Campo == 1) ? "selected" : ""; }
                    <option value="1" @pSelect>WorkFlow</option>

                    @{pSelect = (item.TB_Parametro_CampoValidador.Origem_Campo == 2) ? "selected" : ""; }
                    <option value="2" @pSelect>SAS</option>
                </select>
            </td>

            <td>
                <select class="selectpicker form-control selIdCampo" data-live-search="true">
                    @if (item.ID_Campo > 0) {
                        <option value="@item.ID_Campo" selected>@item.TB_Parametro_CampoValidador.Nome_Campo</option>
                    }
                    else{
                        <option value="0" selected>Selecione...</option>
                    }


                    @foreach (var campo in listaCampos.Where(c => c.ID_Campo != item.ID_Campo && c.Origem_Campo == item.TB_Parametro_CampoValidador.Origem_Campo))
                    {
                        <option value="@campo.ID_Campo">@campo.Nome_Campo</option>
                    }
                </select>
            </td>

            <td>
                <input type="text" class="form-control txtAlias" value="@item.Alias" maxlength="100">
            </td>

            <td class="text-center">
                <a href="#" id="btn-excluir-campo" onclick="RemoverCampo(this)">
                    <span class="glyphicon glyphicon-trash exp-glyphicon-remove" style="font-size: large"></span>
                </a>

                <input type="hidden" class="selIdCampoEmail" value="@item.ID_Campos_Email" />
            </td>
        </tr>
    }

    </table>
}

Now the Jquery script that counts how many htmls fields are already created:

function GetCamposEmailGrid() {
var obj = [];
debugger;

var idEmail = ($('#idAlt') != undefined && $('#idAlt').val() != undefined) ? $('#idAlt').val() : 0;

$(".listCamposEmail").each(function () {
    var campo = {};

    campo.ID_Campos_Email = $(this).find('.selIdCampoEmail').val();
    campo.ID_Email = idEmail;
    campo.ID_Campo = $(this).find('.selIdCampo').val();
    campo.Alias = $(this).find(".txtAlias").val();
    campo.IS_Valor = true;

    obj.push(campo);
});

return obj;

}

Controller that decentralizes and creates new html fields.

public ActionResult AddCampoEmail(int idEmail, string camposEmail)
    {
        try
        {
            var campos = new JavaScriptSerializer().Deserialize<List<TB_Campos_Email>>(camposEmail);

            if (campos == null)
                campos = new List<TB_Campos_Email>();

            var camposValidadores = new CampoValidadorBLL().ListarCamposWFSAS();

            ViewBag.CamposValidadores = camposValidadores;

             foreach (var item in campos)
                 item.TB_Parametro_CampoValidador = camposValidadores.FirstOrDefault(c => c.ID_Campo == item.ID_Campo) ?? new TB_Parametro_CampoValidador { Origem_Campo = 1 };

            campos.Add(new TB_Campos_Email { ID_Email = idEmail, ID_Campo = 0, TB_Parametro_CampoValidador = new TB_Parametro_CampoValidador { Origem_Campo = 1 }, Alias = "" });

            Response.StatusCode = 200;
            return PartialView("PartialComposicaoEmail", campos);

        }
        catch (Exception ex)
        {
            ExibirMensagem("Erro: " + ex.Message, ETipoMensagem.Erro, 99);
            return PartialView("Mensagens");
        }
    }