MVC - Input submit causing redirect automatically

Question

I have the following form

<form id="file_upload" action="/Upload/Save" method="POST" enctype="multipart/form-data">
<input type="text" id="txtProposalName" name="name" placeholder="Nome da Camiseta" />
<input type="text" id="txtProposalDesc" name="description" placeholder="Descrição da Camiseta"/>
<div class="fileupload-buttonbar">
    <div class="progressbar fileupload-progressbar"></div>
    <span class="fileinput-button">
        <a href="javascript:void(0)" class="upload-image">Upload images</a>
        <input type="file" name="files[]" multiple />
    </span>
</div>
<input type="hidden" id="imgID" name="imgID"/>
<input type="submit" id="postProposal"/>

Would call this action:

[HttpPost]
    public JsonResult Save(string name, string description, string imgID)
    {
        return Json("a");
    }

(This is the current implementation, it has no logic because I am still testing some things).

My problem is: when I click on my submit button, the action is called with the correct values, but when it returns, my browser redirects to /Upload/Save (which is the action URL). Why is this happening? Is there any way to prevent it?

Thanks!

of course it will go. `action="/Upload/Save"` this is causing it. remove the action and and if you want to upload via ajax, use your javascript to send the file(s) to your action. — DarthVader, Sep 16 '12 at 19:56

score 1 · Accepted Answer · answered Sep 16 '12 at 19:54

1

You can use an asynchronous call to your method (e.g. AJAX) to prevent the page from reloading.

answered Sep 16 '12 at 19:54

svz

4,516
11
40
66

1

Marking as answer because this is going to be my approach, thanks! – JSBach Sep 16 '12 at 21:02

webdeveloper · Answer 2 · 2012-09-16T20:05:14.637

1

As I can see you use full page reload with:

    action="/Upload/Save"

Also you trying to post data to json action method in controller. You need all form submit make with jquery, most problems you will find with ajax file uploaders.

Added: Also look at serialize() it will help you to collect all form input values.

edited Sep 16 '12 at 20:05

answered Sep 16 '12 at 19:58

webdeveloper

17,174
3
48
47

"You need all form submit make with jquery, most problems you will find with ajax file uploaders." Sorry, I could not understand what you meant. – JSBach Sep 16 '12 at 20:02
1

I add link for inputs, but for ajax file upload look this links: [How can I upload files asynchronously with jQuery?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) and [jQuery Ajax File Upload](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) – webdeveloper Sep 16 '12 at 20:08

score 1 · Answer 3 · answered Sep 16 '12 at 19:58

1

You can use Ajax.BeginForm to prevent reload page.

answered Sep 16 '12 at 19:58

brainstream

451
4
17

I will try this in some minutes and let you know :) – JSBach Sep 16 '12 at 20:03
In this scenario it cant upload file [File upload using AJAX BeginForm](http://forums.asp.net/t/1450881.aspx/1) – webdeveloper Sep 16 '12 at 20:12

score 0 · Answer 4 · answered Sep 16 '12 at 19:52

0

Dont need to prevent it, just redirect the user in your server code .

answered Sep 16 '12 at 19:52

alsotang

1,520
1
13
15

But I would like to stay on the same page (the same behavior that I would have when doing this post using javascript).... – JSBach Sep 16 '12 at 19:54
use $.ajax('post', f...) function, and prevent the submit event from jummping to other URL. – alsotang Sep 16 '12 at 20:05

MVC - Input submit causing redirect automatically

4 Answers4