Home / Questions / 251209
Accepted
Nicolas Oñate
Asked: 2020-04-04 02:18:03 +0800 CST 2020-04-04 02:18:03 +0800 CST

How do I get the result of a select in ASP.NET?

  • 772

I have a view, which, when selecting in a <select>previous one, varies its content and I have to capture which element is selected.

I am using the Html.DropDownListForto get the data in the primer <select>as follows:

@Html.DropDownListFor(m => m.ListaClases, new SelectList(Model.ListaClases, "IdClase", "Clase"), new { @class = "input form-control input-lg", @required = "required", @style = "height: 40px; font-size:16px" })

I have to obtain in the same view and without using javascript, the value that is selected to be able to paint the other one.

I have tried to try to generate a hidden field @Html.HiddenForand assign the value to it with the onChange event with something similar to this question but I have not been able to do it

How can I get the IdClasewithout using javascript and reflect it directly in the Html?

EDIT 1

To further clarify the matter I upload the view as I currently have it, I will start with a capture of the form: Form

  1. Three inputs of type text, do not generate any conflict
  2. Class and subclass, two Lists Linked to each other, the Class is the one I want to get the id
  3. Properties and Value, these have to vary depending on the Class (Currently working in javascript)
  4. Buttons to add/remove properties to the table
  5. Accept button makes the submit of the form

The Code of the window(cshtml):

    @model ArticuloVm
    @{
        /**/

        Layout = null;
        var variable = 1;
    }
    @using (Html.BeginForm())
    {
        @Html.HiddenFor(m => m.Id)

        <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-4">

                Código
                <input class="form-control input-lg" type="text" name="Codigo" id="Codigo" style=" height: 50px; font-size:21px;" autocomplete="off" value="@Model.Codigo">

            </div>

            <div class="col-md-4">

                Código Ean
                <input class="form-control input-lg" type="text" name="CodigoEan" id="CodigoEan" style="height: 50px; font-size:21px;" autocomplete="off" value="@Model.CodigoEan">

            </div>
            <div class="col-md-2">
            </div>


        </div>
        <br />
        <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-8 offset-md-2">

                Descripción
                <input class="form-control input-lg" type="text" name="Descripcion" id="Descripcion" style="height: 50px; font-size:21px;" autocomplete="off" value="@Model.Descripcion">

            </div>

        </div>
        <br />
        <div class="row">
            <div class="col-md-2">
                &nbsp;
            </div>
            <div class="col-md-4">
                Clase
                @Html.DropDownListFor(m => m.ListaClases, new SelectList(Model.ListaClases, "IdClase", "Clase"), new { @class = "input form-control input-lg", @required = "required", @style = "height: 40px; font-size:16px", onchange = variable++ }) 
                //probando si funcionaba el evento onchange para capturar la variable, con esta prueba he descubierto que tan solo lo ejecuta 1 vez poniendo el valor a 2
            </div>
            <div class="col-md-4">
                SubClase
                @Html.DropDownListFor(m => m.ListaSubClases, new SelectList(Model.ListaSubClases, "IdClase", "Clase"), new { @class = "input form-control input-lg", @required = "required", @style = "height: 40px; font-size:16px" })
            </div>
        </div>
        <br/>   
        <div class="row">
            <div class="col-md-2">
                &nbsp;
            </div>      


            <div class="col-md-4">  

    //Actualmente puesto en dos selects, es lo que quiero transformar según el id de la Clase
                    <select class="input form-control input-lg" id="valor" name="valor"

 style="height: 40px; font-size:16px; position:absolute; visibility: hidden; width: 92%;">
                    <option value="1">Valor máximo</option>
                    <option value="2">Valor mínimo</option>
                </select>
                <select class="input form-control input-lg" id="Tiene" name="Tiene" style="height: 40px; font-size:16px; position:absolute; width: 92%;">
                    <option value="1">Tiene Solomillo</option>
                    <option value="2">Tiene rabo</option>
                </select>
            </div>
            <div class="col-md-2">
                Valor:
                <input style="height: 40px; width: 92%; font-size:18px; visibility: hidden;  position:absolute;" class="form-control input-lg" placeholder="Valor" name="cantidad" id="cantidad" autocomplete="off">
                <select class="input form-control input-lg" id="sino" name="sino" style="height: 40px; font-size:16px; position:absolute; width: 92%;">
                    <option value="1">Si</option>
                    <option value="2">No</option>
                </select>

            </div>
            <div class="col-md-2" style="padding-top: 1.5%;">
                <div class="col-md-6">
                    <div class="input-group">
                        <button id="anadir" type="button" class="btn btn-success btn-lg">Añadir</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-group">
                        <button disabled id="quitar" type="button" class="btn btn-danger btn-lg">Quitar</button>
                    </div>
                </div>
            </div>
        </div>  
        <br/>   
        <div class="row" style="overflow-y:scroll; height: 200px">
            <div class="col-md-3"></div>
            <div class="col-md-6 offset-md-3">
                <table id="Propiedades" class="display projects-table table table-striped table-bordered table-hover" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Propiedad</th>
                            <th>Valor</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    }

The moment I press the OK button it jumps to the controller and enters the following function:

        [TsVisible]
        [HttpPost]
        public ActionResult NuevoArticulo(ArticuloVm vm)
        {

            try
            {               
                Debug.WriteLine("Datos: " + vm.Codigo + ", " + vm.Descripcion + ", " + vm.CodigoEan + ", " + vm.ListaClases + ", " + vm.ListaSubClases);

                //_svcConfiguraciones.AnadirArticulo(vm.Codigo, vm.Descripcion, vm.CodigoEan, vm.Datos);
                return AjaxResp.Ok("Nuevo Articulo", "Articulo añadido correctamente");

            }
            catch (Exception ex)
            {
                _log.Error(ex);
                return AjaxResp.Error("Nuevo Árticulo", "Se ha producido un error al añadir el árticulo");
            }

        }

With the call to _svcConfiguracionesenter the class in charge of managing the DB, blocked for obvious reasons, it turns out that the debug message shows me those that are defined in the view by the model but not those that I captured by javascript/Jquery, the method what use is:

$('#aceptarPost').click(function () {

mvc.Configuracion.NuevoArticulo.post({ Codigo: $('#Codigo').val(), CodigoEan: $('#CodigoEan').val(), Descripcion: $('#Descripcion').val() }, res => {        
    console.log("Respuesta");
});
});

This call currently only has three of all the parameters but from previous tests I did, all the values ​​were defined.

c#

1 Answers

  1. Best Answer

    Your problem occurs because you are using incorrectly Html.DropDownListFor().

    Remember that the lambda expression that it receives as the first parameter is the one that will associate the <select>with the name corresponding to the property, in your case, for example.

    @Html.DropDownListFor(m => m.ListaSubClases, new SelectList(Model.ListaSubClases, "IdClase", "Clase"), new { @class = "input form-control input-lg", @required = "required", @style = "height: 40px; font-size:16px" })

    Your first parameter references ListaSubClasesso it will assign the namedel to selectbe ListaSubClases, so your Controller will try to associate it with ListaSubClasesyour model property, and it just won't be able to because it's of a different type than int.

    To solve it, what you would have to do is within your ViewModelhave a intwhere you receive that data, for example

    public class ViewModel 
{
    public int ListaSubClasesId { get;set; }
    public List<T> ListaSubClases { get; set; }
}

    Trefers to the type of the list you have stored inListaSubClases

    Then, in the view, it would be as follows

    @Html.DropDownListFor(m => m.ListaSubClasesId, new SelectList(Model.ListaSubClases, "IdClase", "Clase"), new { @class = "input form-control input-lg", @required = "required", @style = "height: 40px; font-size:16px" })

    In this way, to your Controller, the Iddel would arrive selectin the property ListaSubClasesIdof your ViewModel

    • 2