搜索功能有效時，使用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 已采納