Usuário com melhor resposta
Carregar @HTML.LabelFor após Selected DropDownList

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