搜索功能有效时，使用PartialView更新表视图

Question

我想要原始表格视图列表更新而无需使用部分视图刷新页面

我的主视图控制器

    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>

对于上述搜索功能，我在Same Controller中具有以下方法

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

但是在这里初始表加载工作正常，但是当我搜索弹出窗口并单击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视图包含一个表，而当前选择器是它的<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") @foreach (var item in Model) { ... }循环，并将其替换为@Html.Partial("_SampleSearch") （或@{ Html.RenderPartial("_SampleSearch"); } ），最后将controller方法更改为

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

搜索功能有效时，使用PartialView更新表视图

问题描述

1 个解决方案

解决方案1
1 已采纳

搜索功能有效时，使用PartialView更新表视图

问题描述

1 个解决方案

解决方案1 1 已采纳

解决方案1
1 已采纳