Javascript 映像上载-MVC在引导模式中使用时返回null
我正在引导模式弹出窗口中绑定部分视图。当我从弹出窗口上传时,上传返回null。相反,如果直接在浏览器中打开局部视图,则该文件将显示在模型中。因此,文件上传没有问题。问题出在模态弹出或其他方面 看起来:Javascript 映像上载-MVC在引导模式中使用时返回null,javascript,asp.net-mvc,twitter-bootstrap,file-upload,Javascript,Asp.net Mvc,Twitter Bootstrap,File Upload,我正在引导模式弹出窗口中绑定部分视图。当我从弹出窗口上传时,上传返回null。相反,如果直接在浏览器中打开局部视图,则该文件将显示在模型中。因此,文件上传没有问题。问题出在模态弹出或其他方面 看起来: 从模式弹出窗口发布时,内容类型更改为application/x-www-form-urlencoded,其中直接使用部分视图时,内容类型为多部分/表单数据 modalform.js $(function () { $.ajaxSetup({ cache: false });
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
// hide dropdown if any
$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
/*backdrop: 'static',*/
keyboard: true
}, 'show');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$.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成功,但由于内容类型不同,文件不会返回。我怎样才能改变这个
型号
public partial class Produkty
{
public int PRO_Id { get; set; }
public string PRO_Nazwa { get; set; }
public string PRO_Jednostka { get; set; }
public float PRO_Vat { get; set; }
public string PRO_Rodzaj { get; set; }
public string PRO_Opis { get; set; }
public string PRO_Waluta { get; set; }
public float PRO_CenaN { get; set; }
public float PRO_CenaB { get; set; }
public string PRO_ZdjecieN { get; set; }
public byte[] PRO_ZdjecieF { get; set; }
}
创建视图
@using (Html.BeginForm("Create", "Products", FormMethod.Post, new { enctype = "multipart/form-data" }))
//@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="modal-body">
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.PRO_Nazwa, "Nazwa", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.PRO_Nazwa, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PRO_Nazwa, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.PRO_Jednostka, "Jednostka", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.PRO_Jednostka, new { htmlAttributes = new { @class = "form-control", @Value = "szt." } })
@Html.ValidationMessageFor(model => model.PRO_Jednostka, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.PRO_Vat, "Vat", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.DropDownListFor(model => model.PRO_Vat, new List<SelectListItem>
{
new SelectListItem{ Text = "23 %", Value = "23"},
new SelectListItem{ Text = "8 %", Value = "8" },
new SelectListItem{ Text = "5 %", Value = "5" },
new SelectListItem{ Text = "4 %", Value = "4" },
new SelectListItem{ Text = "0 %", Value = "0" }
}, "wybierz...", new { @class = "form-control", @id = "Value1" })
@Html.ValidationMessageFor(model => model.PRO_Vat, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.PRO_Rodzaj, "Rodzaj", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.DropDownListFor(model => model.PRO_Rodzaj, new List<SelectListItem>
{
new SelectListItem{ Text = "towar", Value = "towar" },
new SelectListItem{ Text = "usługa", Value = "usługa" }
}, "wybierz...", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.PRO_Rodzaj, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.PRO_Waluta, "Waluta", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.DropDownListFor(model => model.PRO_Waluta, new List<SelectListItem>
{
new SelectListItem{ Text = "PLN", Value = "PLN" },
new SelectListItem{ Text = "EUR", Value = "EUR" },
new SelectListItem{ Text = "USD", Value = "USD" },
new SelectListItem{ Text = "GBP", Value = "GBP" },
new SelectListItem{ Text = "CHF", Value = "CHF" }
}, "wybierz...", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.PRO_Waluta, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.PRO_CenaN, "Cena netto", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.PRO_CenaN, new { htmlAttributes = new { @class = "form-control", @id = "Value2" } })
@Html.ValidationMessageFor(model => model.PRO_CenaN, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.PRO_CenaB, "Cena brutto", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.PRO_CenaB, new { htmlAttributes = new { @class = "form-control", @id = "MultiplyValue1Value2" } })
@Html.ValidationMessageFor(model => model.PRO_CenaB, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.PRO_Opis, "Opis", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.PRO_Opis, new { htmlAttributes = new { @class = "form-control", @Value = "brak" } })
@Html.ValidationMessageFor(model => model.PRO_Opis, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.PRO_ZdjecieF, "Plik", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
<input type="file" id="file" class ="btn btn-default btn-file" name="file" />
@Html.ValidationMessageFor(model => model.PRO_ZdjecieF, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Anuluj</button>
<input class="btn btn-primary" id="upload" type="submit" value="Zapisz" />
</div>
请帮助解决此问题。
$(函数(){
$.ajaxSetup({cache:false});
$(“a[数据模式]”)。在(“单击”上,函数(e){
$(“#myModalContent”).load(this.href,函数(){
$(“#myModal”).modal({
键盘:正确
}","秀";;
bindForm(本);
});
返回false;
});
});
函数绑定窗体(对话框){
$(“#crtForm”,对话框)。提交(函数(){
var myform=document.getElementById(“crtForm”);
var fdata=新表单数据(myform);
$.ajax({
url:this.action,
数据:fdata,
cache:false,
processData:false,
contentType:false,
类型:“POST”,
成功:功能(结果){
如果(结果、成功){
$(“#myModal”).modal(“隐藏”);
location.reload();
}否则{
$(“#myModalContent”).html(结果);
bindForm();
}
}
});
返回false;
});
}
$(函数(){
$.ajaxSetup({cache:false});
$(“a[数据模式]”)。在(“单击”上,函数(e){
$(“#myModalContent”).load(this.href,函数(){
$(“#myModal”).modal({
键盘:正确
}","秀";;
bindForm(本);
});
返回false;
});
});
函数绑定窗体(对话框){
$(“#crtForm”,对话框)。提交(函数(){
var myform=document.getElementById(“crtForm”);
var fdata=新表单数据(myform);
$.ajax({
url:this.action,
数据:fdata,
cache:false,
processData:false,
contentType:false,
类型:“POST”,
成功:功能(结果){
如果(结果、成功){
$(“#myModal”).modal(“隐藏”);
location.reload();
}否则{
$(“#myModalContent”).html(结果);
bindForm();
}
}
});
返回false;
});
}
您需要使用FormData
使用ajax发布文件-请参阅,为什么有location.reload()成功回调中的代码>。ajax的全部目的是保持在同一个页面上,因此如果您要刷新页面,则使用ajax没有任何意义。我在上打开我的网站,例如:localhost:9999/Product/Index,当我单击“创建”图标时,它会在单击“保存”时显示一个带有页面/产品/板条箱的模式弹出窗口,这个弹出窗口应该关闭并重新加载站点/产品/索引。如果您只想重新加载页面,那么使用ajax是毫无意义的。您也可以正常提交并重定向回Index()
方法,但我想弹出一个关闭(就像现在一样)并刷新索引页面。我该怎么做?您需要使用FormData
使用ajax发布文件-请参阅,为什么要使用location.reload()成功回调中的代码>。ajax的全部目的是保持在同一个页面上,因此如果您要刷新页面,则使用ajax没有任何意义。我在上打开我的网站,例如:localhost:9999/Product/Index,当我单击“创建”图标时,它会在单击“保存”时显示一个带有页面/产品/板条箱的模式弹出窗口,这个弹出窗口应该关闭并重新加载站点/产品/索引。如果您只想重新加载页面,那么使用ajax是毫无意义的。您也可以正常提交并重定向回Index()
方法,但我想弹出一个关闭(就像现在一样)并刷新索引页面。我怎么做?
[HttpPost]
[AcceptVerbs(HttpVerbs.Post)]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Exclude = "PRO_ZdjecieF,PRO_Zdjecie")]Produkty pro, HttpPostedFileBase file)
{
if (ModelState.IsValid)
{
//if (imageF != null)
{
pro.PRO_ZdjecieF = new byte[file.ContentLength];
pro.PRO_ZdjecieN = file.ContentType;
file.InputStream.Read(pro.PRO_ZdjecieF, 0, file.ContentLength);
}
db.Produkties.Add(pro);
db.SaveChanges();
return Json(new { success = true });
}
return PartialView("Create", pro);
}