Ajax 在 MVC4 中不能正常工作？

Question

您好，我想用示例来解释我的问题。我的视图中有 2 个字段 FromDate 、ToDate 和一个按钮。如果我选择 FromDate ,ToDate 并单击按钮，则表示它希望根据下图中提到的日期选择在同一视图中显示数据。

My main View

我的视图模型（VisitorViewModel）

    public DateTime  ? FromDate { get; set; }
    public DateTime  ? ToDate { get; set; }

    public ICollection<View_VisitorsForm> Visits { get; set; }

我的控制器

   public ActionResult DailyVisitReport()
  {
     return View();
  } 
  public ActionResult GetDatesfromFromDateToDate(string fromDate, string toDate)
    {
        DateTime fromdt = Convert.ToDateTime(fromDate);
        DateTime todt = Convert.ToDateTime(toDate);
        List<View_VisitorsForm> VisitCount = (from v in db.View_VisitorsForm
                                         where v.VisitingDate >= fromdt && v.VisitingDate <= todt
                                         select v).ToList();

        VisitorsViewModel visitotsVM = new VisitorsViewModel();
        visitotsVM.Visits= VisitCount;
        return PartialView("_Visitors", visitotsVM);
    }

在这里，我得到了 From Date 和 To Date 值，并根据 FromDate 和 ToDate Criteria 使用查询列出数据并传递给部分视图

我的局部视图编码

 @model Sample_Customer.Models.VisitorsViewModel
 @foreach (var item in Model.Visits)
 {
    <tr>
    <td>@Html.DisplayFor(m => item.VisitingDate)</td>
    <td>@Html.DisplayFor(m=>item.Employee)</td>
    <td>@Html.DisplayFor(m=>item.CustomerName)</td>
    <td>@Html.DisplayFor(m=>item.POVisit)</td>
    <td>@Html.DisplayFor(m=>item.ContactPerson)</td>
    <td>@Html.DisplayFor(m=>item.Description)</td>
    <td>@Html.DisplayFor(m=>item.NextAppointment)</td>

     </tr>
 }

我的观点

  @Html.LabelFor(model => model.FromDate)
  @Html.TextBoxFor(model => model.FromDate, new { @class = "form-control", type = "text" })
  @Html.LabelFor(model => model.ToDate)
  @Html.TextBoxFor(model => model.ToDate, new { @class = "form-control", type = "text" }) 
  <input id="Button1" type="button" value="Ok" />

我的j查询代码

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

   <script type="text/javascript">
    $(function () {
    $("#FromDate").datepicker({
        dateFormat: "dd/mm/yy",
        changeMonth: true,
        changeYear: true,
    });
    $("#ToDate").datepicker({
        dateFormat: "dd/mm/yy",
        changeMonth: true,
        changeYear: true,
    });
    });
  </script>


  $('#Button1').click(function () {
    debugger;
    alert("hhh");
    $.ajax(
        '@Url.Action("GetDatesfromFromDateToDate", "Report")', {
            type: "GET",
            dataType: "json",
            async: false,
            data: {
                fromDate: $("#FromDate").val(), toDate: $("#ToDate").val()
            },
            error: function (ex) {
                alert('Failed to retrieve Email.' + ex);
            },
            beforeSend: function () {
            },
            success: function (data) {

                var div = $("#visitors");
                div.empty();
                div.html(data);
            }
          });
       });

现在它将日期传递给控制器​​，并根据该条件从部分视图中计算列表。到目前为止，它工作正常，但不会显示数据。见下图。它获取数据并且在网络中可见。但它不显示数据。它显示无法检索警报框。

Wrong output

请任何人告诉我解决此问题的解决方案。我已尽我所能解释我的问题。请任何人理解并给我解决方案。请任何人检查我的j查询成功功能代码。

Answer 1

您返回的是 html 而不是 json。更改此行：

dataType: "json"

到

dataType: "html",

这也是在 jQuery 中不推荐使用 ajax 的方式。试试这个：

$.ajax({ cache: false,
    url: '@Url.Action("GetDatesfromFromDateToDate", "Report")',
    type: "GET",
    dataType: "html",
    async: false,
    data: {
        fromDate: $("#FromDate").val(), toDate: $("#ToDate").val()
    },
}).done(function (data) {
    var div = $("#visitors");
    div.empty();
    div.html(data);
}).fail(function (jqXHR, textStatus) {
    alert(textStatus);
});