C# asp.net issue on Form with file type and text

Question

I'm going straight to the point here guys,

I have a form. when I save the form... it only gets the firstname, middlename and lastname.. it doesn't get the files... however, if I only get the photo and comment out other inputs... the photo is captured on my model.. I dunno why it behaves like this.. I'm really new to asp.net mvc.. so please bear with me..

@model Impulse.ViewModels.AgentViewModel

@{
    ViewBag.Title = "AgentForm";
    Layout = "~/Views/Shared/_SiteLayout.cshtml";
}

<div class="custom-container">
    <h1 class="title"><strong>Add New Agent</strong></h1>
    <hr />
   @using (Html.BeginForm("Save", "Agent", FormMethod.Post, new { enctype = "multipart/form-data" }))
   {

    <div class="row">
        <div class="col-md-3">
            <div id="preview">
                <img src="~/Content/Assets/no-image.png" id="profile_image" class="img-thumbnail" />
            </div>
            <div class="form-group">
                <label>Profile Picture</label>
                <input type="file" name="photo" id="photo" />
            </div>
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        @Html.LabelFor(m => m.Agent.FirstName)
                        @Html.TextBoxFor(m => m.Agent.FirstName, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Agent.FirstName)
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        @Html.LabelFor(m => m.Agent.MiddleName)
                        @Html.TextBoxFor(m => m.Agent.MiddleName, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Agent.MiddleName)
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        @Html.LabelFor(m => m.Agent.LastName)
                        @Html.TextBoxFor(m => m.Agent.LastName, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Agent.LastName)
                    </div>
                </div>
            </div>
        </div>
    </div>


    <input type="submit" class="btn btn-primary" value="Save" />
   }


</div>

Controller

   [HttpPost]
    public ActionResult Save(AgentModel agent)
    {
        //I debug here to see the data passed by my view
        return Content("Sample");
    }

Model

public class AgentModel
{
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string MiddleName { get; set; }
        [FileSize(10240)]
        [FileTypes("jpg,jpeg,png")]
        public HttpPostedFileBase photo { get; set; }

    }

@CRice thank you for this but I have tried what kevalsing suggested to make the input file in Razor format and it captures now..... but I am, wondering why it doesn't capture when it's on html format... — Sam Teng Wong
– Sam Teng Wong, Commented Jan 16, 2017 at 7:20
The model in the view is AgentViewModel but the model you have shown is AgentModel (not the same thing). I assume AgentViewModel contains a property AgentModel Agent (which is awful practice - a view model should never contain a property which is a data model when editing) so the input would need name="Agent.photo" assuming the POST method is public ActionResult Save(AgentViewModel model) — user3559349
– user3559349, Commented Jan 16, 2017 at 7:33

Pranav Patel · Accepted Answer · 2017-01-16 07:24:51Z

2

you can try like this

Model

public class UploadFileModel 
{
    public UploadFileModel()
    {
        Files = new List<HttpPostedFileBase>();
    }

    public List<HttpPostedFileBase> Files { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string MiddleName { get; set; }
}

View

@using (Html.BeginForm("UploadData", "Home", FormMethod.Post, new { encType="multipart/form-data" }))
{
    @Html.TextBoxFor(m => m.FirstName)
    <br /><br />

    @Html.TextBoxFor(m => m.Files, new { type = "file", name = "Files" })<br /><br />
    <input type="submit" value="submit" name="submit" id="submit" />
}

Controller

public ActionResult UploadData(UploadFileModel model)
{
    var file = model.Files[0];
    return View(model);
}

answered Jan 16, 2017 at 7:24

Pranav Patel

1,55914 silver badges28 bronze badges

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

6 Comments

Sam Teng Wong Over a year ago

Question: why it doesn't work with normal input type file? but when I changed it to razor syntax it work..

user3559349 Over a year ago

@SamTengWong, The problem is that you using a different model in the view from the model in the POST method, and then compounding the problem by giving the POST method parameter the same name as a property in your model

Sam Teng Wong Over a year ago

@StephenMuecke however, the AgentViewModel only have these property. public AgentModel agent {get;set;} and List of Cites and Provinces. so when I instantiate the the AgentViewModel class the values of the agent is the same with the AgentModel..

user3559349 Over a year ago

@SamTengWong, As I noted above, that is bad practice - AgentViewModel should contain properties FirstName, LastName etc, plus List<Cites> etc. Refer What is ViewModel in MVC?.

Sam Teng Wong Over a year ago

@StephenMuecke another question... is it advisable to just inherit the property of the AgentModel to AgentViewModel and I just add the photo property and list of cities and provinces on the AgentViewModel?

|

kevalsing · Accepted Answer · 2017-01-16 07:09:13Z

1

you are binding to view to AgentViewModel so you will get AgentViewModel when you post server. so the parameter to action save should be viewmodel. Or Else change view to bind to AgentModel.
The file control that you have used is html input type. try using below code.

@Html.TextBoxFor(m => Model.File, new { type = "file" , accept=".pdf"}) @Html.ValidationMessageFor(m => Model.File)

answered Jan 16, 2017 at 7:09

kevalsing

4472 silver badges8 bronze badges

3 Comments

Sam Teng Wong Over a year ago

nope... the agentViewModel consists of AgentModel, ProvincesModel, and CitiesModel. I haven't included some of the info of the agent.. but I guess the data that I provieded will suffice

kevalsing Over a year ago

ok, then on your action method, pass the parameter as AgenViewModel. And with the code change I suggested let me know if it works.

Sam Teng Wong Over a year ago

I've tried using the Razor syntax for generating the input type file and it works now.. thanks

Collectives™ on Stack Overflow

C# asp.net issue on Form with file type and text

2 Answers 2

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related