搜索功能工作时使用 PartialView 更新表视图答案

【问题标题】：Table View update using PartialView when search function works搜索功能工作时使用 PartialView 更新表视图
【发布时间】：2017-02-18 15:31:24
【问题描述】：

我想在不使用局部视图刷新页面的情况下更新原始表视图列表

我的主视图控制器

    public ActionResult Index()
    {
       IEnumerable<ClassFile> listdata = ...
       return View(listdata);
    }

查看页面

      @model IEnumerable<ProjectName.Model.ClassFile>
      @{
           ViewBag.Title = "Dashboard";
           Layout = "~/Views/Shared/_Layout.cshtml";
       } 
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                            </tr>
                        </thead>
                        <tbody id="sampledata">
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>@Html.DisplayFor(model => item.ID)</td>
                            </tr>
                        }
                        </tbody>
                    </table>
                </div>

在_Layout 页面中，我有以下弹出窗口来搜索和 ajax 调用来更新上面的视图

<!DOCTYPE html>
<html>
 <head>
        @Styles.Render("~/Content/css")        
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>

        <div class="content-page">

            <div class="content">
                <div class="container">
                    RenderBody()
                <footer class="">                        
                </footer>
            </div> 
        </div>

    <div id="panel-modal">
           <div class="form-group"> 
           <input type="text" id="searchstring">
           </div>
           <div class="form-group"> 
            <button id="btnSearch" type="button" class="ss">Search</button>
         </div>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

<script type="text/javascript">

    $(document).ready(function () {
        $('#btnSearch').click(function () {            

            $.ajax({

                type: "POST",
                url: "/Home/SampleSearch",
                data: { searchtext: $('#searchstring').val()},
                dataType: "html",
                Success: function (response)
                {
                    alert("Success");
                   $('#sampledata').html(response);                        

                },
                error: function ()
                {
                    alert("error");
                }
            });
            return false

        });
    });
</script>

对于上述搜索功能，我在同一控制器中有以下方法

    [HttpPost]
    public ActionResult SampleSearch(string searchstring)
    {
        IEnumerable<ClassFile> listsearchData = ...
        return PartialView("Index", listsearchData );            
    }

但是这里初始表加载工作正常，但是当我通过弹出窗口搜索并单击 btnSearch 按钮时，它没有更新索引页面，当我调试时，我可以看到 SampleSearch 方法中的值，也没有发生错误

【问题讨论】：

为什么将索引页面作为部分视图响应返回，因为它声明为视图页面？部分视图应该使用@Html.Partial 或@Html.RenderPartial 来渲染它们。如果您的操作方法返回要在页面正文中呈现的 html 响应，请改用 @Html.Raw。
您的Index.cshtml 视图包含表格，因此请从<tbody> 元素中删除id="sampledata"，并在您的布局中为占位符添加<div id="sampledata"></div>。或者，创建一个单独的局部视图，仅呈现 <tbody> 元素
$.ajax 设置对象的所有属性都以小写字母开头，但您似乎在使用Success: ...
我更喜欢使用单独的局部视图文件，因为它具有返回局部视图的SampleSearch 操作方法。由于 JS 本质上是区分大小写的，因此在查找 success 时，Success 属性可能不匹配。
@StephenMuecke 我应该在哪里添加<div id="sampledata"></div> _Layout 页面

标签： c# ajax asp.net-mvc razor partial-views

【解决方案1】：

需要把ajax代码改成

$.ajax({
    type: "POST",
    url: '@Url.Action("SampleSearch", "Home")', // don't hard code url's
    data: { searchtext: $('#searchstring').val()},
    dataType: "html",
    success: function (response) // lowercase (not Success)
    {
       $('.container').html(response);                        
    },
    ....
});

主要问题是Success（大写S）不是一个ajax选项，它需要小写success。第二个问题是您的Index.cshtml 视图包含一个表，而您当前的选择器是它的<tbody> 元素，因此您尝试在<tbody> 中呈现<table>，这将是无效的。更改选择器以使用包含表格的<div> 元素。

作为替代方案，您可以创建仅呈现表格行的局部视图（例如 _SampleSearch.cshtml）

@model IEnumerable<ProjectName.Model.ClassFile>
@foreach (var item in Model)
{
    <tr>
        <td>@Html.DisplayFor(model => item.ID)</td>
    </tr>
}

并更改Index.cshtml视图以移除@foreach (var item in Model) { ... }循环并替换为@Html.Partial("_SampleSearch")（或@{ Html.RenderPartial("_SampleSearch"); }），最后将控制器方法更改为

[HttpPost]
public ActionResult SampleSearch(string searchstring)
{
    IEnumerable<ClassFile> listsearchData = ...
    return PartialView("_SampleSearch", listsearchData );            
}

【讨论】：