我正在尝试将图像上传到我的应用程序,但它总是返回null.我在这里找不到问题.你能帮我吗？这是我的代码.
模型
[Table("Slider")]
public partial class Slider : BaseModel
{
[required]
[StringLength(200)]
public string FileName { get; set; }
[StringLength(200)]
public string Title { get; set; }
[StringLength(1000)]
public string Description { get; set; }
public int? Order { get; set; }
}
[NotMapped]
public class SliderImage : Slider
{
public HttpPostedFileBase ImageFile { get; set; }
}
视图
@using (Html.BeginForm(null,null,FormMethod.Post,new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="modal-body">
<div class="form-horizontal">
@Html.ValidationSummary(true,"",new { @class = "text-danger" })
@Html.HiddenFor(model => model.Id)
<div class="form-group">
@Html.LabelFor(model => model.FileName,new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.FileName,new { @class = "form-control",@readonly = "readonly" })
@Html.ValidationMessageFor(model => model.FileName,new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ImageFile,new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.ImageFile,type = "file" })
//This is Same as below
//<input class="form-control" id="ImageFile" name="ImageFile" type="file" value="">
</div>
</div>
调节器
public ActionResult Edit(int id)
{
Slider slider = _db.Sliders.Find(id);
if (slider == null)
{
return HttpNotFound();
}
Mapper.CreateMap<Slider,SliderImage>();
SliderImage sliderImage = Mapper.Map<Slider,SliderImage>(slider);
return PartialView("_Edit",sliderImage);
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult EditSlider([Bind(Include = "Id,FileName,Title,Description,Order,IsActive,Name,ImageFile")] SliderImage sliderImage)
{
if (ModelState.IsValid)
{
Mapper.CreateMap<SliderImage,Slider>();
Slider slider = Mapper.Map<SliderImage,Slider>(sliderImage);
_db.Entry(slider).State = EntityState.Modified;
_db.SaveChanges();
return Json(new { success = true });
}
return PartialView("_EditSlider");
}
我这么做错了什么？
找到了问题
我绑定了bootstrap模式弹出窗口内的局部视图.当我从弹出窗口上传时,上传返回null.相反,如果我直接在浏览器中打开部分View,那么该文件将出现在模型中.所以文件上传没有问题.问题出在模态弹出窗口或其他东西上.
使用Bootstrap模型时
使用部分View Directy时
检查在下面的图像中分别使用引导程序模态提交和直接使用部分查看时使用fiddler时发现的差异
从模态弹出窗口发布时,内容类型更改为application / x-www-form-urlencoded,直接使用局部视图时,它是multipart / form-data
找到根问题.
$('form',dialog).submit(function () {
var $form = $(this);
var enctype = $form.attr('id');
$.ajax({
url: this.action,type: this.method,data: $(this).serialize(),success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
//Refresh
location.reload();
} else {
$('#myModalContent').html(result);
bindForm();
}
}
});
return false;
});
我正在使用AJAX发布来提交表单中的数据.当使用$(this).serialize()时,正在调用ajax成功,但由于内容类型不同,文件未返回.我该怎么改变？
解决方法
好的,我认为您当前的问题与jQuery.ajax方法的默认设置有关.默认情况下,jQuery.ajax()方法的内容类型是’application / x-www-form-urlencoded;字符集= UTF-8′ .因此,在示例项目中,我修改了您的javascript函数,将contentType指定为ajax方法的参数：contentType：this.enctype
我认为还有一些其他问题.我注意到的下一个问题是,在提交时,我正在连接到另一个操作,因此我在视图中更新了这一行：
@using (Html.BeginForm(null,new { enctype = "multipart/form-data" }))
对此：
@using (Html.BeginForm("EditSlider","<Your Controller Name>",new { enctype = "multipart/form-data" }))
最后,当ajax提交时,我被重定向到局部视图.我相信这可以通过将preventDefault添加到ajax函数来修复：
$('form',dialog).submit(function (event) {
event.preventDefault();
var $form = $(this);
$.ajax({
url: this.action,contentType: this.enctype,success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
//Refresh
location.reload();
} else {
$('#myModalContent').html(result);
bindForm();
}
}
});
});
这就是我能够在示例项目中使用此示例的方法;如果您有其他问题,请发布更新.
