我在尝试使用Kendo UI for MVC从网格的PopUp编辑模板中上传文件时遇到问题。我似乎无法在控制器中接收文件。
这是我的网格的代码
@{
ViewBag.Title = "Manage Branches";
}
<h2>Manage Branches</h2>
@(Html.Kendo().Grid<Task1.Web.Models.ViewModels.BranchViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.NameArabic);
columns.Bound(c => c.NameEnglish);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(180).Title("Action");
})
.ToolBar(toolbar => { toolbar.Create(); })
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("BranchViewModel"))
.Pageable()
.Sortable(sortable => { sortable.SortMode(GridSortMode.SingleColumn); })
.Filterable(filterable => filterable.Mode(GridFilterMode.Row))
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => { model.Id(p => p.Id); })
.Read(read => read.Action("GetBranches", "Branch"))
.Create(create => create.Action("Create", "Branch"))
.Update(update => update.Action("Update", "Branch"))
.Destroy(destroy => destroy.Action("Delete", "Branch"))
)
)
这是我的Grid PopUP编辑模板
@model Task1.Web.Models.ViewModels.BranchViewModel
<div class="form-group">
<legend>New Branch</legend>
</div>
@Html.HiddenFor(model => model.Id)
<div class="form-group">
<div class="col-md-2">
@Html.DisplayNameFor(model => model.Image)
</div>
<div class="col-md-10">
@(Html.Kendo()
.Upload()
.Name("ImageFile")
.Multiple(false)
.Validation(options => options.AllowedExtensions(new[] { "jpg", "png", "jpeg" }))
)
@Html.ValidationMessage("image", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-2">
@Html.DisplayNameFor(model => model.NameEnglish)
</div>
<div class="col-md-10">
@Html.EditorFor(model => model.NameEnglish)
@Html.ValidationMessageFor(model => model.NameEnglish)
</div>
</div>
<div class="form-group">
<div class="col-md-2">
@Html.DisplayNameFor(model => model.NameArabic)
</div>
<div class="col-md-10">
@Html.EditorFor(model => model.NameArabic)
@Html.ValidationMessageFor(model => model.NameArabic)
</div>
</div>
<div class="form-group">
<div class="col-md-2">
@Html.DisplayNameFor(model => model.AddressEnglish)
</div>
<div class="col-md-10">
@Html.TextAreaFor(model => model.AddressEnglish, new {@class = "k-textbox", style = "height: 100px; width: 100%"})
@Html.ValidationMessageFor(model => model.AddressEnglish)
</div>
</div>
<div class="form-group">
<div class="col-md-2">
@Html.DisplayNameFor(model => model.AddressArabic)
</div>
<div class="col-md-10">
@Html.TextAreaFor(model => model.AddressArabic, new { @class = "k-textbox", style = "height: 100px; width: 100%" })
@Html.ValidationMessageFor(model => model.AddressArabic)
</div>
</div>
<div class="form-group">
<div class="col-md-2">
@Html.DisplayNameFor(model => model.Email)
</div>
<div class="col-md-10">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
</div>
</div>
<div class="form-group">
<div class="col-md-2">
@Html.DisplayNameFor(model => model.Telephone)
</div>
<div class="col-md-10">
@Html.EditorFor(model => model.Telephone)
@Html.ValidationMessageFor(model => model.Telephone)
</div>
</div>
<div class="form-group">
<div class="col-md-2">
@Html.DisplayNameFor(model => model.Fax)
</div>
<div class="col-md-10">
@Html.EditorFor(model => model.Fax)
@Html.ValidationMessageFor(model => model.Fax)
</div>
</div>
<div class="form-group">
<div class="col-md-2">
@Html.DisplayNameFor(model => model.Contact)
</div>
<div class="col-md-10">
@Html.EditorFor(model => model.Contact)
@Html.ValidationMessageFor(model => model.Contact)
</div>
</div>
<div class="form-group">
<div class="col-md-2">
@Html.DisplayNameFor(model => model.DomainName)
</div>
<div class="col-md-10">
@Html.EditorFor(model => model.DomainName)
@Html.ValidationMessageFor(model => model.DomainName)
</div>
</div>
这是我的ViewModel类的代码
using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web;
namespace Task1.Web.Models.ViewModels
{
public class BranchViewModel
{
public Guid? Id { get; set; }
[DisplayName("Name-Arabic-")]
[Required]
public string NameArabic { get; set; }
[DisplayName("Name-English-")]
[Required]
public string NameEnglish { get; set; }
[DisplayName("Address-Arabic-")]
public string AddressArabic { get; set; }
[DisplayName("Address-English-")]
public string AddressEnglish { get; set; }
[RegularExpression("\\d{11}$",ErrorMessage = "Telephone must be exactly 11 digits")]
[Required]
public string Telephone { get; set; }
[Required]
[RegularExpression("\\d{4,15}$", ErrorMessage = "Fax must be a number and with 4 to 15 digits")]
public string Fax { get; set; }
public string Image { get; set; }
public HttpPostedFileBase ImageFile { get; set; }
[DisplayName("Domain Name")]
public string DomainName { get; set; }
[Required]
[DataType(DataType.EmailAddress)]
public string Email { get; set; }
[Required]
public string Contact { get; set; }
}
}
这是我控制器的Create action方法的代码
public ActionResult Create([DataSourceRequest]DataSourceRequest request, BranchViewModel modelObject)
{
// check model validation
if (ModelState.IsValid)
{
// check if an image was uploaded
if (modelObject.ImageFile == null || modelObject.ImageFile.ContentLength <= 0)
{
ModelState.AddModelError("Image", "An Image has to be provided");
}
else
{
// transform to dbObject
var dbObject = Mapper.Map<Branch>(modelObject);
dbObject.Id = Guid.NewGuid();
dbObject.CompanyID = Guid.Parse(Session["companyId"].ToString());
string extension;
try
{
// get image extension
extension = Path.GetExtension(modelObject.ImageFile.FileName);
if (extension != ".jpg" && extension != ".jpeg" && extension != ".png")
{
ModelState.AddModelError("Image", "File Extension not allowed");
return Json(new[] { modelObject }.ToDataSourceResult(request, ModelState));
}
}
catch (Exception e)
{
ModelState.AddModelError("Image", "File Extension not allowed");
return Json(new[] { modelObject }.ToDataSourceResult(request, ModelState));
}
// save the image of the company
var path = $"~/Images/Branches/{dbObject.Id}{extension}";
modelObject.ImageFile.SaveAs(Server.MapPath(path));
dbObject.Image = path;
// add the object to db then remap to modelObject
modelObject = Mapper.Map(BranchService.Add(dbObject), modelObject);
}
}
return Json(new[] { modelObject }.ToDataSourceResult(request, ModelState));
}
我在做什么错了？
请注意，我对Kendo UI尚不满意。因此，如果您发现应该以更好的方式完成的任何事情，请告诉我。