MVC/Razor File Upload View

Question

I self admitted newbie, but I have a view with some code I pasted to provide a file upload. The function works but if the code is in, the "Save" button for the View that was already there stops working. If I had to guess it has something to do with the "HTML.BeginForm" line being there twice.

Here is the top of the view,

    @model BrooksSOR.Models.dataOffender

    @{
        ViewBag.Title = "Edit";
    }

    <h2>Edit</h2>
    <div >
       <h2>Upload Files in MVC</h2>
           <img src="@Model.Photograph" width="250" height="250"  />*


    @using (Html.BeginForm("FileUpload", "SOR",
        FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
    <input name="uploadFile" type="file" />
    <input type="submit" value="Upload File"/>
    <input type="hidden" name="parmPersonID" value="@Model.PersonID" />

    }
    </div>

    @using (Html.BeginForm())
    {
    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true)

    <fieldset>
      <legend>dataOffender</legend>

           <p>
        <input type="submit" value="Save" />
        <input id="Details" type="button" value="Details" />
    </p>
    </fieldset>

why 2 forms???? Also the second form does not have an end tag '}' — Nikitesh, Jun 11 '14 at 13:24
I guess you need to tell your second form where to post and yes why 2 forms? + no closing tag for second form I doubt its a copy paste error — Neel, Jun 11 '14 at 13:26
LOL, Like I said I'm a newbie. I just stole the "Upload" code and pasted it. I tried changing it to an actionlink but that breaks it. The only way I'm able to get the Upload to work is with the BeginForm which breaks my other button. Like I said I'm a newbie with this. — David Vondersmith, Jun 11 '14 at 13:28
can u post the link from where you stole this code @DavidVondersmith — Neel, Jun 11 '14 at 13:29
Sorry Priyank, It was closed, I double checked, just didn't make it into this post. — David Vondersmith, Jun 11 '14 at 13:32
Yes Neel. http://stackoverflow.com/questions/16255882/how-to-upload-image-display-image-in-asp-net-mvc-4 — David Vondersmith, Jun 11 '14 at 13:33
plz provide the path where you want to post for second form @DavidVondersmith — Neel, Jun 11 '14 at 13:41
Neel... I'm building that in the controler .... if (uploadFile.ContentLength > 0) { string strSuffixFileName = "_" + DateTime.Now.ToString("yyyy_MM_dd_hh_mm_ss").Replace("_", ""); string FilePath = HttpContext.Server.MapPath("../Uploads") + "\\ " + strSuffixFileName + "_" + Path.GetFileName(uploadFile.FileName); uploadFile.SaveAs(FilePath); — David Vondersmith, Jun 11 '14 at 15:24

score 0 · Answer 1 · answered Jun 11 '14 at 13:31

Remove the @html.BeginForm

The script you would need to send for a file and some other fields with it.

//Purpose: Form Submit: SAVE Client
        document.getElementById('frmPage').onsubmit = function (e) {
            debugger;
            var file = document.getElementById('fileToUpload').files[0];
            var filename;
            if (file) {
                filename = file.name;
            }
            else {
                filename = "";
            }
            $('#Image').val(filename);
            var formObj = $(this);
            var formURL = '@Url.Action("SaveMethod", "ControllerName")';
            var formData = new FormData(this);
            $.ajax({
                url: formURL,
                type: 'POST',
                data: formData,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
                success: function (data, textStatus, jqXHR) {
                    debugger;

                    alert("Client saved successfully");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            });
            e.preventDefault(); //Prevent Default action.
        }

This is the design:

<div>

                            <form id="frmPage" class="form-horizontal">
                                <div class="form-body">

                                    <div class="form-group">
                                        <label id="lblImage" class="col-md-3 control-label">Upload File</label>
                                        <div class="col-md-4">
                                            <input type="file" id="fileToUpload" name="file" />

                                        </div>
                                    </div>



                                <div class="modal-footer" style="margin-top: 0px">
                                    <div class="pull-right">
                                        <button type="submit" id="btnSave" class="btn blue Save">Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>

Here: The btnSave is submit type, so it will submit that particular form. and form named frmPage will do the jquery script we added.

you are taking him all the way to javascript and ajax when he is still trying to understand the basics in mvc!! + no tag for javascript in his question !! — Neel, Jun 11 '14 at 13:33
Yes my bad, I had been there, tried basic form posts, Ajax Posts using BeginForm, but this is anytime easier. so maybe I need to find the places I have tried the BeginForm techniques. — TechGirl, Jun 11 '14 at 13:35
no offence to you both but just as being a mvc developer im suggesting that plz don't skip parts of mvc and jump into other stuffs jst coz mvc is little bit complicated..use atlast those features which is supported by MVC its awesome — Neel, Jun 11 '14 at 13:39
@Neel I know MVC has lot of features that probably I too am not aware. But yes I would need to try using the form post. — TechGirl, Jun 11 '14 at 13:44

MVC/Razor File Upload View

1 Answers1