File Upload in asp.net MVC

Question

I need to add a file upload in my view. I added the Html.BeginForm inside my main Html.BeginForm so that the file upload is not hitting the Controller method. once i put my file upload out side it's working. but i need the file upload in my first form.

Not Working:

@using (Html.BeginForm())
{
    @Html.DropDownListFor(m => m.StateModel, new SelectList(Model.StateModel, "Id", "StateName"), new { @id = "ddlstate", @style = "width:200px;", @onchange = "javascript:GetCity(this.value);" })
    <br />
    <br />
    <select id="ddlcity" name="ddlcity" style="width: 200px">

    </select>

    <br /><br />

    using (Html.BeginForm("Upload", "Test", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="file" name="file" />
        <input type="submit" value="Upload" />
    }             
}

Working:

@using (Html.BeginForm("Upload", "Test", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
}

@using (Html.BeginForm())
{
    @Html.DropDownListFor(m => m.StateModel, new SelectList(Model.StateModel, "Id", "StateName"), new { @id = "ddlstate", @style = "width:200px;", @onchange = "javascript:GetCity(this.value);" })
    <br />
    <br />
    <select id="ddlcity" name="ddlcity" style="width: 200px">

    </select>               
}

Answer 1

You cannot nest forms in MVC you will need to go with your working option. or If you want to perform the fileuploads without the data in the rest of your form you will need to use a standard input type=button (not submit) and wire up the click event of this button using jQuery/javascript.

eg

@*current rows *@
<div id="CurrentDetails"> 
    @Html.Partial("_DetailsGet")
</div>

@*newrow*@

  <table>
    <tbody>
      <tr>
          <td>Description</td>
          <td>Owner</td>
      </tr>
  <tr>
    <td>
    @Html.TextBoxFor(m => m.newDescription)
         </td>
    <td>
    @Html.TextBoxFor(m => m.newOwner)
        @Html.HiddenFor(m => m.ModelObject.Id)
          </td>
    <td>
    <input id="adddetails" type="button" value="+" name='btnSubmit'/>
         </td>
    </tr>
    </tbody>
    </table>  

<script>
 $().ready(function () {

        $("#adddetails").click(function () {
            var description = $("#newDescription").val();
            var owner = $("#newPropertyDetailsOwner").val();
            var id = $("#ModelObject_Id").val();
            $.ajax({
                type: "POST",
                url: "/MyRoute/DetailsAdd",
                data: {
                    id: id,
                    description: description,
                    owner: owner
                },
                success: function (data) {
                    $("#CurrentDetails").html(data);
                }

            });
        });
</script>

Answer 2

The problem is your outer form is not mapped to correct action and controller and that's why is not working. Please also explain why you need two form tags?

 @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ 
    <label for="file">Upload Image:</label>
    <input type="file" name="file" id="file"/>
    <input type="submit" value="Upload Image" />
}

try like this. Here home is your controller and Index is your action result method.

You can see whole example at following link. http://www.dotnetjalps.com/2012/04/file-upload-in-aspnet-mvc3.html