Question

嗨，我正在研究一个简单的asp.net mvc应用程序。我有一个搜索按钮，返回一个Products表。我将此表放在局部视图中。当我单击搜索按钮时，它会打开另一个页面，我真正想要的是在同一页面上显示搜索结果（表）。这是家用控制器中的搜索方法

      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帮助器，也可以通过AJAX调用来拦截Submit事件。
在使用MVC时，我建议您使用AJAX帮助器。

您需要从NuGet软件包管理器中安装Microsoft.Jquery.Unobtrusive.Ajax，以使用帮助程序。

安装完成后，只需更改以下内容即可：

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

对此：

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

使用ajax显示搜索结果

1 个答案: