Отображение результатов поиска с помощью ajax

Question

Привет, я работаю над простым приложением asp.net mvc.У меня есть кнопка поиска, которая возвращает таблицу продуктов.Я поставил эту таблицу в частичное представление.Когда я нажимаю на кнопку поиска, она открывает другую страницу, и я действительно хочу, чтобы сверху отображался результат поиска (таблица) на той же странице.Вот метод поиска в Home Controller

      public ActionResult SearchM(string Search)
    {
        var viewMod = new MyViewModel
        {
            ProductsV = DB.Products.Where(x => 
      x.ProductName.StartsWith(Search)).ToList()

        };
        return View(viewMod);
    }
    }

Продукты Частичное представление

 @model OnlineShopping.MyViewModel

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>


 <table class="table table-bordered">
<thead>
    <tr>

        <th>Product Name</th>
        <th>Price</th>
        <th>Description</th>
        <th>Product Image</th>

    </tr>
</thead>
@foreach (Product item in Model.ProductsV)
{
    <tr>
        <td>@item.ProductName</td>
        <td>@item.ProductPrice</td>
        <td>@item.ProductDetails</td>
        <td><img src="@Url.Content(@item.ProductImage)" width="120" 
   height="160" /></td>
    </tr>

  }
 </table>

Индекс просмотра

   <script>

        $(document).ready(function () {
            $('#SearchMenu').click(function () {
                $('.showSearch').toggle("slide");
            });
        });
  </script>

 <h3>Search:</h3>


 @using (Html.BeginForm("SearchM", "Home", FormMethod.Get))
{

    <label> Search:</label> <input type="text" name="Search" class="btn- 
  block" />
    <br />

    <div id="SearchMenu">
        <input type="submit" value="Search" class="btn-light" />

    </div>

  }


  <div id="showSearch"><input type="button" class="btn-success" 
   value="Show/Hide All Products" /></div><br />
  <div class="SearchMenu" style="display: none;">
    @Html.Partial("SearchM", Model)
  </div>

Answer 1

Вы можете использовать помощника MVC AJAX или перехватить событие submit с помощью вызова AJAX.Поскольку вы используете MVC, я предлагаю вам использовать помощник AJAX.

Вам потребуется установить Microsoft.Jquery.Unobtrusive.Ajax из диспетчера пакетов NuGet, чтобы использовать помощник.

После того, как вы это установили, это должно быть так же просто, как изменить это:

@using (Html.BeginForm("SearchM", "Home", FormMethod.Get))

На это:

@using (Ajax.BeginForm("SearchM", "Home", new AjaxOptions() { UpdateTargetId = "SearchMenu" }))