Ajax not working on MVC View, page still does a post back or goes to next view

See more:

C#

MVC

Hi,

I have the following piece of code, I have added some ajax so that post back do not occur and when loading an image to screen it should display in a partial view on the same page. Instead on the submit button it takes me to the next view and when I click view image it takes me to the view image view instead of showing the image in a partial view on the same page.

Any help will appreciated.

View:

@model HaveYouSeenMe.Models.Business.MessageModel
@{
    ViewBag.Title = "Send Message";
}
<div id="messageForm">
    <h2>Send Message</h2>
    @using (Ajax.BeginForm(new AjaxOptions
{
    Confirm = "Are you sure you want to send this message?",
    HttpMethod = "Post",
    InsertionMode = InsertionMode.Replace,
    LoadingElementId = "loading",
    UpdateTargetId = "messageForm"
}))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <fieldset>
                <legend>MessageModel</legend>
                <div class="editor-label">
                    @Html.LabelFor(model => model.From)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.From)
                    @Html.ValidationMessageFor(model => model.From)
                </div>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Email)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Email)
                    @Html.ValidationMessageFor(model => model.Email)
                </div>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Subject)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Subject)
                    @Html.ValidationMessageFor(model => model.Subject)
                </div>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Message)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Message)
                    @Html.ValidationMessageFor(model => model.Message)
                </div>
                <p>
                    <input type="submit" id="submitButton" value="Send Message" />
                </p>
            </fieldset>
        }
</div>
<div id="loading" style="display:none">
    Sending Message...
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Controller:

[HttpPost]
public ActionResult Send(MessageModel model)
{
    if(string.IsNullOrEmpty(model.From))
    {
        ModelState.AddModelError("From", "The From Field Is Required.");
    }
    if(string.IsNullOrEmpty(model.Subject))
    {
        ModelState.AddModelError("Subject", "The Subject Field Is Required.");
    }
    if(string.IsNullOrEmpty(model.Email))
    {
        ModelState.AddModelError("Email", "The Email Field Is Required.");
    }
    if(string.IsNullOrEmpty(model.Message))
    {
        ModelState.AddModelError("Message", "A Message Must Be Typed.");
    }
    if (ModelState.IsValid)
    {
        return RedirectToAction("ThankYou");
    }
    ModelState.AddModelError("", "Some Errors Occured.");
    return View(model);
}
public PartialViewResult ThankYou()
{
    return PartialView();
}