显示部分视图，仅在提交搜索后，仅在提交ASP.NET MVC之后

Question

我是ASP.NET MVC的新手。如果我是盲目的，我就找不到在这里对我有用的解决方案。

我正在尝试制作一个网络应用程序，可以在其中搜索客户端，而无需显示整个客户端。仅在用户按搜索之后，搜索结果才能显示为部分视图。我知道使用Ajax是处理类似的最受欢迎的方法。

关于如何完成此操作的任何指示？

我的第一个想法是进行显示：块/无脚本连接到提交按钮，但是每次您搜索时，页面都会更新此想法。这就是为什么我可以在如何使用搜索结果的情况下对网页更新网页方面使用一些帮助的原因。

homecontroller：

        using testForAutofill.Models;
        //Search Functionality
        [HttpPost]
        public PartialViewResult Index(string searchTerm)
        {
            test_Db_Context db = test_Db_Context();
            List<ViewNewOrderSum> orderSums;
            if (string.IsNullOrEmpty(searchTerm))//Fix this.
            {
                orderSums = db.ViewNewOrderSum.ToList();
            }
            else
            {
                orderSums = db.ViewNewOrderSum.Where(x => 
                                   x.ClientName.Equals(searchTerm)).ToList();
            }
            return PartialView(orderSums);
        }

索引视图：

@model IEnumerable<testForAutofill.Models.ViewNewOrderSum>
@using (Html.BeginForm())
{
    <b>Kundenavn:</b>
    @Html.TextBox("searchTerm", null, new { id = "txtSearch" })
    <input type="submit" value="🔍 Search" class="btn btn-primary" id="btn-search" />
}
<div id="posts-wrapper"></div>

<div class="client-div" runat="server" style="max-width: 20rem;">
    <div class="card-header">Header</div>
    <div class="card-body" id="client-Card">
        <h4 class="card-title">Client info</h4>
        <table id="client-table">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.ClientName)
                </th>
            </tr>
            @foreach (var item in Model)
            {
                @Html.Partial("_OrderSum", item)
            }
        </table>
    </div>
</div>

部分视图：

@model testForAutofill.Models.ViewNewOrderSum
<tr>
    <td>
        @Html.DisplayFor(modelItem => Model.ClientName)
    </td>
</tr>

Answer 1

无需使用Ajax。您可以在表格发布中提交搜索文本。根据您的搜索术语恢复以获取数据和过滤器，以使用模型查看。如果您的模型不是空的或空的表else否则不显示表。

检查以下代码：

查看：

@model List<testForAutofill.Models.ViewNewOrderSum>
@using (Html.BeginForm()) {
   <b>Kundenavn:</b>
   @Html.TextBox("searchTerm", null, new { id = "txtSearch" })
   <input type="submit" value="🔍 Search" class="btn btn-primary" id="btn-search" />
}
@if (Model != null && Model.Count() > 0) {
<div class="client-div" runat="server" style="max-width: 20rem;">
    <div class="card-header">Header</div>
    <div class="card-body" id="client-Card">
        <h4 class="card-title">Client info</h4>
        <table id="client-table">
            <tr>
                <th>
                   ClientName
                </th>
            </tr>
            @foreach (var item in Model) {
                 @Html.Partial("_OrderSum", item)
            }
        </table>
    </div>
</div>
}

控制器：

public ActionResult Index()
{
    //if you want to load all the clients by default
    test_Db_Context db = test_Db_Context();
    List<ViewNewOrderSum> orderSums; 
    orderSums = db.ViewNewOrderSum.ToList();
    return View(orderSums);
}
 [HttpPost]
 public ActionResult Index(string searchTerm) {
     test_Db_Context db = test_Db_Context();
        List<ViewNewOrderSum> orderSums;
        if (!string.IsNullOrEmpty(searchTerm))
        {
            orderSums = db.ViewNewOrderSum.Where(x => 
                               x.ClientName.Equals(searchTerm)).ToList();
        }
     return View(result);
 }

Answer 2

我的第一个想法是仅进行显示：块/无脚本 连接到提交按钮，但是每次您的页面都会更新 搜索使这个想法毫无用处。

您可以防止使用以下内容(使用jQuery(更新页面：

    <script type="text/javascript">
        $('form').submit(function (evt) {
          evt.preventDefault();
          ... your code
      });
    </script>

然后，您可以进行AJAX发布通话，获取数据，UND table标题并从部分视图附加HTML结果。