none
Carregar @HTML.LabelFor após Selected DropDownList RRS feed

  • Pergunta

  • Olá,

    eu tenho um formulario em uma pagina Create que preciso ao selecionar um produto em um DropDownList que retorne carregando campos LabelFor dos atributos do produto selecionado.

    CREATE

    @Html.DropDownList("cod_Prod_Serv", null, String.Empty, new { Name = "cod_Prod_Serv", id = "cod_Prod_Serv", @class = "form-control" })
    @Html.LabelFor(model => model.Produto_Servico.lote_Partida)
    @Html.LabelFor(model => model.Produto_Servico.data_Fabricacao)
    @Html.Labelor(model => model.Produto_Servico.data_Vencimento)

    Alguém tem algum modelo para recomendar MVC4 C#?


    • Editado Wilson Boris segunda-feira, 20 de julho de 2015 01:24 complemento
    segunda-feira, 20 de julho de 2015 01:17

Respostas

  • Olá Wilson,

    acredito que esse link tenha o exemplo certo para você, porém você terá de utilizar jquery.

    https://fromjami.wordpress.com/2013/05/29/sending-ajax-request-when-dropdown-change-in-asp-net-mvc/


    Att, Lucio Rogerio


    Espero ter ajudado, se ajudei, por favor "Vote como Útil", e se resolvi seu problema, clique em "Propor como Resposta".

    • Sugerido como Resposta CarlosEduardo Ferreira segunda-feira, 20 de julho de 2015 11:32
    • Marcado como Resposta Wilson Boris segunda-feira, 20 de julho de 2015 18:17
    • Não Marcado como Resposta Wilson Boris terça-feira, 21 de julho de 2015 12:47
    • Marcado como Resposta Wilson Boris sexta-feira, 31 de julho de 2015 11:30
    segunda-feira, 20 de julho de 2015 01:22
  • Olá Wilson,

    não aconselhei você a comentar o código e reaproveitar a mesma página.

    Mas sim criar uma View zerada. E colocar apenas as labels que precisa.

    E a chamada do Jquery.

    Você pode ter algum HTML quebrado no eu código e isso está resultando no browser não encontrar esse Label na tela.

    Ou ainda esse Label pode estar invisível devido a algum CSS.


    Att, Lucio Rogerio


    Espero ter ajudado, se ajudei, por favor Vote como Útil, e se resolvi seu problema, clique em Marcar como Resposta.

    • Marcado como Resposta Wilson Boris sexta-feira, 31 de julho de 2015 11:29
    quinta-feira, 30 de julho de 2015 21:32
  • Valeu pela dica mestre,

    o erro estava no String.Empty. Agora só falta acertar o Formato da data.

    <div class="row">
                                    <div class="editor-label col-md-4">
                                        <label class="control-label">Produto</label>
                                    </div>
                                    <div class="editor-field col-md-6">
                                        @Html.DropDownList("cod_Prod_Serv", null, String.Empty, new { Name = "cod_Prod_Serv", id = "cod_Prod_Serv", @class = "form-control" })                                 
                                        @Html.LabelFor(model => model.Produto_Servico.lote_Partida, new { id = "lote", name = "lote" })
                                        @Html.LabelFor(model => model.Produto_Servico.data_Fabricacao, new { id = "Fab", name = "Fab" })
                                        @Html.LabelFor(model => model.Produto_Servico.data_Vencimento, new { id = "Venc", name = "Venc" })                                   
                                    
                                    </div>

    • Marcado como Resposta Wilson Boris sexta-feira, 31 de julho de 2015 11:29
    sexta-feira, 31 de julho de 2015 11:29

Todas as Respostas

  • Grande Lucio, obrigado pelo retorno.

    Eu tentei com o codigo abaixo, mas não consegui, rsrs:

    VIEW

    <div class="editor-field col-md-6">
       @Html.DropDownList("cod_Prod_Serv", null, String.Empty, new { Name = "cod_Prod_Serv", id = "cod_Prod_Serv", @class = "form-control" })
                                     
          @Html.LabelFor(model => model.Produto_Servico.lote_Partida, String.Empty, new { id = "lote" })
          @Html.LabelFor(model => model.Produto_Servico.data_Fabricacao, String.Empty, new { id = "Fab" })
          @Html.LabelFor(model => model.Produto_Servico.data_Vencimento, String.Empty, new { id = "Venc" })
                                        
                                    
     </div>


    <script>
        jQuery(document).ready(function () {
            $("#cod_Prod_Serv").change(function () {
                var ServiceUrl = "/Prog_Hig/DadosProduto?id=" + 1;
                var content = '';
                $.support.cors = true;
                $.ajax({
                    type: 'GET',
                    url: ServiceUrl,
                    async: true,
                    cache: false,
                    crossDomain: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    error: function (xhr, err) {
                    },
                    success: function (result, status) {
                        $('#lote').toString(result.Value);
                        $('#Fab').toString(result.Value);
                        $('#Venc').toString(result.Value);
                    }
                });
            });
        });
        </script>


    CONTROLER:

    [HttpGet]
            public ActionResult DadosProduto(int id)
            {
              
                var result = new { Value = db.Produto_Servico.Find(id)};
                return Json(result, JsonRequestBehavior.AllowGet);
            }
            

    Também tentei de outra forma no Controler, mas nada feito:

      [HttpGet]
            public ActionResult DadosProduto(int id)
            {
                var dia = db.spProdServ(id).ToArray();
                var result = dia.Select(x => new { x.lote_Partida, x.data_Fabricacao, x.data_Vencimento });
                return Json(result, JsonRequestBehavior.AllowGet);
            }


    • Editado Wilson Boris segunda-feira, 20 de julho de 2015 02:11 complemento
    segunda-feira, 20 de julho de 2015 01:58
  • Grande Lucio, 

    Ainda não apareceu Label com retorno:

        $('#lote').toString(result.lote_Partida);
        $('#Fab').toString(result.data_Fabricacao);
        $('#Venc').toString(result.data_Vencimento);

    segunda-feira, 20 de julho de 2015 15:55
  • Tentando evoluir,

    o estranho é que eu marquei a linha  abaixo para um BreakPoint, mas nada acontece.

    Eu não sou remetido para este techo na execução.

    var result = new { Value = db.Produto_Servico.Find(id)};


    segunda-feira, 20 de julho de 2015 16:52
  • Opa, quase chegando lá.

    No console está retornando vários registros:

    Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 108 mais ] 

    Desculpe, mas houve um erro na elaboração da dúvida, pois eu tenho outro DropDownList que preciso mandar para a storedprocedure, ou seja,  no primeiro eu escolho o cliente e no segundo o produto, então o que está acontecendo é que  está indo um parâmentro.

    Parece que complicou...rsrrs

    Mudei a StoredProcedure, retornou:  Array [ Object ]

    os valores no Console:

    Agora só falta aparecer no Label, rrsrs


    • Editado Wilson Boris segunda-feira, 20 de julho de 2015 18:11 complemento
    segunda-feira, 20 de julho de 2015 17:57
  • Nada certo ainda com text.
    segunda-feira, 20 de julho de 2015 18:42
  • Nada ainda, [0].

    Será que tem algo com "/Date(1477879200000)/"?

    segunda-feira, 20 de julho de 2015 19:11
  • Não aparece erro...

    segunda-feira, 20 de julho de 2015 19:17
  • Não.
    segunda-feira, 20 de julho de 2015 19:42
  • <div class="editor-field col-md-6">
                                        @Html.DropDownList("cod_Prod_Serv", null, String.Empty, new { Name = "cod_Prod_Serv", id = "cod_Prod_Serv", @class = "form-control" })
                                     
                                        @Html.LabelFor(model => model.Produto_Servico.lote_Partida, String.Empty, new { id = "lote", name = "lote" })
                                        @Html.LabelFor(model => model.Produto_Servico.data_Fabricacao, String.Empty, new { id = "Fab", name = "Fab" })
                                        @Html.LabelFor(model => model.Produto_Servico.data_Vencimento, String.Empty, new { id = "Venc", name = "Venc" })
                                        
                                    
                                    </div>
    
    
       <script>
     jQuery(document).ready(function () {
            $("#cod_Prod_Serv").change(function () {          
                var ServiceUrl = "/Programa_Higiene/Principal/DadosProduto?id=" + 1;           
                var content = '';
                $.support.cors = true;
                $.ajax({
                    type: 'GET',
                    url: ServiceUrl,
                    async: true,
                    cache: false,
                    crossDomain: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    error: function (xhr, err) {
                    },
                    success: function (result, status) {
                        console.log(result);
                    
                        $('#lote').text(result[0].lote_Partida);
                        $('#Fab').text(result[0].data_Fabricacao);
                        $('#Venc').text(result[0].data_Vencimento);
                    }
                });
            });
        });
    
       </script>

    segunda-feira, 20 de julho de 2015 19:59
  • Ah, não..

    Só não queria poluir muito.

    @model BRA.Models.Programa_Higiene
    
    @{
        ViewBag.Title = "Create";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    @using (Html.BeginForm("Create", "Principal", FormMethod.Post, new { id = "formularioprincipal" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        
       
        
        <div class="panel panel-primary">
            <div class=" panel-heading">
                <h3 class="panel-title">1. REGISTRO DOS CUIDADOS </h3>
            </div>
        </div>
        
            <div class="panel panel-primary">
                <div class=" panel-heading">
                    <h3 class="panel-title"><i>1.1. ATENDIMENTO</i></h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="editor-label  col-md-4">
                            <label class="control-label">Proprietário</label>
                        </div>
                        <div class="editor-field col-md-6">
                            @Html.DropDownList("cod_Proprietario", (SelectList)ViewBag.cod_proprietario, String.Empty, new { id = "proprietario", Name = "Diario.cod_proprietario", @class = "form-control" })
                        </div>
                        <div class="editor-field col-md-1">
                            <input type="button" class="btn btn-info" value="Novo" id="botao_proprietario">
                        </div>
                    </div>
                    <div class="row">
                        <div class="editor-label col-md-4">
                            <label class="control-label">Nome do animal</label>
                        </div>
                        <div class="editor-field col-md-6">
                            @Html.DropDownList("cod_animal", null, new { Name = "Diario.cod_animal", id = "animal", @class = "form-control" })
                        </div>
                        <div class="editor-field col-md-1">
                            <input type="button" class="btn btn-info" value="Novo" id="botao_animal">
                        </div>
                    </div>                
    
                
                    <div class="row">
                        <div class="editor-field col-md-4">
                            <label class="control-label">Data do procedimento</label>
                        </div>
                        <div class="editor-field col-md-6">
                            @Html.JQueryUI().DatepickerFor(model => model.Diario.data_atividade, new { id = "data_atividade", @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.Diario.data_atividade)
                        </div>
                    </div>
                </div>
            </div>
       
    }
                    <div class="panel panel-primary">
                        <div class=" panel-heading">
                            <h3 class="panel-title"><i>1.2. PRODUTO</i></h3>
                        </div>
    
    <form id="formprod" name="formprod" action="#" method="post">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="editor-label  col-md-4">
                                        <label class="control-label">Observação</label>
                                    </div>
                                    <div class="editor-field col-md-6">
                                        @Html.TextAreaFor(model => model.observacao, new { id = "obs", @class = "form-control" })
                                    </div>
                                </div>
                               
                                <div class="row">
                                    <div class="editor-label col-md-4">
                                        <label class="control-label">Produto</label>
                                    </div>
                                    <div class="editor-field col-md-6">
                                        @Html.DropDownList("cod_Prod_Serv", null, String.Empty, new { Name = "cod_Prod_Serv", id = "cod_Prod_Serv", @class = "form-control" })
                                     
                                        @Html.LabelFor(model => model.Produto_Servico.lote_Partida, String.Empty, new { id = "lote", name = "lote" })
                                        @Html.LabelFor(model => model.Produto_Servico.data_Fabricacao, String.Empty, new { id = "Fab", name = "Fab" })
                                        @Html.LabelFor(model => model.Produto_Servico.data_Vencimento, String.Empty, new { id = "Venc", name = "Venc" })
                                        
                                    
                                    </div>
    
                                    <div class="editor-field col-md-1">
                                        <input type="button" class="btn btn-info" value="Novo" id="botao_produto">
                                    </div>
                                </div>                           
    
                                <div class="row">
                                    <div class="editor-field col-md-4">
                                        <label class="control-label">Data do retorno</label>
                                    </div>
                                    <div class="editor-field col-md-6">
                                        @Html.JQueryUI().Datepicker("data_retorno", null, new { id = "data_retorno", name="data_retorno", @class = "form-control" })
    
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-lg-1">
                                        <button id="add" class="btn btn-primary">Adiciona produto</button>
                                    </div>
                                </div>
                            </div>
    </form>
                        <div class="panel-body">
                            <div class="row">
                                <div class="table-responsive col-md-12">
                                    <table class="table table-hover table-bordered" id="tabelaproduto">
                                        <thead>
                                            <tr style="font-size:10px">
                                                <th>
                                                    <i>Produto</i>
                                                </th>
                                                <th>
                                                    <i>Lote</i>
                                                </th>
                                                <th>
                                                    <i>Fabricação</i>
                                                </th>
                                                <th>
                                                    <i>Vencimento</i>
                                                </th>
                                                                                     
                                               
                                                <th>
                                                    <i>EXCLUIR</i>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody id="linhascomp">
                                            @foreach (var item in @ViewBag.Produtos)
                                            {
                                                <tr style="font-size:10px">
                                                    <td>
                                                        @ViewBag.nome 
                                                    </td> 
                                                    <td>
                                                       @item.lote_Partida
                                                    </td>       
                                                    <td>
                                                        @item.data_Fabricacao
                                                    </td>   
                                                    <td>
                                                        @item.data_Vencimento
                                                    </td>   
                                                                                                
                                                                                         
                                                    <td>
                                                        <button onclick="return false;">Excluir</button>
                                                    </td>
                                                </tr>
                                            }
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        </div>
           
          
        <font style="color: red;">
        <b>
            <div id="validacaoproduto"><p></p></div>
        </b>
        </font>   
        
                            <p>
                                <input type='submit' value='Salvar' class="btn btn-success" onclick='submitDetailsForm()' />
                                <a href="/Programa_Higiene/Principal"><input type="button" value="Voltar" class="btn btn-success" /></a>
                            </p>
        
    
    
        <script>
          
        function submitDetailsForm() {
            $("#formularioprincipal").submit();
        }
    
        jQuery(document).ready(function () {
            $("#cod_Prod_Serv").change(function () {          
                var ServiceUrl = "/Programa_Higiene/Principal/DadosProduto?id=" + 1;           
                var content = '';
                $.support.cors = true;
                $.ajax({
                    type: 'GET',
                    url: ServiceUrl,
                    async: true,
                    cache: false,
                    crossDomain: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    error: function (xhr, err) {
                    },
                    success: function (result, status) {
                        console.log(result);
                    
                        $('#lote').text(result[0].lote_Partida);
                        $('#Fab').text(result[0].data_Fabricacao);
                        $('#Venc').text(result[0].data_Vencimento);
                    }
                });
            });
        });
    
        function clicado(a) {
            console.log($(a).closest('tr')[0].rowIndex);
            var linhaIndex = $(a).closest('tr')[0].rowIndex;
            var codigo = $(a).closest('tr').children('td')[0].innerText;
            $.ajax({
                url: '@Url.Action("DelProduto", "Programa_Higiene")',
                type: "POST",
                contentType: 'application/json; charset=utf-8',
                data: { codigo: codigo },
                success: function (data) {
                    document.getElementById("tabelaproduto").deleteRow(linhaIndex);
                    console.log("ok");
                }
            });
        }
    
    
        $("#proprietario").change(function () {
            var dados = $(this).val().toString();
            var options = '';
            if (dados != 0) {
                $.ajax({
                    url: '@Url.Action("RetornaAnimais", "Principal")',
                    type: 'POST',
                    dataType: 'json',
                    data: { codigo: dados },
                    success: function (result) {
                        options += '<option value="" selected></option>';
                        $.each(result, function (key, val) {
                            options += '<option value="' + val["id"] + '">' + val["nome"] + '</option>';
                        });
                        $("#animal").html(options);
                    }
                });
            } else {
                console.log(options)
                $("#animal").html(options);
            }
        }).change();
    
    
    
        $('#botao_proprietario').click(function () {
            var left = (window.screen.width / 2) - 260;
            var top = (window.screen.height / 2) - 300;
            var w = window.open('/Proprietario_/Create', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=500,left = ' + left + ',top = ' + top + '');
        });
        $('#botao_animal').click(function () {
            var left = (window.screen.width / 2) - 260;
            var top = (window.screen.height / 2) - 300;
            var w = window.open('/AnimalCompanhia_/Create', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=500,left = ' + left + ',top = ' + top + '');
        });
        $('#botao_produto').click(function () {
            var left = (window.screen.width / 2) - 260;
            var top = (window.screen.height / 2) - 300;
            var w = window.open('/Produtos_Servicos_/Create', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=500,left = ' + left + ',top = ' + top + '');
        });
    
    
        function ToJavaScriptDate(value) {
            var pattern = /Date\(([^)]+)\)/;
            var results = pattern.exec(value);
            return new Date(parseFloat(results[1]));
        }
    </script>

    segunda-feira, 20 de julho de 2015 20:44
  • Ainda patinando com o carregamento do Label.

    Eu mudei o código no controller de Get para Post e o Script conforme abaixo, mas ao mudar o drop "cod_Prod_Serv" não sou remetido para o controler, alguém tem algoa a recomendar?

    <script>    
            $("#cod_Prod_Serv").change(function () {          
                var ServiceUrl = "/Programa_Higiene/Principal/DadosProduto?id=" + 1;           
                var content = '';
                $.support.cors = true;
                $.ajax({
                    type: 'POST',
                    url: ServiceUrl,
                    async: true,
                    cache: false,
                    crossDomain: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    error: function (xhr, err) {
                    },
                    success: function (result, status) {
                        console.log(result);                
                        $('#lote').text(result[0].lote_Partida);
                        $('#Fab').text(result[0].data_Fabricacao);
                        $('#Venc').text(result[0].data_Vencimento);
                    }
                });
            }); 
    </script>

    [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult DadosProduto(int id)
            {
                var dia = db.spDadosProdutoHigiene(id).ToArray();
                var result = dia.Select(x => new { x.lote_Partida, x.data_Fabricacao, x.data_Vencimento });
                return Json(result, JsonRequestBehavior.AllowGet);
            }


    • Editado Wilson Boris quinta-feira, 30 de julho de 2015 20:25 erro
    quinta-feira, 30 de julho de 2015 20:23
  • Opa, agora foi para o controller, mas não retorno carregando o Label, rsrs.

    Nossa eu abri o Fidller Web e o processamento aparece disparado quando acesso qualquer CREATE, em segundos vai para 20.000. 



    • Editado Wilson Boris quinta-feira, 30 de julho de 2015 20:43 complemento
    quinta-feira, 30 de julho de 2015 20:35
  • Estando no CREATE ao clicar o F12, para ter idéia, o console abre na tela inteira e a barra de rolagem não para de se movimentar.

    No topo da página eu havia adicionado um Script e é isso que esta disparando o processamento:

     

     google.load("visualization", "1", { packages: ["table"] });
            google.setOnLoadCallback(function () { drawtable('') });
            $(document).ready(function () {

    Na linha abaixo "console" eu digitei a linha recomendada e nada de aparecer o "teste".



    • Editado Wilson Boris quinta-feira, 30 de julho de 2015 21:03 complemento
    quinta-feira, 30 de julho de 2015 20:55
  • Lucio,

    eu comentei todo código do CREATE exceto o código abaixo, mas nada de aparecer o teste ou carregar o Label.

    @model BRA.Models.Programa_Higiene
    
    @{
        ViewBag.Title = "Create";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    @using (Html.BeginForm("Create", "Principal", FormMethod.Post, new { id = "formularioprincipal" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        <div class="row">
            <div class="editor-label col-md-4">
                <label class="control-label">Produto</label>
            </div>
            <div class="editor-field col-md-6">
                @Html.DropDownList("cod_Prod_Serv", null, String.Empty, new { Name = "cod_Prod_Serv", id = "cod_Prod_Serv", @class = "form-control" })
                @Html.LabelFor(model => model.Produto_Servico.lote_Partida, String.Empty, new { id = "lote", name = "lote" })
                @Html.LabelFor(model => model.Produto_Servico.data_Fabricacao, String.Empty, new { id = "Fab", name = "Fab" })
                @Html.LabelFor(model => model.Produto_Servico.data_Vencimento, String.Empty, new { id = "Venc", name = "Venc" })
    
            </div>
    
            <div class="editor-field col-md-1">
                <input type="button" class="btn btn-info" value="Novo" id="botao_produto">
            </div>
        </div>
    
    }
    
     <script>  
    
    
        $("#cod_Prod_Serv").change(function () {
            var ServiceUrl = "/Programa_Higiene/Principal/DadosProduto?id=" + 1;
            var content = '';
            $.support.cors = true;
            $.ajax({
                type: 'POST',
                url: ServiceUrl,
                async: true,
                cache: false,
                crossDomain: true,
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                error: function (xhr, err) {
                },
                success: function (result, status) {
                    console.log(result);
                    $('#lote').text(result[0].lote_Partida);
                    $('#Fab').text(result[0].data_Fabricacao);
                    $('#Venc').text(result[0].data_Vencimento);
                }
            });
        });
    
    
       
    </script>

     

    quinta-feira, 30 de julho de 2015 21:24
  • Valeu pela dica mestre,

    o erro estava no String.Empty. Agora só falta acertar o Formato da data.

    <div class="row">
                                    <div class="editor-label col-md-4">
                                        <label class="control-label">Produto</label>
                                    </div>
                                    <div class="editor-field col-md-6">
                                        @Html.DropDownList("cod_Prod_Serv", null, String.Empty, new { Name = "cod_Prod_Serv", id = "cod_Prod_Serv", @class = "form-control" })                                 
                                        @Html.LabelFor(model => model.Produto_Servico.lote_Partida, new { id = "lote", name = "lote" })
                                        @Html.LabelFor(model => model.Produto_Servico.data_Fabricacao, new { id = "Fab", name = "Fab" })
                                        @Html.LabelFor(model => model.Produto_Servico.data_Vencimento, new { id = "Venc", name = "Venc" })                                   
                                    
                                    </div>

    • Marcado como Resposta Wilson Boris sexta-feira, 31 de julho de 2015 11:29
    sexta-feira, 31 de julho de 2015 11:29