Prevent page reload on submit with @using Html.BeginForm asp.net MVC

Question

I have a page with model that i want to send to controller with additional files (files are not in model). So far i'm submitting everything OK but since i'm doing it in partial i want to send model and files to controller and stay on the same page. I would also like to get response to page if upload is successful so i can handle form elements. This is what i have:

View

    @model Test.Controllers.HomeController.MyClass
    @{
        ViewBag.Title = "Index";
    }

    @using (Html.BeginForm("Save", "Home", FormMethod.Post, new { role = "form", enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
        @Html.TextBoxFor(m=>m.Number)

        <input id="file" name="file" type="file" multiple>

        <button class="btn btn-primary center-block" id="saveButton">
            Save <span class="glyphicon glyphicon-ok" style="color: white;" type="submit"></span>
        </button>
    }

Controller

// GET: Home
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public virtual JsonResult Save (MyClass model, List<HttpPostedFileBase> file)
    {
        return Json(true);
    }

    public class MyClass
    {
        public int Number { get; set; }
    }

I want to get response (Json or something else) when save is complete so i can reload some data grids and such. If i try to send form with ajax (form.serialize) my files are always null. Any help is appreciated

Use AJAXBeginForm instead of BeginForm and use updatecontrol to update the Json data. — Bhasyakarulu Kottakota, Dec 13 '15 at 00:55
My files are not reaching controller if i use Ajax.BeginForm, everything else i have in model is fine tho. — azza idz, Dec 13 '15 at 01:03
The answer which I have added bellow, was able to upload the file on my machine. — Bhasyakarulu Kottakota, Dec 13 '15 at 01:17

Bhasyakarulu Kottakota · Answer 1 · 2015-12-13T11:31:49.600

Controller code:

public class EditorController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public virtual JsonResult Save(MyClass model)
    {
        var fileName = Request.Files[0].FileName;

        using (var memoryStream = new MemoryStream())
        {
            Request.Files[0].InputStream.CopyTo(memoryStream);                
            var fileContent = memoryStream.ToArray();
        }
        return Json(true);
    }

}

Class code:

    namespace _12_12_2015.Models
{
    public class MyClass
    {
        public int Number { get; set; }
    }
}

View code:

    @using _12_12_2015.Models
@model MyClass
@{
    ViewBag.Title = "Index";
}
@using (Html.BeginForm("Save", "Editor", FormMethod.Post, new { role = "form", enctype = "multipart/form-data"}))
{
    @Html.TextBoxFor(m => m.Number)
    <input id="file" name="file" type="file" multiple>
    <button class="btn btn-primary center-block" id="saveButton">
        Save <span class="glyphicon glyphicon-ok" style="color: white;" type="submit"></span>
    </button>
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $('form').submit(function (ev) {
        ev.preventDefault();
        var data = new FormData();
        var fileInput = $('#file')[0];
        var file = fileInput.files[0];
        data.append(file.name, file);
        var number = $("#Number").val();
        data.append("Number", number);
        $.ajax({
            url: '@Url.Action("Save", "Editor")',
            type: 'POST',
            data:  data,
            processData: false,
            contentType: false,
            success: function() {
                alert("bhasya")
            }
        });
    });
</script>

Page is still reloading and i'm getting null as file, can you post complete code? — azza idz, Dec 13 '15 at 01:31
I copy/pasted it, code is not reaching $('form123').submit(function() { since Html.BeginForm is going straight away to Editor > Save. Also why is url in ajax url: '@Url.Action("YourActionName", "YourControllerName")', — azza idz, Dec 13 '15 at 01:55
Please find the updated code in the controller to get the bytes. — Bhasyakarulu Kottakota, Dec 13 '15 at 11:31

score 0 · Answer 2 · answered Dec 13 '15 at 01:02

You should post it using Ajax. That would make your request asynchronous.

See an example below:

$.ajax ({
     url: 'controller/save',
     type: 'POST',
     success: function (result){
         if (result) {
             alert ('saved');
         }
     }
});

Prevent page reload on submit with @using Html.BeginForm asp.net MVC

2 Answers2