панель поиска на mvc просмотре с javascript динамикой - PullRequest
Новая
       14

панель поиска на mvc просмотре с javascript динамикой

0 голосов
/ 02 августа 2020

я пытаюсь сделать панель поиска dinami c, поэтому у меня есть элемент в моем представлении, данные таблицы взяты из модели представления и заполнены foreach l oop.

теперь, моя идея заключается в том, что когда я пишу на элементе ввода текста представления, модель в контроллере действий изменяется, а при возврате к функции js таблица загружает новую модель, а представление показывает новые данные , но не работает.

Я не знаю, как сказать javascript: «Эй, это новая модель, обновите вид с помощью новой модели динамично»

это мое мнение . 

@model IEnumerable<GestorBd.Models.Computadora>

@{
    ViewBag.Title = "ComputadoraGeneral";
}

<input class="form-control" type="text" placeholder="Inventario" id="invbox" name="searchstringInv">
<br />
<div id="tabla">
    <table class="table table-hover" , id="tablaAFT">
        <tr>
            <th style="white-space:nowrap;">
                @Html.DisplayNameFor(model => model.AFT.NInventario)
            </th>
            <th style="white-space:nowrap;">
                @Html.DisplayNameFor(model => model.AFT.Receptor.AreaTrabajo)
            </th>

            <th style="white-space:nowrap;">
                @Html.DisplayNameFor(model => model.AFT.Receptor.Nombre)
            </th>

            <th style="white-space:nowrap;">
                @Html.DisplayNameFor(model => model.AFT.Estado)
            </th>


            <th style="white-space:nowrap;">
                @Html.DisplayNameFor(model => model.MarcaMotherboard)
            </th>



            <th style="white-space:nowrap;">
                @Html.DisplayNameFor(model => model.ModeloMotherboard)
            </th>



            <th style="white-space:nowrap;">
                @Html.DisplayNameFor(model => model.ModeloMicroprocesador)
            </th>



            <th style="white-space:nowrap;">@Html.DisplayNameFor(model => model.Generacion)</th>

            <th style="white-space:nowrap;">@Html.DisplayNameFor(model => model.MarcaChasis)</th>
            <th style="white-space:nowrap;">@Html.DisplayNameFor(model => model.CapacidadHD)</th>

            <th style="white-space:nowrap;">@Html.DisplayNameFor(model => model.TipoRAM)</th>
            <th style="white-space:nowrap;">@Html.DisplayNameFor(model => model.CantidadRAM)</th>
            <th style="white-space:nowrap;">@Html.DisplayNameFor(model => model.MarcaModeloTTarjetaVideo)</th>




        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.AFT.NInventario)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.AFT.Receptor.AreaTrabajo)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.AFT.Receptor.Nombre)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.AFT.Estado)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.MarcaMotherboard)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.ModeloMotherboard)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.ModeloMicroprocesador)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.Generacion)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.MarcaChasis)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.CapacidadHD)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.TipoRAM)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.CantidadRAM)
                </td>
                <td style="white-space:nowrap;">
                    @Html.DisplayFor(modelItem => item.MarcaModeloTTarjetaVideo)
                </td>

                <td style="white-space:nowrap;">



                    <a href="@Url.Action("Details", "Receptors", new {id =item.AFT.IdUbicacion})" title="Ubicación">
                        <i class="glyphicon glyphicon-user"></i>
                    </a>
                    <a href="@Url.Action("Details", "AFTs", new {id =item.AFT.IdAft})" title="Más Detalles">
                        <i class="glyphicon glyphicon-zoom-in"></i>
                    </a>
                    <a href="@Url.Action("Edit", "AFTs", new {id =item.AFT.IdAft})" title="Editar">
                        <i class="glyphicon glyphicon-edit"></i>
                    </a>
                    <a href="@Url.Action("EditarDetallesTec", "AFTs", new {id =item.AFT.IdAft})" title="Editar Detalles Técnicos">
                        <i class="glyphicon glyphicon-wrench"></i>
                    </a>
                    <a href="@Url.Action("Delete", "AFTs", new {id =item.AFT.IdAft})" title="Borrar">
                        <i class="glyphicon glyphicon-trash"></i>
                    </a>
                </td>
            </tr>
        }

    </table>
</div>



@section Scripts{

    <script>

       

      var error =  function earror() {
            alert("dio error");
        }

                $(function () {
                    $('#invbox').keyup(function () {
                        
                        var url = "@Url.Action("ComputadoraGeneral", "AFTs")";
                        var texto = $('#invbox').val();

                        var data = { searchstring: texto };

                        $.get(url, data).done(function (data) {

                            document.getElementById('table').innerHTML = data;
                            alert("funciono");

                        }).fail(error);

            }

            );
        }
        );

    </script>







                                           }

это действие на контроллере 

[HttpGet]
        public ActionResult ComputadoraGeneral(string searchstring)
        {
            //var modelo = db.AFTs.Join(db.Compputadoras, Af => Af.IdAft, com => com.IdComputadora,
            //    (Af, com) => new GeneralComputadora { aft = Af, Computadora = com });

            var modelo = db.Compputadoras.Include(m => m.AFT).Include(g => g.AFT.Receptor).ToList();


            if (searchstring != null)
            {

                modelo = db.Compputadoras.Include(m => m.AFT).Include(g => g.AFT.Receptor).Where(m => m.AFT.NInventario.Contains(searchstring)).ToList();
            }


           

            return View(modelo);


        }

1 Ответ

0 голосов
/ 02 августа 2020

Я понимаю, что то, что я пытаюсь сделать, излишне. мне не нужно менять модель. со всеми данными в таблице все, что мне нужно, это поиск по строкам с l oop в таблице и поиск совпадения со строкой панели поиска, строки, которые не соответствуют, скрывают его.

с этим скриптом у меня работает, 

<script>
            function myFunction() {
      // Declare variables
                var input, filter, table, tr, td, i, txtValue; var cont = 0;
      input = document.getElementById("invbox");
                filter = input.value.toUpperCase();
      table = document.getElementById("tablaAFT");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query
      for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = ""; cont++;
            } else {
                tr[i].style.display = "none";
            }
        }
                }
                document.getElementById("spana").innerHTML = cont;

}
    </script>
...