在我的应用程序中,有一个用于更新用户配置文件的表单。部分用户个人资料正在上传照片。它工作正常,但由于某种原因,用户上传的图片在控制器中具有空值。换句话说,我无法在控制器中检索上传的图片。
这是用于序列化表单并将其发布到控制器的AJAX调用。此代码位于_Layout.cshtml:
$("#btn_SaveProfile").click(function (e) {
e.preventDefault();
var form = $("#form_UpdateProfile");
var serialized = form.serialize();
$.ajax({
url: '@Url.Action("UpdateProfile", "Account")',
data: serialized,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
type: 'POST',
success: function (data) {//This is successfully
}}).error(function (xhr, status) {
$("body").append(xhr.responseText);
})
})
这是_Partial View:
@model UpdateProfileViewModel
<form name="form_Update" id="form_UpdateProfile" enctype="multipart/form-data"> @* method="post" action="/Account/UpdateProfile"*@
@Html.HiddenFor(m => m.Id)
<div class="modal fade" id="modalUpdateProfile" tabindex="-1" role="dialog" aria-labelledby="modalUpdateProfileLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Update Profile</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" style="margin-top: 15px;" id="myTab">
<li class="active"><a href="#mainProfile" data-toggle="tab" id="update_profile">Update Profile</a></li>
<li><a href="#anonymousProf" data-toggle="tab" id="anonymous_profile">Anonymous Profile</a></li>
<li><a href="#cropPhoto" data-toggle="tab" id="crop_photo">Crop Profile Photo</a></li>
<li><a href="#updatePassword" data-toggle="tab" id="change_password">Change Password</a></li>
</ul>
<div class="tab-content" style="margin-top: 15px;">
<div id="mainProfile" class="tab-pane fade in active">
<div class="form-group">
@Html.LabelFor(m => m.FirstName, new { htmlAttributes = new { @class = "control-label" } })
@Html.EditorFor(m => m.FirstName, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group table-condensed">
@Html.LabelFor(m => m.LastName, new { @class = "control-label" })
@Html.EditorFor(m => m.LastName, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group table-condensed">
@Html.LabelFor(m => m.IsProfilePublic, new { @class = "control-label" })
@Html.CheckBoxFor(m => m.IsProfilePublic, new { @checked = Model.IsProfilePublic })
<span class="small text-muted">(When your profile is public, others can access your achievements such as points, badges, etc.)</span>
</div>
<div class="form-group table-condensed">
@Html.LabelFor(m => m.Email, new { @class = "control-label" })
@Html.EditorFor(m => m.Email, new { htmlAttributes = new { @class = "form-control" } })
<span class="small text-muted">(Make sure your email address is valid. This is important for receiving email notifications.)</span>
</div>
<div class="form-group table-condensed">
@Html.LabelFor(m => m.ImageUploadPublic, new { @class = "control-label" })
<span class="text-muted small">(If you want to add a new photo or replace the existing photo, click "Choose File" below. Otherwise, leave this field blank.)</span>
@Html.TextBoxFor(m => m.ImageUploadPublic, new { type = "file", htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div id="anonymousProf" class="tab-pane fade">
<div class="form-group table-condensed">
@Html.LabelFor(m => m.AnonymousName, new { @class = "control-label" })
@Html.EditorFor(m => m.AnonymousName, new { htmlAttributes = new { @class = "form-control" } })
<span class="text-muted small">(used when you choose to post an entry anonymously)</span>
</div>
<div class="form-group table-condensed">
@Html.LabelFor(m => m.ImageUploadAnonymous, new { @class = "control-label" })
<span class="text-muted small">(If you want to add a new photo or replace the existing photo, click "Choose File" below. Otherwise, leave this field blank.)</span>
@Html.TextBoxFor(m => m.ImageUploadAnonymous, new { type = "file", htmlAttributes = new { @class = "form-control" } })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal" >Close</button>
<button type="button" class="btn btn-default btn-primary pull-right" id="btn_SaveProfile">Update</button>
</div>
</div>
</div>
</div>
</form>
这是模特:
public class UpdateProfileViewModel
{
public string Id { get; set; }
[Required]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required]
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Required]
[Display(Name = "Email")]
[EmailAddress]
public string Email { get; set; }
[Display(Name = "Public Profile Photo")]
public string ProfilePhoto { get; set; }
[Required]
[DataType(DataType.Upload)]
[Display(Name = "Public Profile Photo")]
public HttpPostedFileBase ImageUploadPublic { get; set; }
[Required]
[Display(Name = "Anonymous Name")]
public string AnonymousName { get; set; }
[Display(Name = "Anonymous Profile Photo")]
public string AnonymousPhoto { get; set; }
[Required]
[DataType(DataType.Upload)]
[Display(Name = "Anonymous Profile Photo")]
public HttpPostedFileBase ImageUploadAnonymous { get; set; }
[Display(Name = "Make My Profile Public")]
public bool IsProfilePublic { get; set; }
}
而且,这是行动:
public ActionResult UpdateProfile(UpdateProfileViewModel model)
{
//Here model.ImageUploadPublic and model.ImageUploadAnonymous are empty.
}
我花了一天时间来解决这个问题,但无法弄清楚错误。有什么想法吗?