I've read the many possible causes and solutions for this problem, but I don't see that any of them can help me.
I'm making a change to an already-existing project that uses jQuery-2.2.4 and jQuery-mobile-1.4.5
Somehow, the jQuery-mobile is interfering with the <input type='file' ... element from binding to the model. Commenting out the following line of code in my View's _Layout allows successful model binding:
<script type="text/javascript"
src="@Url.Content("~/Scripts/jquery.mobile-1.4.5.min.js")"></script>
This also breaks the layout of the existing UI. Converting the project to Bootstrap et al is not do-able any time soon.
Updated jQuery to 3.6.1, but this breaks jQuery-mobile 1.4.5 which is locked to jQuery 2.n.n
Updated to jQuery-mobile-1.5.0rc. It seems compatible with jQuery-3.6.1, but none of this fixed the model-binding issue for the HttpPostedFileBase ...
Somehow jquery-mobile is preventing MVC from binding the posted data. I can also see by way of Fiddler that the element is getting posted as NULL.
In the MVC Model:
[Display(Name = "Certification Photo")]
public HttpPostedFileBase UploadedPhoto { get; set; }
In the Razor View:
@Html.TextBoxFor(r => r.Sitter.Certifications[i].UploadedPhoto,
new {
type = "file",
data_certindex = i,
accept = "image/gif,image/png,image/jpeg,image/jpg,image/bmp",
style = "visibility: hidden; position:absolute;",
@class = "form-control"
}
)
When I select a file, I can see that the value= attribute of UploadedPhoto gets populated as expected, but when the form is posted Fiddler shows that UploadedPhoto is submitted empty and seen as NULL in the controller.
When I remove the jquery-mobile script, everything works perfectly.
I'm stuck with using jQuery-mobile for the time being. Does anyone know what causes this, and/or how to work around the issue?
UPDATE: Is there a way to disable jquery-UI events on a single control or the entire form? I've tried data-role=none but that doesn't seem to disable jQuery-UI events completely.
