我有一个模态表格,可以很好地加载并能够填写表格。添加图像后,该表单关闭。
<button id="createButton" class="btn btn-success show-modal" type="button" data-toggle="modal" data-target="#formModal">
Create New Auction
</button>
和脚本
<script>
$('#formModal').modal({
backdrop: 'static',
keyboard: false
});
$(document).ready(function () {
$(".show-modal").click(function () {
$("#formModal").modal({
backdrop: 'static',
keyboard: false
});
});
});
$("#saveButton").click(function () {
var imageIDs = [];
$("#pictureArea .image").each(function () {
var imageID = $(this).attr("data-id");
imageIDs.push(imageID);
});
$("#pictureIDs").val(imageIDs.join());
$.ajax({
url: "@Url.Action("Create","Auctions")",
type: "post",
data: $("#createForm").serialize()
}).done(function (response) {
$('#formModal').modal('toggle');
$("#listingArea").html(response);
});
});
$("#auctionPictures").change(function () {
var pictures = this.files;
var picsData = new FormData();
for (var i = 0; i < pictures.length; i++) {
picsData.append("Pictures", pictures[i]);
}
$.ajax({
url: "@Url.Action("UploadPictures", "Shared")",
type: "post",
data: picsData,
dataType: "json",
processData: false,
contentType:false
}).done(function (responses) {
for (var i = 0; i < responses.length; i++) {
var picResponse = responses[i];
AttachNewImage(picResponse.pictureUrl, picResponse.Id);
}
});
});
function AttachNewImage(imageURL, imageID) {
var $newimgHTML = $("#imageTemplate").clone();
$newimgHTML.find(".image").attr("src", "/uploads/images/" + imageURL);
$newimgHTML.find(".image").attr("data-id", imageID);
$("#picturesArea").append($newimgHTML.html());
RemoveImagesOnClick();
}
</script>