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>

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

    [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>元素，因此您尝试在<table>内呈现<tbody>，这将是无效的。更改选择器以使用包围表的<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 );            
}

搜索功能有效时使用PartialView进行表格查看更新

1 个答案: