Ajax Request that Post back a new page instead of loading partial

Question

I have this HTML code in my view

@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>

and this code in my controller

       [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);
    }

but instead of adding elements to the targeted div, it reload the page with a new whole page with just the elements of the partial view which is this

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

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

can someone help and say what's wrong here to append elements to div instead of loading a new whole page?

Answer 1

Make sure that the jquery.unobtrusive-ajax.js script is referenced in your page. This is what AJAXifies all the output generated by the Ajax.* helpers. Without this script you only get a standard <form> element generated by the Ajax.BeginForm with a bunch of data-* attributes. The jquery.unobtrusive-ajax.js script analyzes those data-* attributes and subscribes to the submit event of the form, canceling the default action of making a full postback and sending an AJAX request to the server based on the data-* attributes.

It's important to mention that this script must be included AFTER jquery.js because it depends on it.

Also you seem to have some file input in your form and your controller action is taking an HttpPostedFileBase parameter. You should realize that you cannot upload files using an AJAX request and once you include this script your file uploads will simply stop working. In order to be able to upload files using AJAX you could either use some plugin such as jquery.form and Blueimp file upload or you could directly use the new XMLHttpRequest object that's built into modern browsers. The advantage of the plugins is that they do feature detection and will fallback to other techniques depending on the capabilities of the client browsers.