如何将几张彼此相关的照片和文本发布到控制器上

时间:2018-11-06 12:59:31

标签: asp.net-mvc asp.net-core-mvc

enter image description here我想在控制器上发布几张彼此相关的照片和文本。我该怎么办?我的表单是“编辑表单”,我分别存储了所有图片和税款。但是现在在“编辑表单”中,我必须将它们一起发送到控制器。

EditTempleViewModel

   public class EditTempleViewModel
    {
        public string Date { get; set; }

        public string Title { get; set; }

        public string KeyWord { get; set; }

        public int Pattern { get; set; }

        public int Category { get; set; }
}

SectionViewModel

   public class SectionViewModel
        {
            public int Id { get; set; }

            public int PostId { get; set; }

            public string Title { get; set; }

            public List<string> Text { get; set; }

            public IFormFileCollection Image { get; set; }

            public string Pic { get; set; }
        }

表格

@using Blogger.Models.BlogViewModels
@model EditTempleViewModel

    <form id="editForm" enctype="multipart/form-data">
        <div class="form-group">
            <input asp-for="Title" type="text" class="form-control formClass" id="Title" placeholder="">
        </div>
        <div class="form-group">
            <select asp-for="Category" asp-items="@ViewBag.Category" class="form-control formClass" id="Category">

                <option value="" disabled selected>Select group</option>
            </select>
        </div>
        <div class="form-group">
            <label asp-for="Pattern"></label>
            <select asp-for="Pattern" asp-items="@ViewBag.Pattern" class="form-control formClass ">
                <option value="" disabled selected>select</option>
            </select>
        </div>
        <div class="form-group div-textarea" id="inputTextarea">
            <label asp-for="KeyWord"></label>
            <textarea asp-for="KeyWord" class="form-control formClass" id="KeyWord" rows="1"></textarea>
        </div>
        <div id="c">
            @foreach (var item in Model.sections)
            {
              <div class="form-group div-textarea" id="inputTextarea">
                    <label asp-for="@item.Text"></label>
                    <textarea name="Text" class="form-control formClass txtaraeClass" rows="3">@item.Text</textarea>
                </div>
                <div class="form-group  div-img" id="inputImg">
                    <div class="custom-file">
                        <label class="custom-file-label" for="Image">Upload</label>
                        <input name="Image" type="file" class="custom-file-input formClass fileU" id="Image" multiple>

                    </div>
                </div>
            }
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btnEdit">submit</button>
        </div>
    </form>

脚本

   $(".btnEdit").click(function (evt) {
                evt.preventDefault();
                var fileupload = $(".fileU").get();
                var files = fileupload;
                let myfiles = []
                for (var i = 0; i < files.length; i++) {
                    myfiles.push(files[i]);
                }

                var data = new FormData();
                data.append("Title", $('#Title').val());
                data.append("Category", $('#Category').val());
                data.append("Pattern", $('#Pattern').val());
                data.append("KeyWord", $('#KeyWord').val());
                data.append("files", myfiles)
                let json =
                    {
                        "Title": $('#Title').val(),
                        "Category": $('#Category').val(),
                        "Pattern": $('#Pattern').val(),
                        "KeyWord": $('#KeyWord').val(),
                        files: data,
                        images: data
                    }
                var frm =   $('#editForm').serialize();
                $.ajax({
                    type: "post",
                    url: "/Home/Uploadfilesajax",                  
                     contentType :false,
                    processData: false,
                    data: data,
                    success: function (message) {
                        alert(message);
                    },
                    error: function () {
                        alert("there was error uploading files!");
                    }
                });
            });

推车

[HttpPost]
        public async Task<IActionResult> UploadFilesAjax(EditTemple model, IFormCollection files)
        {
}

我在模型和文件中都有空数据

enter image description here

0 个答案:

没有答案