I have the following problem, I have one DropDownListFor
in one view
, which when selecting one, executes a function with Javascript
using ajax
JQuery
to be able to show a corresponding label of that DropDownListFor
, example if I select OIL , the label with the description that would be Oil change should appear above the input and filter , but it doesn't, it keeps the value that starts, which is the hyphen ( - )
It's as if I cached it view
, when doing debugging I realized that the description which I call label if it is bringing it to me does not change it
Annex Controller Code
public ActionResult Index(int id, int tiposervicio = -1)
{
try
{
//---------- LISTA DE SERVICIO ------------//
List<_Servicio> lst_Servicio = new List<_Servicio>();
SqlDataReader reader = null;
using (SqlConnection CON = Class.ConexionBD.conexionDBTienda("TIENDA"))
{
string sql = $"SELECT ID, NOMBRE_SERVICIO FROM Servicios";
using (SqlCommand COM = new SqlCommand(sql, CON))
{
reader = COM.ExecuteReader();
}
while (reader.Read())
{
lst_Servicio.Add(new _Servicio()
{
ID = reader.GetInt32(0),
NOMBRE_SERVICIO = reader.GetString(1),
});
}
List<SelectListItem> itemsServicio = lst_Servicio.ConvertAll(d =>
{
return new SelectListItem()
{
Text = d.NOMBRE_SERVICIO.ToString(),
Value = d.ID.ToString(),
Selected = false
};
});
ViewBag.servicio = itemsServicio;
}
string etiqueta = "-";
reader = null;
//---------- LISTA DE ETIQUETA ------------//
using (SqlConnection CON = Class.ConexionBD.conexionDBTienda("TIENDA"))
{
string sql = $"SELECT ETIQUETA FROM SERVICIOS WHERE ID = {tiposervicio}";
using (SqlCommand COM = new SqlCommand(sql, CON))
{
reader = COM.ExecuteReader();
}
if (reader.Read())
{
etiqueta = reader.GetString(0);
}
ViewBag.etiqueta = etiqueta;
ViewBag.id = id;
}
return View();
}
catch (Exception ex)
{
return View();
}
}
Annex Code View
@model Models.ViewModels.Registro_Servicio
@{
List<SelectListItem> servicio = (List<SelectListItem>)ViewBag.servicio;
int id = ViewBag.id;
string etiqueta = ViewBag.etiqueta;
}
<h2>Servicio</h2>
@using (Html.BeginForm("Index_Servicio", "Servicio", FormMethod.Post))
{
<div class="row">
<div class="col-md-12">
<table>
<tr>
<td>
<input type="hidden" name="id" id="id" value="@id" />
</td>
<td>
<span>Servicios:</span>
@Html.DropDownListFor(x => x.ID_SERVICIO, servicio, "SELECCIONE", new { @class = "form-control", id = "tiposervicio", style = "margin-right: 15px; width:200px; height:30px", onchange = "Index( id,tiposervicio, this)" })
</td>
<td>
<span>@etiqueta</span>
@Html.TextBoxFor(d => d.DATA1, "", new { @class = "form-control", style = "margin-right: 15px; width:400px; height:30px", maxlength = "8", onkeypress = "return justNumbers(event);" })
</td>
<td>
@Html.ValidationMessageFor(d => d.DATA1, "", new { @class = "red" })
</td>
</tr>
</table>
<br />
</div>
</div>
}
<hr />
<script>
var urlr = "https://localhost:44323/";
function Index() {
var id = document.getElementById('id').value;
var tiposervicio = document.getElementById('tiposervicio');
var value = tiposervicio.options[tiposervicio.selectedIndex].value;
$.ajax({
url: urlr + "Tabl/Index",
type: 'POST',
data: { id: id, tiposervicio: value }
});
}
</script>
What could be wrong with my code that doesn't display or change the label name?
Friend, I would do that in the following way, create an action only for the change of that label, for example:
And in the view in the script:
And you can use in the label like this:
Try and tell me, the drawback must be that for that value to change in that label as you are applying it, it would be necessary to reload that field, and by doing it with the same method that you start that view you are reloading it all. I stay tuned and you tell me friend, try to keep more or less the idea of how you get the data in the controller.