ASP.NET MVC3 Jquery/Ajax 问题答案

【问题标题】：ASP.NET MVC3 Jquery/Ajax ProblemASP.NET MVC3 Jquery/Ajax 问题
【发布时间】：2011-04-28 14:07:02
【问题描述】：

在 ASP.NET MVC3 中，我使用 Jquery/Ajax 将数据从表单发布到控制器中的函数。我遇到的问题是，当我将此代码放入我的索引视图时它工作正常，但是当我将相同的代码放入我的 CreatePost 视图时我不起作用。我可以根据警报并通过在控制器中的功能上设置断点来判断它的工作与否。

我的控制器被称为 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>

【问题讨论】：

CreatePost 长什么样子？
您是否在控制台中遇到任何错误？回应是什么？
Index 和 Create Post 是相同的，因为它们都包含 javascript 和相同的表单。
Daniel 可能是您的问题的根源：CreateEntry != CreatePost。您的 Global.asax 中的路线是否正确？
我发现了问题。罗里检查控制台是对的。我有一段时间没有使用 firebug，只是使用脚本选项卡没有任何成功。问题是javascript应该在CreatePost视图上调用“CreateEntry”而不是“blog/CreateEntry”结果是Blog/blog/CreateEntry这是错误的。

标签： jquery asp.net ajax asp.net-mvc-3

【解决方案1】：

您的 BlogController 中可能有 Action Index 和 CreateEntry，它可能是默认控制器？如果是这样，当您调用 CreatePost 操作时，您在浏览器中的 url 就像

localhost/blog/CreatePost

当您调用 Index 操作时，您在浏览器中的 url 就像

本地主机/博客/

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

网址：“博客/CreateEntry”

正在发帖

localhost/blog/blog/CreateEntry/

当第二个正在呼叫时

localhost/blog/CreateEntry/

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

【讨论】：