使用ajax表单在Asp.Net Core上传文件

时间:2017-11-09 13:03:08

标签: ajax asp.net-mvc file-upload asp.net-ajax

我想使用局部视图上传我的wwwroot文件夹中的图像和文件。我使用ajax表单提交数据,但我在'HttpContext.Request.Form.Files'部分中得到null值。当我删除表单标签中的ajax属性时,一切正常。

部分视图

@model LibraryProject.Models.ViewModels.AddBookViewModel


<form asp-controller="Book" asp-action="AddBook" id="frmaddbook" data-ajax="true" data-ajax-method="POST"
  data-ajax-update="#frmaddbook" data-ajax-mode="replace" enctype="multipart/form-data">


<div class="modal-body form-horizontal">
    <div class="row">

        <div class="form-group">
            <label asp-for="BookName" class="col-lg-2 col-sm-2 control-label"></label>
            <div class="col-lg-6">
                <input asp-for="BookName" class="form-control" />
                <span asp-validation-for="BookName" class="text-danger"></span>
            </div>
        </div>

        <div class="form-group">
            <label asp-for="BookDescription" class="col-lg-2 col-sm-2 control-label"></label>
            <div class="col-lg-9">
                <textarea id="BookDescription" name="BookDescription" asp-for="BookDescription" class="form-control"></textarea>
                <span asp-validation-for="BookDescription" class="text-danger"></span>
            </div>

            <script type="text/javascript">
                CKEDITOR.replace('BookDescription');
            </script>

        </div>


        @* Image *@
        <div class="form-group">
            <label asp-for="BookImage" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="BookImage" type="file" name="file" />
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-10">
                <input type="submit" value="SaveInDataBase" />
            </div>
        </div>
    </div>
</div>

控制器:

 public class BookController : Controller
 {
    private readonly ApplicationDbContext _context;
    private readonly IServiceProvider _iServiceProvider;
    private readonly IHostingEnvironment _appEnvironment;

    public BookController(IHostingEnvironment appEnvironment, ApplicationDbContext context, IServiceProvider iServiceProvider)
    {
        _context = context;
        _iServiceProvider = iServiceProvider;
        _appEnvironment = appEnvironment;
    }
.
.
.

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> AddBook(AddBookViewModel model)
    {
        if (ModelState.IsValid)
        {
                //here returns null
                var files = HttpContext.Request.Form.Files;
                foreach (var Image in files)
                {
                    if (Image != null && Image.Length > 0)
                    {
                        var file = Image;
                        var uploads = Path.Combine(_appEnvironment.WebRootPath, "uploads\\img\\");
                        if (file.Length > 0)
                        {
                            var fileName = Guid.NewGuid().ToString().Replace("-", "") + Path.GetExtension(file.FileName);
                            using (var fileStream = new FileStream(Path.Combine(uploads, fileName), FileMode.Create))
                            {
                                await file.CopyToAsync(fileStream);
                                model.BookImage = fileName;
                            }
                        }
                    }
                }


                //insert
                using (var db = _iServiceProvider.GetRequiredService<ApplicationDbContext>())
                {
                    Book bookmodel = AutoMapper.Mapper.Map<AddBookViewModel, Book>(model);
                    db.books.Add(bookmodel);
                    db.SaveChanges();
                }
                return PartialView("_succefullyresponse", redirectUrl);
            }

        return PartialView("_AddEditbook", model);
    }
}

型号:

public class AddBookViewModel
{
    [Key]
    public int BookId { get; set; }

    [Display(Name = "Name  :")]
    [Required]
    public string BookName { get; set; }

    [Display(Name = "Description :")]
    [Required]
    public string BookDescription { get; set; }

    [Display(Name = " Image :")]
    public string BookImage { get; set; }
}

我上面编写了所有代码。现在的问题是,当数据通过ajax表单发布时,如何在wwwroot // img文件夹中上传图像或文件?

0 个答案:

没有答案