Carregar @HTML.LabelFor após Selected DropDownList

Question

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#?

Answer 1

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);
        }

Answer 2

Grande Lucio, 

Ainda não apareceu Label com retorno:

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

Answer 3

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)};

Answer 4

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

Answer 5

Nada certo ainda com text.

Answer 6

Nada ainda, [0].

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

Answer 7

Não aparece erro...

Answer 8

Não.

Answer 9

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

Answer 10

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>

Answer 11

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);
        }

Answer 12

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. 

Answer 13

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".

Answer 14

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>

 

Answer 15

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>