Problème de Jquery/Ajax en ASP.NET MVC3

Question

Avec ASP.NET MVC3, j'utilise Jquery/Ajax pour envoyer des données d'un formulaire à une fonction dans mon contrôleur. Le problème que je rencontre est que lorsque je mets ce code dans ma vue Index, il fonctionne bien, mais lorsque je mets le même code dans ma vue CreatePost, il ne fonctionne pas. Je peux savoir si cela fonctionne ou non en me basant sur l'alerte et en définissant un point d'arrêt sur la fonction dans le contrôleur.

Mon contrôleur s'appelle BlogController et voici à quoi ressemble la fonction : (il s'agit d'une fonction factice pour l'instant)

    [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult CreateEntry(string title, string body)
    {
        return Json(false);
    }

Selon moi, le code se présente comme suit :

<script type="text/javascript">
$(function () {
    $(".error").hide();

});

function SubmitEntryPostForm() {
    var blogEntry = {
        'title': $('#EntryTitle').val(),
        'body': $('#EntryBody').val()
    };
    $.ajax({
        type: "POST",
        url: "blog/CreateEntry",
        data: blogEntry,
        success: function () {
            alert("it worked");
        }

    });
    return false;
}

function ValidateCreateEntry() {
    $(".error").hide();
    var title = $("#EntryTitle").val();
    if (title == "") {
        $("#title_error").show();
        $("#EntryTitle").focus();
        return false;
    }
    var body = $("#EntryBody").val();
    if (body == "") {
        $("#body_error").show();
        $("#BodyTitle").focus();
        return false;
    }
    return SubmitEntryPostForm();
}

<div id="CreateEntry">
<form action="">
    <fieldset>
        <label for="title" id="title_label">Title</label>
        <input type="text" name="title" id="EntryTitle" size="30" />
        <label class="error" for="title" id="title_error">This field is required.</label>
        <br />
        <label for="body" id="body_label">Content</label>
        <input type="text" name="body" id="EntryBody" size="30" />
        <label class="error" for="boby" id="body_error">This field is required.</label>
        <br />
        <input type="submit" name="submit" class="button" id="CreateEntryButton" value="Send" onclick="return ValidateCreateEntry();" />
    </fieldset>
</form>

Answer 1

Vous avez probablement des actions Index et CreateEntry dans votre BlogController, et c'est probablement le contrôleur par défaut ? Si c'est le cas, lorsque vous appelez l'action CreatePost, votre url dans le navigateur ressemble à

localhost/blog/CreatePost

et lorsque vous appelez l'action Index, votre url dans le navigateur est la suivante

localhost/blog/

(puisque vous n'écrivez pas explicitement /index). Donc, dans le premier cas, l'URL ajax relative dans le code javascript

url : "blog/CreateEntry"

est affiché à l'adresse

localhost/blog/blog/CreateEntry/

tandis que le second appelle à

localhost/blog/CreateEntry/

et c'est pourquoi cela fonctionne. Vous devez donc utiliser des URL absolues dans vos appels AJAX avec l'aide d'une fonction comme Url.Content, VirtualPathUtility.ToAbsolute, etc. Règle générale : ne jamais utiliser d'URL relatifs, sauf en cas d'absolue nécessité .