Bind value to model in Asp.Net MVC Application Part 2

Question

This is sort of a follow up to Bind value to model in Asp.Net MVC Application.

I have a Model with different control classes. The relevant code:

public class FileUploadModel
    {
        public HttpPostedFileBase File { get; set; }
    }

I have a partial view with the following relevant code:

@Html.TextBoxFor(x => x.File, new { type = "file", id = "File", name = "File" })

Then there is a main view in which the partial view is rendered with the following relevant code:

@using (Ajax.BeginForm("ActionMethods", "Index", new AjaxOptions { UpdateTargetId = "parameterList" }, new { enctype = "multipart/form-data" }))
{

  <div id="parameterList">
        <div id="verifyBtnDiv" style="display:none;">

             **THIS IS WHERE THE PARTIAL VIEW AS SHOWN ABOVE WOULD BE RENDERED**

            <input type="submit" id="verifyBtn" value="Verify"/>

        </div>
 </div>

}

Now when the submit happens, the file does not binds to the model property. The control passes to the controller but i debug and see that its null. ANy suggestions regarding this?

There's no overload for `Ajax.BeginForm` that matches your arguements. Use `Ajax.BeginForm("actionMethod", "controllerName", null, new AjaxOptions { UpdateTargetId = "parameterList" }, new { enctype = "multipart/form-data" }))` — WannaCSharp, Nov 08 '13 at 12:56
oo...i tried that...but it still not binds to the model property — Why, Nov 08 '13 at 13:07
Try accepting HttpPostedFileBase as your paramter instead of the model. — WannaCSharp, Nov 08 '13 at 13:13
so can i convert it to Html.BeginForm...what would it then be like: @using Html.BeginForm("actionMethod", "controllerName", new { UpdateTargetId = "parameterList" }, new { enctype = "multipart/form-data" }))...Is this ok or some correction needed — Why, Nov 08 '13 at 13:16
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/40825/discussion-between-wannacsharp-and-kewal) — WannaCSharp, Nov 08 '13 at 13:17

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

There are a few issues with the code you posted that will prevent what you are attempting to do from working.

First, I am pretty certain that you cannot use the @Html.TextBoxFor helper and convert it to a file input. If it works now, I would not rely on it as you are overriding what it is meant to put out and might break in the future. Let's just put out a file input with an Id and Name matching your ViewModel property.

<input type="file" name="File" Id="File/>

Next, you cannot use Ajax.BeginForm() to upload files. It is a limitation of AJAX, not an issue with the Ajax.BeginForm. So, we will need to update your form element to a normal, Html.BeginForm, with the proper enctype (this is important)

@using (Html.BeginForm("Upload", "MyControllerName", FormMethod.Post, new { enctype = "multipart/form-data"}))
{
    <div id="parameterList">
        <div id="verifyBtnDiv" style="display:none;">
            <!-- Chose to just put the one line here instead of calling a partial-->
            <input type="file" name="File" Id="File/>
            <input type="submit" id="verifyBtn" value="Verify"/>
        </div>
 </div>
}

Lastly, if you have to/required to upload the file via AJAX, there are plenty of good recommendations on libraries to use for Ajax file uploads. I personally like the jQuery.Form plugin as it is pretty transparent in the way it handles file uploads.

edited May 23 '17 at 12:19

Community

1
1

answered Nov 12 '13 at 23:49

Tommy

39,592
10
90
121

i can use javascript dor some tasks in html.beguinform as well? – Why Nov 13 '13 at 07:37
absolutely. Instead of the MS toolkit, you would be using jQuery natively. You can overload your Html.BeginForm() even further and give it an Id, which you can then easily reference the form. We use none of the @Ajax helpers in any of our site and still have Ajax form posts, partial page loading and file uploads. For us, there is less "magic" going on and gives us more flexibility in what we want to do. – Tommy Nov 13 '13 at 14:11
i am using the plugin now...thanks a lot...just a follow up...does HttpFilePostedBase works on ie7 and 8 – Why Nov 13 '13 at 14:19
@kewal - i know it works on IE8, for IE7, since the plugin is based on jQuery 1.5 or later, it shouldn't have any issues. – Tommy Nov 13 '13 at 14:22
thanks a lot...i figured that...should have given it some more time...thanks a lot... – Why Nov 13 '13 at 14:25
@kewal - yup, no problem. Once you get used to making your own jQuery handler functions, I think you will find you can do more than with the '@Ajax' helpers. Lastly, don't forget to mark as answered if what I provided helped you out :) – Tommy Nov 13 '13 at 14:29

Bind value to model in Asp.Net MVC Application Part 2

1 Answers1

Linked