Ajax funktioniert nicht richtig in MVC4?

Question

Hallo, ich möchte mein Problem mit einem Beispiel erklären. Ich habe 2 Felder FromDate, ToDate und eine Schaltfläche aus meiner Sicht. Wenn ich FromDate auswähle, ToDate und klicke auf die Schaltfläche, bedeutet das, dass die Daten in derselben Ansicht angezeigt werden sollen, basierend auf der Datumsauswahl, die in der folgenden Abbildung erwähnt wird.

My main View

My View Model (VisitorsViewModel)

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

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

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

Hier bekam ich die Von-Datum und Wert bis Datum und die Liste der Daten unter Verwendung von Abfrage nach FromDate und ToDate Criteria und an partial übergeben Ansicht

MY Teilansicht 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" /> 

Mein j Abfragecode

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

Jetzt übergibt es das Datum an den Controller und berechnet die Liste aus der Teilansicht gemäß diesen Kriterien. Bis jetzt funktioniert es gut, aber es zeigt die Daten nicht an. Siehe das Bild unten. es erhält die Daten und es ist im Netzwerk sichtbar. Aber es zeigt die Daten nicht an. Es zeigt keine Alarmbox an.

Wrong output

Bitte irgendein die Lösung sagen Sie mir, dieses Problem zu lösen. Ich versuchte mein Niveau am besten, um mein Problem zu erklären. Bitte irgendjemanden verstehen und mir die Lösung geben. Bitte irgendjemanden, der meinen j Frage Erfolg Funktionscode überprüft.

Answer 1

Sie geben html nicht json zurück. Ändern Sie diese Zeile:

dataType: "json" 

zu

dataType: "html", 

Auch dies ist deprecated Weg von ajax in jQuery zu tun. Versuchen Sie folgendes:

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