asp.net mvc _Layout 頁面中的 Ajax 搜索彈出窗口

Question

我有以下控制器操作和視圖

    public ActionResult Dashboard()
    {
       RepositoryClass sample= new RepositoryClass();
       ViewBag.listDetails = sample.GetDetails(null, null);
       return View();
    }

儀表板視圖

@{
    ViewBag.Title = "Dashboard";
    Layout = "~/Views/Shared/_ayout.cshtml";
}

<table>
    <thead>
        <tr>
            <th>ID</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var item in ViewBag.listDetails)
    {
        <tr>
            <td>@item.ID</td>
        </tr>
    }
</table>

所以我想為此添加一個彈出式搜索並在不刷新頁面的情況下搜索結果，

此外，我在_Layout頁面中添加了彈出式搜索表單，如下所示

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

        <!-- Begin page -->
        <div id="wrapper">

            <div class="content-page">
               <div class="content">
                    <div class="container">
                        @RenderBody()
                    </div>
                </div> 
             </div>
       </div>


        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)              

            <form role="form" class="sss">
                <h3 class="panel-title text-dark text-center">Select Date Range</h3>
                <input type="text" id="startdate" name="startdate" class="inn">
                <input type="text" id="enddate" name="enddate" class="inn">
                <button id="btnSearch" type="button" class="ss">Search</button>                          
            </form>

</body>
</html>

<script type="text/javascript">

    $(document).ready(function () {
        $('#btnSearch').click(function () {
            alert("button clicked");
            $.ajax({
                type: "POST",
                url: "/Home/SearchbyDates",
                contentType: "application/json; charset=utf-8",
                data: { startdate : document.getElementById('startdate').value, enddate: document.getElementById('enddate').value, },
                dataType: "json",
                Success: function (response)
                {
                    alert("Success");
                    $('table tbody').html(response);

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

        });
    });
</script>

然后我添加了以下控制器操作來獲取搜索結果並在不刷新頁面的情況下顯示在相同的Dashboard視圖中

    public ActionResult Dashboard()
    {
       RepositoryClass sample= new RepositoryClass();
       ViewBag.listDetails = sample.GetDetails(null, null);
       return View();
    }

    [HttpPost]
    public ActionResult SearchbyDates(DateTime? startdate , DateTime? enddate)
    {
       RepositoryClass sample= new RepositoryClass();
       ViewBag.listDetails = sample.GetDetails(startdate, enddate);
       return Json(ViewBag.listDetails , JsonRequestBehavior.AllowGet);

    }

但是當我點擊btnSearch按鈕時，我可以看到我放在這里的警報，但是當我調試它時它沒有指向SearchbyDates方法。

我只能看到只有錯誤警報。 我的方法有什么問題

Answer 1

您的代碼有 2 個主要錯誤。

首先，您需要從 ajax 代碼中刪除contentType: "application/json; charset=utf-8", 。 或者，您可以使用data: JSON.stringify({ startdate : ... }),但無需對數據進行字符串化

其次，您的方法返回json ，因此為了更新視圖，成功回調中的代碼需要

success: function (response) {
    $('tbody').empty(); // should give the tbody element an id and use that as the selector
    $.each(response, function(index, item) {
        var row = $('<tr></tr>'); // create table row
        row.append($('<td></td>').text(item.ID)); // add table cell
        ... // append td elements for any other properties of your model
        $('tbody').append(row);
    })
}

或者，您可以返回表的部分視圖，在這種情況下，您需要將dataType: "json"更改為dataType: "html", ，並在成功回調中

success: function (response)
{
    $('.container').html(response); // suggest you use id="container" rather than class="container"
}

然后將控制器方法更改為

[HttpPost]
public ActionResult SearchbyDates(DateTime? startdate , DateTime? enddate)
{
    RepositoryClass sample = new RepositoryClass();
    ViewBag.listDetails = sample.GetDetails(startdate, enddate);
    retirn PartialView("Dashboard");
}

但是，我建議您將模型傳遞給您的視圖，而ViewBag在Dashboard()和SearchbyDates()方法中使用ViewBag

asp.net mvc _Layout 頁面中的 Ajax 搜索彈出窗口

問題描述

1 個解決方案

解決方案1
1 已采納

asp.net mvc _Layout 頁面中的 Ajax 搜索彈出窗口

問題描述

1 個解決方案

解決方案1 1 已采納

解決方案1
1 已采納