jquery - ASP.NET MVC3 Jquery/Ajax 问题

Question

通过 ASP.NET MVC3，我使用 Jquery/Ajax 将数据从表单发布到 Controller 中的函数。我遇到的问题是，当我将此代码放入我的 Index View 中时，它工作正常，但是当我将相同的代码放入我的 CreatePost View 中时，我无法工作。我可以根据警报并通过在 Controller 中的功能上设置断点来判断其是否工作。

我的 Controller 称为 BlogController，该函数如下所示:(目前是一个虚拟函数)

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

我看来的代码如下所示:

<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

您的 BlogController 中可能有 Index 和 CreateEntry 操作，并且它可能是默认 Controller ？如果是这样，当您调用 CreatePost 操作时，您在浏览器中的网址将类似于

localhost/blog/CreatePost

当你调用 Index 操作时，你在浏览器中的网址就像

localhost/blog/

(因为您没有明确编写/index )。因此，在第一种情况下，javascript 代码中的相对 ajax URL

url: "blog/CreateEntry"

正在发布到

localhost/blog/blog/CreateEntry/

当第二个正在调用

时

localhost/blog/CreateEntry/

这就是它起作用的原因。因此，您需要在 Url.Content、VirtualPathUtility.ToAbsolute 等函数的帮助下，在 AJAX 调用中使用绝对 URL。经验法则:除非绝对必要，否则切勿使用相对 URL。