How to write "Html.BeginForm" in Razor

Question

If I write like this:

form action="Images" method="post" enctype="multipart/form-data"

it works.

But in Razor with '@' it doesn't work. Did I make any mistakes?

@using (Html.BeginForm("Upload", "Upload", FormMethod.Post, 
                             new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)

    <fieldset>

        Select a file <input type="file" name="file" />
        <input type="submit" value="Upload" />

    </fieldset>
}

My controller looks like this:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload() 
{
    foreach (string file in Request.Files)
    {
        var uploadedFile = Request.Files[file];
        uploadedFile.SaveAs(Server.MapPath("~/content/pics") + 
                                      Path.GetFileName(uploadedFile.FileName));
    }

    return RedirectToAction ("Upload");
}

actually I have two controllers. image controller with 'image' action.. and upload controller 'with upload action.. — kk-dev11
– kk-dev11, Commented Dec 2, 2011 at 13:03

SteveC · Accepted Answer · 2013-10-15 08:57:39Z

209

The following code works fine:

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

and generates as expected:

<form action="/Upload/Upload" enctype="multipart/form-data" method="post">    
    <fieldset>
        Select a file <input type="file" name="file" />
        <input type="submit" value="Upload" />
    </fieldset>
</form>

On the other hand if you are writing this code inside the context of other server side construct such as an if or foreach you should remove the @ before the using. For example:

@if (SomeCondition)
{
    using (Html.BeginForm("Upload", "Upload", FormMethod.Post, 
                                      new { enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(true)
        <fieldset>
            Select a file <input type="file" name="file" />
            <input type="submit" value="Upload" />
        </fieldset>
    }
}

As far as your server side code is concerned, here's how to proceed:

[HttpPost]
public ActionResult Upload(HttpPostedFileBase file) 
{
    if (file != null && file.ContentLength > 0) 
    {
        var fileName = Path.GetFileName(file.FileName);
        var path = Path.Combine(Server.MapPath("~/content/pics"), fileName);
        file.SaveAs(path);
    }
    return RedirectToAction("Upload");
}

edited Oct 15, 2013 at 8:57

SteveC

17k25 gold badges116 silver badges180 bronze badges

answered Dec 2, 2011 at 12:48

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

kk-dev11 Over a year ago

thanks. Look at the controller I updated in my question. It doesn't work with the Razor code..

Darin Dimitrov Over a year ago

@user1076915, what does it doesn't work mean? Could you be a little more specific. I have updated my answer with a sample code of how your controller action could look like. If you are unable to get the uploaded file in the controller action that could mean that you have nested <form> tags (which is not allowed in HTML) or you might be using some javascript which hijacks the normal form submission and does an AJAX request which doesn't work with file uploads.

kk-dev11 Over a year ago

I used your controller action and the razor '@using'.. but it displays --> Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

Darin Dimitrov Over a year ago

@user1076915, when do you get this error message? When you want to render the upload form or when you submit the form? In the first case ensure that you have a GET Upload action that will serve the Upload.cshtml view containing this code: public ActionResult Upload() { return View(); }. So make sure you have a controller called UploadController containing the two Upload actions : one for serving the form and the other for processing the submission.

Frédéric De Lène Mirouze Over a year ago

Works, but in a POST context I suggest to add: @Html.AntiForgeryToken();

|

Collectives™ on Stack Overflow

How to write "Html.BeginForm" in Razor

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related