2010-11-13 5 views
0

Salut Je suis nouveau sur MVC et jQuery, j'ai suivi des exemples que j'ai trouvé en net mais j'ai coincé J'ai un élément img sur ma page pour que j'essaye d'ajouter via l'événement Click de jQuery, puis j'appelle l'action de mon contrôleur..net MVC2 jQuery ne peut invoquer l'action du contrôleur

Ma page

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server"> 
<h2>About</h2> 
<p> 
    Put content here. 
</p> 
<img id="img1" alt="some image" src="http://www.google.pl/logos/2010/stevenson10-hp.jpg" /> 

<script type="text/javascript" language="javascript"> 
    $("#img1").click(function (e) { 
     $.ajax({ 
      type: "POST", 
      url: "Home/CheckAge", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      async: true, 
      cache: false, 
      success: function (msg) { 
       alert("ok"); 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert(textStatus+" - "+errorThrown); 
      } 
     }); 
     return false; 
    });  
</script> 

événement

est ajouté, mais quand je clique sur l'image que je finis toujours sur la fonction d'erreur et alerte dit "erreur - non définie"

mon contrôleur ressemble à ceci

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     ViewData["Message"] = "Welcome to ASP.NET MVC!"; 
     return View(); 
    } 

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

    public static string Test() 
    { 
     string name = "aaa"; 
     return "Hello " + name; 
    } 

    [HttpPost] 
    public JsonResult CheckAge(String code) 
    { 
     return Json("abc"); 
    } 
} 

J'ai essayé beaucoup de combinaisons et beaucoup d'exemples mais le résultat est toujours le même N'importe quelle idée que je fais mal ?? J'utilise Visual Web Developer 2010 Express

Thx pour vos conseils

Répondre

3

Votre méthode CheckAge prend un paramètre:

[HttpPost] 
public JsonResult CheckAge(String code) 
{ 
    return Json("abc"); 
} 

Mais vous n'êtes pas passer un paramètre dans l'AJAX:

data: "{}", 

Vous devez également envelopper votre code de script dans un $(document).ready():

$(document).ready(function() { 
    $("#img1").click(function (e) { 
     $.ajax({ 
      type: "POST", 
      url: "Home/CheckAge", 
      data: {code: "theCode"}, 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      async: true, 
      cache: false, 
      success: function (msg) { 
       alert("ok"); 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert(textStatus+" - "+errorThrown); 
      } 
     }); 
     return false; 
    }); 
}); 
0

Vous définissez contentType = application/json en tant que demande, mais il n'y a rien sur le contrôleur pour le comprendre. Le classeur de modèle par défaut fonctionne uniquement avec les paramètres de chaîne de requête standard (application/form-url-encoded). Donc, vous pouvez essayer ceci:

$('#img1').click(function (e) { 
    $.ajax({ 
     type: 'POST', 
     url: '<%= Url.Action("CheckAge") %>', 
     data: { code: 'some code you want to send' }, 
     dataType: 'json', 
     cache: false, 
     success: function (msg) { 
      alert(msg.result); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert(textStatus+" - "+errorThrown); 
     } 
    }); 
    return false; 
}); 

Et l'action du contrôleur:

[HttpPost] 
public ActionResult CheckAge(string code) 
{ 
    return Json(new { result = "abc" }); 
} 

Remarquez que la contentType n'est plus utilisé, le hachage de données contient le paramètre de code qui sera envoyé à l'action du contrôleur et l'url n'est plus codée mais l'aide d'url est utilisée pour le calculer. L'action du contrôleur renvoie également JSON à l'aide d'un objet anonyme.

Questions connexes