Question

您好我想以示例解释我的问题。在我看来，我有2个字段FromDate，ToDate和一个按钮。如果我选择FromDate，ToDate并单击按钮意味着它想要根据下图中提到的日期选择在同一视图中显示数据。

我的视图模型（VisitorsViewModel）

    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 Value，并根据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);
});

Ajax在MVC4中无法正常工作？

1 个答案: