使用 ajax 显示搜索结果答案

【问题标题】：Showing search results using ajax使用 ajax 显示搜索结果
【发布时间】：2019-05-01 16:24:33
【问题描述】：

您好，我正在开发一个简单的 asp.net mvc 应用程序。我有一个返回 Products 表的搜索按钮。我把这张表放在局部视图中。当我点击搜索按钮时，它会打开另一个页面，我真正想要的是在同一页面上显示搜索结果（表格）。这是 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>

【问题讨论】：

我没有看到你在任何地方使用$.ajax()。此外，您的按钮有<input type="submit" ... />，这会导致回发并重新加载页面。您可以查看 this issue 和 this issue 以开始使用 AJAX 调用。

标签： javascript asp.net asp.net-mvc asp.net-ajax

【解决方案1】：

您可以使用 MVC AJAX 帮助程序或通过 AJAX 调用拦截提交事件。
当您使用 MVC 时，我建议您使用 AJAX 助手。

您需要从 NuGet 包管理器安装 Microsoft.Jquery.Unobtrusive.Ajax 才能使用帮助程序。

一旦你安装了它，它应该就像改变这个一样简单：

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

到这里：

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

【讨论】：

谢谢你，伙计，我会努力的，会及时更新的
很高兴听到它奏效了。 :) 如果它满足您的问题，请考虑标记我的答案。