Faire un simple appel Ajax au contrôleur dans asp.net mvc
J'essaie de commencer avec ASP.NET appels MVC Ajax.
Contrôleur:
public class AjaxTestController : Controller
{
//
// GET: /AjaxTest/
public ActionResult Index()
{
return View();
}
public ActionResult FirstAjax()
{
return Json("chamara", JsonRequestBehavior.AllowGet);
}
}
Vue:
<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>
J'ai juste besoin d'imprimer une alerte avec la méthode du contrôleur renvoyant des données. Code ci-dessus juste imprimer "chamara" sur mon point de vue. Une Alerte ne tire pas.
Mise à jour
J'ai modifié mon contrôleur comme ci-dessous et il commence à fonctionner. Je n'ai pas une idée claire pourquoi ça marche maintenant. Quelques un s'il vous plaît expliquer. Le paramètre " a " ne concerne pas i ajouté parce que je ne peux pas ajouter deux méthodes avec le même nom de méthode et les paramètres.Je pense que ce n'est peut-être pas la solution mais son fonctionnement
public class AjaxTestController : Controller
{
//
// GET: /AjaxTest/
[HttpGet]
public ActionResult FirstAjax()
{
return View();
}
[HttpPost]
public ActionResult FirstAjax(string a)
{
return Json("chamara", JsonRequestBehavior.AllowGet);
}
}
9 réponses
Après la mise à jour que vous avez effectuée,
- son premier appel de L'action FirstAjax avec la requête HttpGet par défaut et rend la vue HTML vide . (Plus tôt vous ne l'aviez pas)
- plus tard, lors du chargement des éléments DOM de cette vue, votre appel Ajax est déclenché et affiche une alerte.
Plus tôt, vous ne retourniez JSON au navigateur sans rendre de HTML. Maintenant, il a une vue HTML rendue où il peut obtenir vos données JSON.
Vous ne pouvez pas rendre directement JSON its données simples Pas HTML.
Supprimez l'attribut data car vous n'êtes rien POSTING
au serveur (votre contrôleur n'attend aucun paramètre).
Et dans votre méthode AJAX, vous pouvez utiliser Razor
et utiliser @Url.Action
plutôt qu'une chaîne statique:
$.ajax({
url: '@Url.Action("FirstAjax", "AjaxTest")',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
De votre mise à jour:
$.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
});
Utilisez un rasoir pour changer dynamiquement votre URL en appelant votre action comme ceci:
$.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'); }
});
C'est pour votre question de mise à jour.
Comme vous ne pouvez pas avoir deux méthodes avec le même nom et la même signature, vous devez utiliser L'attribut ActionName:
Mise à jour:
[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();
}
Et veuillez vous référer à ce lien pour plus de référence sur la façon dont une méthode devient une action. Très bonne référence cependant.
Première chose il n'est pas nécessaire d'avoir deux versions différentes des bibliothèques jquery dans une page, soit "1.9.1" ou "2.0.0" est suffisant pour faire fonctionner les appels ajax..
Voici votre code de contrôleur:
public ActionResult Index()
{
return View();
}
public ActionResult FirstAjax(string a)
{
return Json("chamara", JsonRequestBehavior.AllowGet);
}
Voici comment votre vue devrait ressembler:
<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>
Si vous avez juste besoin d'appuyer sur la méthode C# dans votre appel Ajax, il vous suffit de passer deux types de matière et url si votre requête est get, il vous suffit de spécifier l'url uniquement. veuillez suivre le code ci-dessous, il fonctionne bien.
C# Code
[HttpGet]
public ActionResult FirstAjax()
{
return Json("chamara", JsonRequestBehavior.AllowGet);
}
Java Script Code if Get Request
$.ajax({
url: 'home/FirstAjax',
success: function(responce){ alert(responce.data)},
error: function(responce){ alert(responce.data)}
});
Java Script Code if Post Request and also [HttpGet] to [HttpPost]
$.ajax({
url: 'home/FirstAjax',
type:'POST',
success: function(responce){ alert(responce)},
error: function(responce){ alert(responce)}
});
Note: Si vous FirstAjax dans le même contrôleur dans lequel votre contrôleur de vue alors pas besoin de nom de contrôleur dans l'url. comme url: 'FirstAjax',
Vue;
$.ajax({
type: 'GET',
cache: false,
url: '/Login/Method',
dataType: 'json',
data: { },
error: function () {
},
success: function (result) {
alert("success")
}
});
Méthode Du Contrôleur;
public JsonResult Method()
{
return Json(new JsonResult()
{
Data = "Result"
}, JsonRequestBehavior.AllowGet);
}
Au Lieu de url: serviceURL,
utiliser
url: '<%= serviceURL%>',
Et passez-vous 2 paramètres à successFunc?
function successFunc(data)
{
alert(data);
}
Ajoutez "JsonValueProviderFactory" dans global.asax:
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}