Ajax在MVC4中无法正常工作？

Question

Hi i like to explain my issue with example. I have 2 fields FromDate ,ToDate and one button in my view. if i select the FromDate ,ToDate and click the button means it want to display the data in the same view based on Date Selection which is mentioned in the below image.

My main View

My View Model (VisitorsViewModel)

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

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

My Controller

   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);
    }

Here i got the From Date and To Date Value and list the data using query as per FromDate and ToDate Criteria and passed to partial view

MY partial view Coding

 @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>
 }

My View

  @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" />

My j query code

 <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);
            }
          });
       });

Now it pass the date to controller and it calculate the list from partial view as per that criteria . Up to this it is working fine but it wont displaying the data. see the below image . it getting the data and it is visible in network . But it not displaying the data. it showing fail to retrieve alert box.

Wrong output

Please any one tell me the solution to resolve this issue . I tried my level best to explain my issue .please any one understand and give me the solution.please any one check my j query success function code.

Answer 1

You are returning html not json . Change this line:

dataType: "json"

to

dataType: "html",

Also this is deprecated way of doing ajax in jQuery. Try this:

$.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);
});