How to post several photos and several text related to each other to the controller - asp.net-mvc

Question

enter image description hereI want to post several photos and several texts related to each other to the controller.what should I do? My form is an Edit Form and I stored all the pictures and taxes separately. but now in Edit Form, I have to send them both together to the controller.
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; }
}
Form
#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>
Script
$(".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!");
}
});
});
Cotroller
[HttpPost]
public async Task<IActionResult> UploadFilesAjax(EditTemple model, IFormCollection files)
{
}
I have Null data in both model and files
enter image description here