回发新页面而不是加载部分页面的 Ajax 请求答案

【问题标题】：Ajax Request that Post back a new page instead of loading partial回发新页面而不是加载部分页面的 Ajax 请求
【发布时间】：2014-02-16 00:52:59
【问题描述】：

我的视图中有这段 HTML 代码

@using (Ajax.BeginForm("AddJoke", "Home", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "MyfriendsJokes" , InsertionMode= InsertionMode.InsertAfter}))
{ 
    <div style="display:block">
        <textarea placeholder="Post New Joke" id="newJoke" name="joke" rows="3" cols="50" style="float:left;position"></textarea>
        <button type="submit" id="postnewjoke" style="float:left"> Post </button>

        @Html.TextBoxFor(model => model.fileContent, new { type = "file", id = "fileuploaded", name = "fileuploaded" })
        <div style="display:inline-block">
            <input type="checkbox" name="geo" id="geo" style="width: 100%; float: left; display: block">
            <input name="longitude" style="display:none"/>
            <input name="latitude" style="display:none" />
            <input name="user" style="display:none" value="@Model.user.Id"/>
            <span>Include Location</span>
        </div>
        <span id="jokeError" style="color:red;font-size:14px;"></span>
    </div>
}


<article id="MyfriendsJokes">
    @Html.Partial("_NewJoke")
</article>

这个代码在我的控制器中

       [HttpPost]
    public PartialViewResult AddJoke(string joke, string user, HomePage page,HttpPostedFileBase fileuploaded, string longitude, string latitude)
    {

        Joke newJ = new Joke();
        newJ.Key = Guid.NewGuid();
        newJ.body = joke;
        newJ.facebookID = user;
        newJ.rank = 0;
        newJ.time = DateTime.Now;
        newJ.longitude = longitude;
        newJ.latitude = latitude;
        db.Jokes.Add(newJ);
        HomePage page1 = new HomePage();
        page1.user = Session["user"] as MyAppUser;
        //db.SaveChanges();
        return PartialView("_NewJoke", page1);
    }

但不是将元素添加到目标 div，而是使用新的整个页面重新加载页面，其中仅包含部分视图的元素，即 this

@using Jokes.Models
@using Microsoft.AspNet.Mvc.Facebook.Models
@model HomePage

<div style="display:block">
    @Model.user.Name
</div>

有人可以帮忙说一下这里有什么问题将元素附加到 div 而不是加载新的整个页面吗？

【问题讨论】：

当我过去看到这个时，我错过了对 jquery.unobtrusive-ajax.js 的引用

标签： asp.net asp.net-mvc-4 razor asp.net-ajax partial-views

【解决方案1】：

确保您的页面中引用了jquery.unobtrusive-ajax.js 脚本。这就是 AJAX 化由 Ajax.* 助手生成的所有输出。如果没有这个脚本，你只会得到一个由Ajax.BeginForm 生成的标准<form> 元素和一堆data-* 属性。 jquery.unobtrusive-ajax.js 脚本分析那些data-* 属性并订阅表单的submit 事件，取消了进行完整回发并根据data-* 属性向服务器发送AJAX 请求的默认操作。

重要的是要提到这个脚本必须包含在 AFTER jquery.js 中，因为它依赖于它。

此外，您的表单中似乎有一些文件输入，并且您的控制器操作采用了HttpPostedFileBase 参数。您应该意识到您无法使用 AJAX 请求上传文件，并且一旦包含此脚本，您的文件上传将停止工作。为了能够使用 AJAX 上传文件，您可以使用一些插件，例如 jquery.form 和 Blueimp file upload，或者您可以直接使用现代浏览器中内置的新 XMLHttpRequest 对象。插件的优势在于它们可以进行特征检测，并且会根据客户端浏览器的功能回退到其他技术。

【讨论】：