Utiliser Ajax et JsonResult dans ASP.NET MVC 3

J'ai besoin d'obtenir de la chaîne de tableau ou de la liste avec l'ajax et de l'Action, c'est ma mise en Œuvre:

C'est mon Dom html de vue de l'action "Index" dans AccessMenuController:

<div class="RoleAccess">
   <select name="RoleDropDown">
    <option value="0">Select Role</option>
    <option value="61AD3FD9-C080-4BB1-8012-2A25309B0AAF">AdminRole</option>
    <option value="8A330699-57E1-4FDB-8C8E-99FFDE299AC5">Role2</option>
    <option value="004E39C2-4FFC-4353-A06E-30AC887619EF">Role3</option>
   </select>
</div>

Mon Contrôleur:

namespace MyProject.Areas.GlobalAccess.Controllers {

public class AccessMenuController : Controller {

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

    [HttpPost]
    public JsonResult RoleDropDownChanged(string roleId) {

     Guid RoleId = new Guid(roleId);

    //Some implement

    List<string> actions = new List<string>();
    for(int i = 0; i <= 10; i++) 
            actions.Add(i.ToString());

return Json(actions.ToArray(), JsonRequestBehavior.AllowGet);

   }
  }
}

et le script:

$(document).ready(function () {

//Handle Checks of Actions by RoleName Changed
$('div.RoleAccess select').change(function () {
    RoleChangeHandler();
});

function RoleChangeHandler() {

    $.ajax({
        url: '@Url.Action("RoleDropDownChanged")',
        type: 'POST',
        data: { 'roleId': '61AD3FD9-C080-4BB1-8012-2A25309B0AAF' },
        dataType: 'json',
        processData: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) { SuccessRoleChangeHandler(data); },
        error: OnFailRoleChangeHandler
    });
    return false;
}


function SuccessRoleChangeHandler(data) {

    alert("in success role change");

}

function OnFailRoleChangeHandler(result) {
    alert('in OnFailRoleChangeHandler');

}

Et le problème est avec tous les changements de la liste déroulante juste Onfail fonction de courir et de m'avertir "dans OnFailRoleChangeHandler", aussi j'ai vérifier le RoleDropDownChanged Action avec point d'arrêt et que jamais couru, où est le problème?

Mise à JOUR

lorsque je charge la page par google chrome il y a une erreur dans la fenêtre de la console:
http://MyProject/GlobalAccess/AccessMenu/@Url.Action(%22RoleDropDownChanged%22) 404 (Not Found) jquery-1.7.1.js:8102

Lorsque vous déboguez, est-ce que votre serveur méthode lève une exception? Avez-vous essayé de débogage du code javascript?
si vous avez ce @Url.Action(%22RoleDropDownChanged%22) que votre script n'est pas analysé par le Moteur de Rasoir. Si vous pouvez vous pourriez mettre le script à l'intérieur d'un rasoir vue et pas dans un autre .js-fichier.
- Je mettre à jour Question
Si votre script réside dans une .fichier js alors ce n'est pas d'aller travailler. Où est votre script déclaré?

OriginalL'auteur Saeid | 2012-03-29

  1. 6

    Supprimer ce paramètre:

    contentType: 'application/json; charset=utf-8',

    Vous n'êtes pas d'envoyer tout JSON pour le serveur.

    Si vous souhaitez conserver ce réglage, puis assurez-vous que vous envoyez un JSON valide pour votre serveur:

    data: JSON.stringify({ 'roleId': '61AD3FD9-C080-4BB1-8012-2A25309B0AAF' })

    Donc:

    $.ajax({
    url: '@Url.Action("RoleDropDownChanged")',
    type: 'POST',
    data: { 'roleId': '61AD3FD9-C080-4BB1-8012-2A25309B0AAF' },
    success: SuccessRoleChangeHandler,
    error: OnFailRoleChangeHandler
});

    devrait fonctionner (au moins pour moi) avec l'action suivante:

    [HttpPost]
public ActionResult RoleDropDownChanged(Guid roleId) 
{
    var actions = Enumerable.Range(1, 10).Select(x => x.ToString()).ToList();
    return Json(actions);
}

    Mise à JOUR:

    En fonction de vos commentaires, il semble que vous essayez d'utiliser côté serveur aides dans un autre javascript qui n'est pas possible. Voici ce que je vous suggère. Commencer par fournir l'url lors de la génération de votre liste déroulante:

    <div class="RoleAccess">
    @Html.DropDownListFor(
        x => x.RoleDropDown, 
        Model.Roles, 
        "-- Select role --",
        new { 
            data_url = Url.Action("RoleDropDownChanged") 
        }
   )
</div>

    et puis dans votre séparée fichier javascript:

    $(document).ready(function() {
    $('div.RoleAccess select').change(function () {
        var url = $(this).data('url');
        $.ajax({
            url: url,
            type: 'POST',
            data: { 'roleId': '61AD3FD9-C080-4BB1-8012-2A25309B0AAF' },
            success: function(result) {
                alert('success');
            },
            error: function() {
                alert('error');
            }
        });        
    });    
});

    et puis, bien sûr, vous pouvez remplacer l'codé en dur roleId avec la valeur actuellement sélectionnée:

    data: { 'roleId': $(this).val() }
    J'essaie à la fois de vos suggestions, il y a un même problème.
    Essayez de supprimer processData: false. Aussi voyez-vous des erreurs dans votre débogueur javascript? Quelle est l'exacte réponse du serveur à la requête AJAX?
    Je le fais, pas travaillé, même problème.
    Désolé, je n'arrive pas à reproduire votre problème. J'ai testé le code que j'ai montré et il a bien fonctionné pour moi. Quel est le serveur répond à la requête AJAX? Regardez votre js outil de débogage.
    Merci pour la réponse, lorsque je charge la page par google chrome il y a une erreur dans la fenêtre de console: http://MyProject/GlobalAccess/AccessMenu/@Url.Action(%22RoleDropDownChanged%22) 404 (Not Found)

    OriginalL'auteur Darin Dimitrov

  2. 2

    Déplacer votre $(document).ready fonction de votre point de Vue comme ceci:

    <script type="text/javascript">
$(document).ready(function () {

    //Handle Checks of Actions by RoleName Changed
    $('div.RoleAccess select').change(function () {
        RoleChangeHandler('@Url.Action("RoleDropDownChanged")');
   });
});
</script>

    Ensuite dans votre fichier JS ajouter une url en paramètre à la fonction appel ajax:

    function RoleChangeHandler(pageUrl) {

    $.ajax({
        url: pageUrl,
        type: 'POST',
        data: { 'roleId': '61AD3FD9-C080-4BB1-8012-2A25309B0AAF' },
        dataType: 'json',
        processData: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) { SuccessRoleChangeHandler(data); },
        error: OnFailRoleChangeHandler
    });
    return false;
}

    Cela devrait fonctionner comme prévu.

    Merci, cela a fonctionné pour moi.

    OriginalL'auteur Kosta

  3. 1

    Si votre script réside dans une .Fichier JS alors ce n'est pas d'aller travailler comme ça va être traités comme du texte brut. Vous pouvez déplacer l'intégralité du script à la vue ou vous pouvez re-facteur de script, de sorte que la majorité de l'script reste dans le .JS et vous passez ensuite les valeurs de la vue.

    OriginalL'auteur