Einen einfachen Ajax-Aufruf an den Controller in asp.net mvc senden

109

Ich versuche, mit ASP.NET MVC Ajax-Aufrufen zu beginnen.

Regler:

public class AjaxTestController : Controller
{
    //
    // GET: /AjaxTest/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   
}

Aussicht:

<head runat="server">
    <title>FirstAjax</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var serviceURL = '/AjaxTest/FirstAjax';

            $.ajax({
                type: "POST",
                url: serviceURL,
                data: param = "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data, status) {     
                alert(data);
            }

            function errorFunc() {
                alert('error');
            }
        });
    </script>
</head>

Ich muss nur eine Warnung mit der Controller-Methode drucken, die Daten zurückgibt. Über dem Code drucken Sie einfach "Chamara" in meiner Ansicht. Ein Alarm wird nicht ausgelöst.

AKTUALISIEREN

Ich habe meinen Controller wie folgt geändert und er funktioniert. Ich habe keine klare Vorstellung, warum es jetzt funktioniert. Jemand bitte erklären. Der Parameter "a" hat nichts damit zu tun. Ich habe ihn hinzugefügt, weil ich nicht zwei Methoden mit demselben Methodennamen und denselben Parametern hinzufügen kann. Ich denke, dies ist möglicherweise nicht die Lösung, aber es funktioniert

public class AjaxTestController : Controller
    {
        //
        // GET: /AjaxTest/
        [HttpGet]
        public ActionResult FirstAjax()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FirstAjax(string a)
        {
            return Json("chamara", JsonRequestBehavior.AllowGet);
        }
    }
c# jquery asp.net asp.net-mvc asp.net-mvc-2 Chamara
quelle
Rückgabe eines json-formatierten Strings {"name":"chamara"}. dann versuchen zu lesen alsdata['name']
Raab
1
Entfernen Sie die zweite jQuery-Bibliothek aus der Ansicht. Ihr Code sollte so funktionieren, wie er ist. Ich denke, ein Skriptfehler könnte auftreten und verhindern, dass die Warnung angezeigt wird.
Terence

Antworten:

23

Nach dem Update, das Sie durchgeführt haben,

  1. Der erste Aufruf der FirstAjax-Aktion mit der Standard-HttpGet-Anforderung und das Rendern der leeren HTML-Ansicht. (Früher hatten Sie es nicht)
  2. Später beim Laden von DOM-Elementen dieser Ansicht wird Ihr Ajax-Aufruf ausgelöst und zeigt eine Warnung an.

Früher haben Sie JSON nur an den Browser zurückgegeben, ohne HTML zu rendern. Jetzt wird eine HTML-Ansicht gerendert, in der Ihre JSON-Daten abgerufen werden können.

Sie können JSON seine einfachen Daten nicht direkt rendern, nicht HTML.

asb
quelle
52

Entfernen Sie das Datenattribut, da Sie POSTINGnichts für den Server sind (Ihr Controller erwartet keine Parameter).

Und in Ihrer AJAX-Methode können Sie anstelle einer statischen Zeichenfolge Folgendes verwenden Razorund verwenden @Url.Action:

$.ajax({
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: successFunc,
    error: errorFunc
});

Aus Ihrem Update:

$.ajax({
    type: "POST",
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    data: { a: "testing" },
    dataType: "json",
    success: function() { alert('Success'); },
    error: errorFunc
});
Darren
quelle
3
@chamara - Entschuldigung, entfernen Sie HttpPost (Sie veröffentlichen nichts auf dem Server, es wäre also ein redundantes Attribut) und der Controller würde nicht getroffen. Entfernen Sie auch "type: POST" in der AJAX-Funktion, wie ich Sie gesät habe.
Darren
18

Verwenden Sie ein Rasiermesser, um Ihre URL dynamisch zu ändern, indem Sie Ihre Aktion wie folgt aufrufen:

$.ajax({
    type: "POST",
    url: '@Url.Action("ActionName", "ControllerName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});
gdmanandamohon
quelle
Die Parameter für Url.Action sind in dieser Antwort rückwärts, es ist Url.Action (actionName, controllerName)
xd6_
1
Kein Fan davon, es fördert die Kopplung von Ansicht und Javascript, aber ähm, Benutzername checkt aus?
Halter
@Halter UX verbessert sich massiv, wenn Sie den Benutzer nicht zwingen, bei jeder Aktion umzuleiten. Und auf der Clientseite passieren viele Dinge, die die Serverseite nicht interessieren sollten.
Kolob Canyon
@KolobCanyon du bist 100% korrekt. Mein Kommentar bezieht sich eher auf das Rendern der URL mit Rasiermesser im Javascript. Dadurch wird Ihr Javascript eng mit der Ansicht (dem cshtml) verbunden. Es ist eine gute Antwort, aber um die enge Kopplung zu beheben, könnten Sie die URL möglicherweise in ein Datenattribut im chstml ablegen und im Javascript lesen. Entschuldigung für die Verwirrung!
Halfter
5

Als erstes müssen nicht zwei verschiedene Versionen von JQuery-Bibliotheken auf einer Seite vorhanden sein. Entweder "1.9.1" oder "2.0.0" reichen aus, damit Ajax-Aufrufe funktionieren.

Hier ist Ihr Controller-Code:

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax(string a)
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

So sollte Ihre Ansicht aussehen:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var a = "Test";
    $.ajax({
        url: "../../Home/FirstAjax",
        type: "GET",
        data: { a : a },
        success: function (response) {
            alert(response);
        },
        error: function (response) {
            alert(response);
        }
    });
});
</script>
Lokesh_Ram
quelle
5

Wenn Sie in Ihrem Ajax-Aufruf nur die C # -Methode aktivieren müssen, müssen Sie nur zwei Materietypen und eine URL übergeben, wenn Ihre Anfrage eingeht. Dann müssen Sie nur die URL angeben. Bitte folgen Sie dem Code unten, es funktioniert gut.

C # -Code:

    [HttpGet]
    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

Java Script Code bei Get Request

    $.ajax({
        url: 'home/FirstAjax',
        success: function(responce){ alert(responce.data)},
        error: function(responce){ alert(responce.data)}
    });

Java Script Code bei Post Request und auch [HttpGet] an [HttpPost]

        $.ajax({
            url: 'home/FirstAjax',
            type:'POST',
            success: function(responce){ alert(responce)},
            error: function(responce){ alert(responce)}
        });

Hinweis: Wenn Sie FirstAjax in demselben Controller verwenden, in dem sich Ihr View Controller befindet, ist der Name des Controllers in der URL nicht erforderlich. mögenurl: 'FirstAjax',

Muhammad Asad
quelle
4

Es ist für Ihre UPDATE-Frage.

Da Sie nicht zwei Methoden mit demselben Namen und derselben Signatur haben können, müssen Sie das Attribut ActionName verwenden:

AKTUALISIEREN:

[HttpGet]
public ActionResult FirstAjax()
{
    Some Code--Some Code---Some Code
    return View();
}

[HttpPost]
[ActionName("FirstAjax")]
public ActionResult FirstAjaxPost()
{
    Some Code--Some Code---Some Code
    return View();
}

Weitere Informationen dazu, wie aus einer Methode eine Aktion wird, finden Sie unter diesem Link. Sehr gute Referenz.

RGR
quelle
1

Aussicht; 

 $.ajax({
        type: 'GET',
        cache: false,
        url: '/Login/Method',
        dataType: 'json',
        data: {  },
        error: function () {
        },
        success: function (result) {
            alert("success")
        }
    });

Controller-Methode;

 public JsonResult Method()
 {
   return Json(new JsonResult()
      {
         Data = "Result"
      }, JsonRequestBehavior.AllowGet);
 }
Oyenigun
quelle
0

statt zu url: serviceURL, benutzen

url: '<%= serviceURL%>',

und übergeben Sie 2 Parameter an successFunc?

function successFunc(data)
 {
   alert(data);
 }
Swapneel
quelle
0

Fügen Sie "JsonValueProviderFactory" in global.asax hinzu:

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}
Yashh
quelle
Was ist JsonValueProviderFactory?
Kiquenet