Table 搜索功能可用时使用 PartialView 查看更新

Question

我想要原始的table视图列表更新而不使用局部视图刷新页面

我的主视图控制器

    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 );            
    }

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

Answer 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 视图包含一个 table 并且您当前的选择器是它的 <tbody> 元素，因此您试图在 <tbody> 中呈现一个 <table>这将是无效的。更改选择器以使用包含 table.

的 <div> 元素

作为替代方案，您可以创建一个仅呈现 table 行的局部视图（比如 _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 );            
}

Table 搜索功能可用时使用 PartialView 查看更新

Table View update using PartialView when search function works

c#

ajax

asp.net-mvc

partial-views

razor