Tengo una página de afeitar donde todo se muestra bien, pero necesito poder leer los valores dentro de algunos controladores para pasarlos como parámetros en una llamada para prefiltrar algunos datos:
@page @addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers @model MyApp.Pages.IndexModel @{ ViewData["Title"] = "MyApp"; } <div class="col-12 border p-3 mt-3"> <h3>Filters</h3> <div class="col-12"> <select id="portMultiselect" name="lsPorts" asp-items="@Model.Ports" multiple></select> <input id="searchString" type="text" name="searchString"> </div> </div> @* A "REFRESHABLE" TABLE GOES HERE...*@ @section scripts{ @* REFRESH SCRIPT *@ <script type="text/javascript"> $(function () { setInterval(loadTable, 60000); loadTable(); }); function loadTable() { var select1 = document.getElementById("portMultiselect"); var selectedPorts = []; for (var i = 0; i < select1.options.length; i++) { if (select1.options[i].selected) selectedPorts.push(select1.options[i].value); } var searchString = document.getElementById('searchString').value; if (searchString != "" || selectedPorts.length != 0) { debugger; } fetch('/Index?handler=IndexPartial', { data: { searchString: searchString, selectedPorts: selectedPorts } }) .then((response) => { return response.text(); }) .then((result) => { document.getElementById('refreshable').innerHTML = result; }); } </script> }Como puede ver, estoy tratando de capturar los valores seleccionados en mi selección múltiple y en una entrada de texto para pasarlos como parámetros en el script de actualización.
Estoy llegando correctamente al punto final esperado, pero nunca obtengo ningún valor (siempre está vacío y cero) Incluso agregué un depurador en el código Javascript que nunca estoy presionando.
¿Por qué no puedo leer esos valores?
EDITAR: he visto otras formas de lidiar con esto, como los enlaces de datos, pero como se menciona aquí , la única forma de evitar la recarga de la página es javascript y AJAX, por lo que todavía necesito obtener estos valores de javascript.
Al final, encontré una solución a mi situación de la siguiente manera:
Cambié la forma en que renderizo selectPicker, siguiendo los ejemplos que se muestran en esta página :
@page @addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers @model MyApp.Pages.IndexModel @{ ViewData["Title"] = "MyApp"; } <div class="col-12 border p-3 mt-3"> <h3>Filtros</h3> <div class="row"> <div class="col-6"> <p>Puertos</p> @Html.DropDownListFor(x => x.selectPort, (IEnumerable<SelectListItem>)ViewData["MyPorts"], new { @id = "portMultiselect", @class = "form-control selectpicker", @Value = @Model.Ports, data_live_search = "true", multiple = "multiple" }) </div> <div class="col-6"> <p>Nombre de variable</p> <input id="searchString" type="text" name="searchString"> </div> </div> </div>Esto viene con ciertos cambios en el modelo con el que está trabajando, puede seguir las instrucciones para vincular datos como comentó T.Trassoudaine, aquí
para que esto funcione, debe agregar las referencias especificadas en su _Layout (para la selección de arranque), puede verificar todo lo que necesita agregar aquí
Y finalmente, deberá trabajar con AJAX en javascript para devolver los parámetros:
<script type="text/javascript"> $(function () { setInterval(loadTable, 1000); loadTable(); }); function loadTable() { var select1 = document.getElementById("portMultiselect"); var selectedPorts = []; for (var i = 0; i < select1.options.length; i++) { if (select1.options[i].selected) selectedPorts.push(select1.options[i].value); } var searchString = document.getElementById('searchString').value.toUpperCase(); var searchPorts = ""; if (selectedPorts.length != 0) { searchPorts = selectedPorts.join(","); } $.ajax({ url: '/?handler=IndexPartial', data: { searchString: searchString, searchPorts: searchPorts }, success: function (data) { document.getElementById('refreshable').innerHTML = data; } }) } </script>