Funktion kann nicht mit Ajax aufgerufen werden

Question

Ich versuche, eine Funktion mit Ajax aufrufen, aber es reagiert nicht. Hier

ist der Code:

<p id="myElem" class="alert-danger" style="display:none"></p> 

<button title="Remove" data-id="@item.Book.Book_id" class="Remove btn btn-group-sm red" style="float:initial">Remove</button> 

<script type="text/javascript"> 
    $('.Remove').click(function() { 

     var myId = $(this).data('id'); 

     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("Remove", "ReadingNow")?Book_id=' + myId, 
      success: function (response) { 
       $('#myElem').html(response).fadeIn('slow'); 
       $('#myElem').delay(8000).fadeOut('slow'); 
      }, 
      failure: function (response) { 

       alert("Failure"); 
      } 
     }); 
    }); 
    </script> 

und hier ist die Funktion:

public class ReadingNowController : Controller 
{ 
[HttpGet] 
    public ActionResult Remove(int? Book_id) 
    { 
     if (User.Identity.IsAuthenticated) 
     { 
      var x = User.Identity.GetUserId(); 
      var IsExists = db.ReadingNow.Where(t => t.Book_Id == Book_id && t.User_Id == x).FirstOrDefault(); 

      if (IsExists != null) 
      { 

       db.ReadingNow.Remove(IsExists); 
       int state = db.SaveChanges(); 
       if (state == 1) 
       { 
        return Content("Book Removed From Your Reading Now List !"); 

       } 
      }     

     } 
     return Content("Error !"); 

    } 
} 

Hinweis: Als ich versuchte, es zu nennen direkt funktioniert es, aber wenn Ajax verwendet habe ich gefunden. .. Wie kann ich dieses Problem lösen?

Answer 1

Stellen Sie sicher, dass jQuery

Erstens funktioniert, sicherzustellen, dass Ihre jQuery-Code richtig funktioniert und referenziert wird. Sie werden einen Verweis auf die Bibliothek vor dem Aufruf von beliebigen-jQuery bezogenen Code enthalten müssen:

<!-- Example Reference --> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
<script> 
    $(function(){ 
      // Place your code here 
    }); 
</script> 

Wenn Sie eine GET ...

Sie angeben ausführen möchten in Ihrem ajax() rufen Sie an, dass Sie eine POST Anfrage über das Attribut type machen, aber Ihre Controller-Aktion erwartet explizit eine GET über das Attribut [HttpGet] schmücken Ihre Aktion.

Sie können dieses Problem lösen, indem Sie Ihre type Attribut POST-GET zu wechseln (oder man könnte es vollständig zu entfernen, da GET ist die Standardeinstellung):

type: "GET", 

Wenn Sie eine POST ausführen möchten ...

Wenn Sie eine POST tatsächlich ausführen möchten, behalten Sie einfach Ihren vorhandenen Code und verwenden Sie stattdessen das [HttpPost] Attribut:

[HttpPost] 
public ActionResult Remove(int? Book_id) 
{ 
    // Code omitted for brevity 
} 

Answer 2

i was das Problem in dieser Linie ist:

url: '@ Url.Action ("Entfernen", "ReadingNow") Book_id =' + myid

Verwenden Sie nicht @ Url.Action, die nicht die aktuelle Syntax ist, um Rasierer in JS zu verwenden (Sie müssen das Pseudo-Element verwenden), schreiben Sie einfach die URL ["/ ReadingNow/Remove? Book_id =" + id]. Auf diese Weise wissen Sie genau, wohin die Anfrage gehen wird und es ist einfacher zu lesen.

Answer 3

Sie können auch die Controller über Ajax aufrufen, indem Sie Parameter übergeben (n) wie folgt:

<script type="text/javascript"> 
$('.Remove').click(function() { 
    $.ajax({ 
     url: '@Url.Action("Remove", "ReadingNow")', 
     data: { myId: $(this).data('id') /* add other additional parameters */ }, 
     cache: false, 
     type: "POST", 
     success: function (response) { 
      $('#myElem').html(response).fadeIn('slow'); 
      $('#myElem').delay(8000).fadeOut('slow'); 
     }, 
     failure: function (response) { 
      alert("Failure"); 
     } 
    }); 
}); 
</script>