MVC 5 Html.BeginForm using JQuery ajaxForm with data and fileupload, returns a new page. When it should replace

Question

I want to post a Html.BeginForm with data and a file and replace the content with the new data. I have done it with only data.

JQuery with success but only with data.

 $('form').submit(function () {
    if ($(this).valid()) {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                // Element is a div.
                $(element).html(result);
            }
        });
    }
    return false;
});

I have been tryin for 8 hours now and came up with this. But it redirects me to a new page, when it should update the div. Everything else work as it should. Like upload the file and data. It just redirect me to a new page. And i am going crazy.

I use unobtrusive and validate.min. I can validate the form and get it to update "WHITOUT THE FILEUPLOAD"

My Approach after 8 hours...

ParticalView

@using Website.Models
@model MySuperModel
@if (Model != null)
{      
    using (Html.BeginForm("Action", "Controller", null, FormMethod.Post, new { enctype = "multipart/form-data", id = "helpme", @class = "please" }))
    {
        @Html.AntiForgeryToken()
        // Some code..
    }
}

Controller

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Action(MySuperModel Model, HttpPostedFileBase file)
{           
        // Some file validation

        if (ModelState.IsValid)
        {
            // Updating the database and sets Model to its new values.                    
        }

    return PartialView("Action", Model);
}

Also tried

return View(Model);
return ParticalView(Model);
return ParticalView("~/Views/SecretService/Action.cshtml", Model);

JQuery

$('form').submit(function () {
    if ($(this).valid()) {
        $(this).ajaxForm({
            beforeSend: function () {
                // Doing some loading gif stuff
            },
            success: function (result) {
                // element is div holding the ParticalView
                $(element).html(result);
            },
            complete: function () {
                $.validator.unobtrusive.parse('form');
                // And so on.
            }
        });

    }
    return false;
});

I have cuttet the code down abit to make it more readable. I hope someone can help.

If your wanting to submit a for and files using ajax, refer this answer — user3559349
– user3559349, Commented Aug 23, 2015 at 0:58
Thanks for replying. is it possible to do it with Html.BeginForm() ? — The Almighty Bobo
– The Almighty Bobo, Commented Aug 23, 2015 at 13:40
Of course, But you don't really need Html.BeginForm() if your posting the form using ajax. If you want to make a normal form submit, then you just need to add the enctype="multipart/form-data" attribute to the form (and delete your script) — user3559349
– user3559349, Commented Aug 23, 2015 at 13:44
@Stephen Muecke - When i removed Html.BeginForm and wrote plain html, it worked. place an answer and i will accept. and then i will post what i did for future referrences. — The Almighty Bobo
– The Almighty Bobo, Commented Aug 23, 2015 at 15:03

The Almighty Bobo · Accepted Answer · 2015-08-23 14:21:37Z

Thanks to @Stephen Muecke i got it to work.

For future refferences.

View

-Replace-
using (Html.BeginForm("Action", "Controller", null, FormMethod.Post, new { enctype = "multipart/form-data", id = "helpme", @class = "please" }))
-With-
<form action="@Url.Action("Action", "Controller")" id="helpme" enctype="multipart/form-data" class="please" method="post">

JQuery

$('form').submit(function (event) {

    /*
        First it dinnt work until i prevented the server side form submit.
        So this may actual work with @Html.BeginForm()
        But i dinnt have the energy to try it, since i got it to work.
    */
    event.preventDefault();

    if ($(this).valid())
    {
        var formdata = new FormData($(this).get(0));

        $.ajax({
            url: this.action,
            type: this.method,
            data: formdata,
            processData: false,
            contentType: false,
            beforeSend: function () {
                // Doing some loading gif stuff
            },
            success: function (result) {
                // element is div holding the ParticalView
                $(element).html(result);
            },
            complete: function () {
                $.validator.unobtrusive.parse('form');
                // And so on.
            }
        });
    }
    return false;
});

Now it works.

funkyCatz · Accepted Answer · 2015-08-22 23:18:33Z

-1

Hello you should use JsonResult instead of ActionResult for ajax calls. ActionResult will always lead to page refresh.

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult Action(MySuperModel Model, HttpPostedFileBase file)
{           
        // Some file validation

        if (ModelState.IsValid)
        {
            // Updating the database and sets Model to its new values.                    
        }

    return (result.ToHtmlString(), JsonRequestBehavior.AllowGet)
}

answered Aug 22, 2015 at 23:18

funkyCatz

1191 silver badge2 bronze badges

2 Comments

user3559349 Over a year ago

Nonsense. JsonResult is ActionResult ! And OP is calling the method using an ajax call so it will NEVER lead to a page refresh. And what on earth is result.ToHtmlString() - you code would just throw an exception !

The Almighty Bobo Over a year ago

First of all. Thanks for replying and tryin to help me out. But i cannot seem to understand your .ToHtmlString(). But i did try to change it to JsonResult and return a JSON string and replace the div just with that. But it still redirects me to a new page.

Collectives™ on Stack Overflow

MVC 5 Html.BeginForm using JQuery ajaxForm with data and fileupload, returns a new page. When it should replace

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related