javascript jquery ajax confirm ajax.beginform

Why Ajax.BeginForm is not working properly

im trying to add a form on my site, so when the users click the button , it should apper a little message down there as a loadingElementId. Also Confirm is not working and i have no idea why. I'm using Chrome Browser.

Here's the code:

@model HaveYouSeenMe.Models.MessageModel

@{
    ViewBag.Title = "Send";
}

<div id="messageForm">

    <h2>Send Message</h2>

    @using (Ajax.BeginForm(new AjaxOptions
    {
        Confirm = "Are you sure?",
        HttpMethod = "Post",
        InsertionMode = InsertionMode.Replace,
        LoadingElementId = "loading",
        UpdateTargetId = "messageForm"
    }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

        <fieldset>
            <legend>Message Model</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" value="Send Message" />
            </p>
        </fieldset>
    }
</div>

<div id="loading" style="display: none">
    Sending message...
</div>

@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
}

Solution

Here is how you do it:

Controller:

public class MessageModel
{
    public string From { get; set; }
    public string Email { get; set; }
    public string Subject { get; set; }
    public string Message { get; set; }
}

public class HomeController : Controller
{
    [HttpPost]
    public string ProcessForm(MessageModel messageModel)
    {
        Thread.Sleep(15000);
        return "<h2>Customer updated successfully!</h2>";
    }

    public ActionResult Index20()
    {
        MessageModel messageModel = new MessageModel { Email = "email", From = "from", Message = "message", Subject = "subject" };
        return View(messageModel);
    }

View:

@model Testy20161006.Controllers.MessageModel

@{
    ViewBag.Title = "Send";
}

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index20</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
        function OnBegin() {
            $("#divMsg").append("<h3>Beginning Ajax request.</h3>");
        }
        function OnComplete() {
            $("#divMsg").append("<h3>Completing Ajax request.</h3>");
        }
        function OnSuccess() {
            $("#divMsg").append("<h3>Ajax request successful.</h3>");
        }
        function OnFailure() {
            $("#divMsg").append("<h3>Ajax request failed.</h3>");
        }
        $(function () {


            $("#divProgress").css("display","none");
        })
    </script>
</head>
<body>
    <div id="messageForm">

        <h2>Send Message</h2>

        @{AjaxOptions options = new AjaxOptions();
          options.HttpMethod = "POST";
          options.Confirm = "Do you wish to submit this form?";
          options.OnBegin = "OnBegin";
          options.OnComplete = "OnComplete";
          options.OnFailure = "OnFailure";
          options.OnSuccess = "OnSuccess";
          options.LoadingElementId = "divProgress";
          options.LoadingElementDuration = 1000;
          options.UpdateTargetId = "divResponse";
          options.InsertionMode = InsertionMode.InsertAfter;

          }

        @using (Ajax.BeginForm("ProcessForm", "Home", options))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

            <fieldset>
                <legend>Message Model</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" value="Send Message" />
                </p>
            </fieldset>
        }
    </div>

    <br />
    <br />
    <div id="divProgress">
        @*<img src='<%= Url.Content("~/images/ProgressCircle.gif") %>' />*@
        <img  src="~/Images/untitled.png"  />
    </div>
    <div id="divResponse"></div>
    <div id="divMsg"></div>

    @*<img id="loading" src="~/Images/untitled.png" style="display: none" />*@
</body>
</html>

Credit goes to http://www.codeguru.com/csharp/.net/working-with-ajax-helper-in-asp.net-mvc.htm