Asp.NET MVC 4 Ajax Request Cancels on Submit

Question

Issue Is with Ajax Request Cancel
After i call the ProcessMessage from form submit i am having issue

Issue with submitting your page is canceling my ajax request, so I am getting error.. Please help me on this

View

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "formUpload", enctype = "multipart/form-data" }))
{
    <div>
        <b>Upload File</b>

        <input type="file" name="file" />
        <input type="submit" value="Upload File" name="btnUpload" onclick="progressStatus();"/><br />

    </div>

    <div>
        @ViewBag.Message
    </div>

    <div style="width: 30%; margin: 0 auto;">

        <div id="progressbar" style="width: 300px; height: 15px"></div>
        <br/>
    </div>

}
@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    function progressStatus() {

        var oReq = new XMLHttpRequest();
        oReq.open("get", "/Home/ProcessMessage", true);
        oReq.send();
        setInterval(showResult, 1000);

        function showResult() {
            var result = "";
            if (result !== oReq.responseText) {
                result = oReq.responseText;
                debugger;
                $("#progressbar").html(result);
            }
        }

        return false;
    }

</script>

Controller

    [HttpPost]
            public ActionResult Index(HttpPostedFileBase file)
            {
                if (file != null)
                {
                    var fname = Path.GetFileName(file.FileName);

                    var exis = Path.Combine(System.Web.HttpContext.Current.Server.MapPath("~/Storage/uploads"), fname);
                    if (System.IO.File.Exists(exis))
                    {
                        ViewData["Message"] = "The file " + fname + " has already exists";
                    }
                    else
                    {
                       try
                       {
                            if (file.ContentLength > 0)
                            {
                                var fileName = Path.GetFileName(file.FileName);
                                var folderPath = Server.MapPath("~/Storage/uploads");
                                fname = fileName;
                                var path = Path.Combine(folderPath, fileName);

                                var filebytes = new byte[file.ContentLength];

                                if (!Directory.Exists(folderPath))
                                    Directory.CreateDirectory(folderPath);

                                file.SaveAs(path);

                            }
                            ViewData["Message"] = "The file " + fname + " has uploaded successully";
                       }
                       catch (Exception e)
                       {
                            ViewData["Message"] = "The file " + fname + " Could not upload";
                          ViewData["Message"] = e.Message;
                        }
                    }
                }
                else
                    ViewData["Message"] = "Please choose file";
                    return View();
            }

public class ProgressiveResult : ActionResult
{
    public override void ExecuteResult(ControllerContext context)
    {
        for (int i = 0; i < 20; i++)
        {
            context.HttpContext.Response.Write(i.ToString());
            Thread.Sleep(2000);
            context.HttpContext.Response.Flush();
        }
        context.HttpContext.Response.End();
    }
}
and this is an action that returns this result:

public ActionResult ProcessMessage()
{
   return new ProgressiveResult();
}

Answer 1

You have to return false in click event handler to cancel submitting the form:

<input type="submit" value="Upload File" name="btnUpload" onclick="progressStatus(); return false;"/>