Question

我在我的视图中有这个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添加元素，而是使用新的整页重新加载页面，只包含部分视图的元素

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

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

有人可以帮助并说出将元素附加到div而不是加载新的整页有什么问题吗？

Answer 1

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

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

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

发布新页面而不是加载部分的Ajax请求

1 个答案: