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()

来自asp.net mvc中_Layout页面的Ajax搜索弹出窗口

1 个答案: