Блог

В настоящее время у меня возникла проблема с модальностями начальной загрузки. В настоящее время я создаю архивное приложение, которое выполняет фильтрацию, сохранение, удаление и т. Д. Дело в том, что я пытаюсь показать предварительный просмотр документа в модальном режиме. У меня есть существующий неитеративный модал, который работает просто отлично. Ниже приведен html-код:

 <div class="modalPreview modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true">  <div class="modal-dialog modal-lg" role="document" style="height:100%; max-height:100%">  <div class="modal-content" style="height:100%; max-height:100%">  <form id="form" method="post" name="form" style="height:100%; max-height:100%">  <div class="modal-header">  <div style="float:left; display:inline;">  <h4 class="modal-title" id="previewModalLabel">Preview Dokument</h4>  </div>  <div style="float:right; display:inline;">  <button style="text-align:right;" type="button" class="close" data-dismiss="modal" aria-label="Close">  <span aria-hidden="true">amp;times;</span>  </button>  </div>  </div>  <div class="modal-body" style="height:87%; max-height:100%">  <div class="form-group">  <h5>Emertimi</h5>  <input placeholder="Emertimi" readonly oninput="noSpaceAsFirstChar(this)" autocomplete="off" class="form-control previewForma" id="emertimiPreview" maxlength="25" type="text">  </div>  <div class="form-group">  <h5>Vendndodhja</h5>  <input placeholder="Vendndodhja" oninput="noSpaceAsFirstChar(this)" autocomplete="off" class="form-control previewForma" id="vendndodhjaPreview" maxlength="25" type="text">  </div>  <div class="form-group">  <h5>Fushe indeksimi</h5>  <span><input id="indeksFusha2" oninput="noSpaceAsFirstChar(this)" maxlength="100" class="form-control previewForma" autocomplete="off" required name="indeksFusha2" placeholder="Indeksi" type="text"></span><br>  </div>  <div id="contentDiv" style="max-width: 100% !important; max-height: 100%; height: 68%;"></div>  </div>  <div class="modal-footer" style="height:5%">  <button type="button" class="btn btn-secondary" data-dismiss="modal">Mbyll</button>  <button type="button" class="btn btn-primary" id="ruaj" onclick="Modifiko()">Ruaj</button>  </div>  </form>  </div>  </div>  </div>  

Вот функция в JS, которая принимает значения отмеченных флажков и получает только первый, обрабатывает поля ввода и сам документ в Ajax и возвращает его обратно в модальный режим.

 function Preview() {  var checkboxes = document.querySelectorAll('input[class="checkB"][type=checkbox]:checked');  var checkboxInfo = [];  for (var index = 0; index < checkboxes.length; index  ) {  checkboxInfo.push(checkboxes[index].value);  }  console.log(checkboxInfo);  $.ajax({  type: 'POST',  url: '@Url.Action("PreviewDokumenta", "Dokument")',  data: {  "emerDokumenti": checkboxInfo  },  datatype: "json",  traditional: true,  success: function (data) {  $(`#emertimiPreview`).val(data.dokumentEmri);  $(`#vendndodhjaPreview`).val(data.dokumentVendndodhja);  var indeksLista = "";  for (var index = 0; index < data.dokumentIndeksimet.length; index  ) {  indeksLista  = data.dokumentIndeksimet[index]   ",";  }  var indeks = indeksLista.substring(0, indeksLista.length - 1);  $(`#indeksFusha2`).val(indeks);  console.log(data.dokumentEmri);  console.log(data.dokumentVendndodhja);  console.log(indeks);  var emriNdarja = data.dokumentEmri.split(".");  var mime = emriNdarja[emriNdarja.length - 1];  console.log(mime);  if (mime == "pdf" || mime == "PDF") {  console.log("pdf file correct");  var src = "FileUploads/"   data.dokumentEmri;  document.getElementById("contentDiv").innerHTML = `<embed id="content" src="${src}"/>`;  document.getElementById("content").type = "application/pdf";  document.getElementById("content").style = "display:block";  }  else if (mime == "PNG" || mime == "png" || mime == "JPG" || mime == "jpg" || mime == "JPEG" || mime == "jpeg") {  if (mime == "PNG" || mime == "png") {  document.getElementById("content").type = "image/png";  }  else if (mime == "JPG" || mime == "jpg" || mime == "JPEG" || mime == "jpeg") {  document.getElementById("content").type = "image/jpeg";  }  var src = "FileUploads/"   data.dokumentEmri;  document.getElementById("contentDiv").innerHTML = `<embed id="content" src="${src}"/>`;  document.getElementById("content").style = "display:block";  }  else {  document.getElementById("ska").style = "display:block";  document.getElementById("pdf").style = "display:none";  document.getElementById("imazh").style = "display:none";   }  },  error: function () {  }  });  if (checkboxes) {  console.log("show modal");  $("#previewModal").modal('show');  }  }  

The picture is shown here: Non-iterative modal

Now here is the problem. With this method I only have 1 modal with which I can only show 1 document information at a time. In my case i wanted to have multiple document modals (as much as there are in the specific folder) to which i can move along with previous/next buttons in the modals. To do that i thought of using foreach in the view with which i could create multiple models, one for each model in the view. I included Ajax and JS inside the view html code like shown below:

 foreach (var dokument in Model)  {  if (dokument.EkzistonDokumenti == 10)  {  <div class="@dokument.DokumentEmer modal fade" id="@dokument.DokumentEmer" tabindex="-1" role="dialog" aria-labelledby="@("Label" dokument.DokumentEmer)" aria-hidden="true">  <div class="modal-dialog modal-lg" role="document" style="height:100%; max-height:100%">  <div class="modal-content" style="height:100%; max-height:100%">  <form id="form" method="post" name="form" style="height:100%; max-height:100%">  <div class="modal-header">  <div style="float:left; display:inline;">  <h4 class="modal-title" id="@("Label" dokument.DokumentEmer)">Preview Dokument</h4>  </div>  <div style="float:right; display:inline;">  <button style="text-align:right;" type="button" class="close" data-dismiss="modal" aria-label="Close">  <span aria-hidden="true">amp;times;</span>  </button>  </div>  </div>  <div class="modal-body" style="height:87%; max-height:100%">  <div class="form-group">  <h5>Emertimi</h5>  <input placeholder="Emertimi" readonly oninput="noSpaceAsFirstChar(this)" autocomplete="off" class="form-control previewForma" id="@("emertimiPreview" dokument.DokumentEmer)" maxlength="25" type="text">  </div>  <div class="form-group">  <h5>Vendndodhja</h5>  <input placeholder="Vendndodhja" oninput="noSpaceAsFirstChar(this)" autocomplete="off" class="form-control previewForma" id="@("vendndodhjaPreview" dokument.DokumentEmer)" maxlength="25" type="text">  </div>  <div class="form-group">  <h5>Fushe indeksimi</h5>  <span><input id="@("indeksFusha2" dokument.DokumentEmer)" oninput="noSpaceAsFirstChar(this)" maxlength="100" class="form-control previewForma" autocomplete="off" required name="indeksFusha2" placeholder="Indeksi" type="text"></span><br>  </div>  <div id="@("contentDiv" dokument.DokumentEmer)" style="max-width: 100% !important; max-height: 100%; height: 68%;"></div>  </div>  <div class="modal-footer" style="height:5%">  <button type="button" class="btn btn-secondary" data-dismiss="modal">Mbyll</button>  <button type="button" class="btn btn-primary" id="ruaj" onclick="Modifiko()">Ruaj</button>  </div>  </form>  </div>  </div>  </div>  <div>  <button type="button" class="btn btn-primary" id="add" data-toggle="modal" data-target="#@dokument.DokumentEmer">@dokument.DokumentEmer</button>  </div>  <p></p>  <script>  var emri = '@dokument.DokumentEmer';  console.log(emri);  $.ajax({  type: 'POST',  url: '@Url.Action("PreviewDokumenta", "Dokument")',  data: {  "emerDokumenti": emri  },  datatype: "json",  traditional: true,  success: function (data) {  $(`#emertimiPreview${emri}`).val(data.dokumentEmri);  $(`#vendndodhjaPreview${emri}`).val(data.dokumentVendndodhja);  var indeksLista = "";  for (var index = 0; index < data.dokumentIndeksimet.length; index  ) {  indeksLista  = data.dokumentIndeksimet[index]   ",";  }  var indeks = indeksLista.substring(0, indeksLista.length - 1);  $(`#indeksFusha2${emri}`).val(indeks);  console.log(data.dokumentEmri);  console.log(data.dokumentVendndodhja);  console.log(indeks);  var emriNdarja = data.dokumentEmri.split(".");  var mime = emriNdarja[emriNdarja.length - 1];  console.log(mime);  if (mime == "pdf" || mime == "PDF") {  console.log("pdf file correct");  var src = "FileUploads/"   data.dokumentEmri;  var contentDiv = "contentDiv"   emri;  document.getElementById(contentDiv).innerHTML = `<embed id="content" src="${src}"/>`;  document.getElementById("content").type = "application/pdf";  document.getElementById("content").style = "display:block";  }  else if (mime == "PNG" || mime == "png" || mime == "JPG" || mime == "jpg" || mime == "JPEG" || mime == "jpeg") {  if (mime == "PNG" || mime == "png") {  document.getElementById("content").type = "image/png";  }  else if (mime == "JPG" || mime == "jpg" || mime == "JPEG" || mime == "jpeg") {  document.getElementById("content").type = "image/jpeg";  }  var src = "FileUploads/"   data.dokumentEmri;  var contentDiv = "contentDiv"   emri;  document.getElementById(contentDiv).innerHTML = `<embed id="content" src="${src}"/>`;  document.getElementById("content").style = "display:block";  }  else {  document.getElementById("ska").style = "display:block";  document.getElementById("pdf").style = "display:none";  document.getElementById("imazh").style = "display:none";  }  },  error: function () {  }  });  </script>  }  }  

The result is shown here: Iterative model

И здесь мы имеем сравнение между двумя типами, которые я использовал в инструменте проверки. Исходный код идентичен (кроме идентификаторов, потому что они должны быть уникальными):

Первый тип

Второй тип

Там есть jquery, ajax, bootstrap и все другие ссылки, необходимые в начале документа. В чем, по-видимому, проблема?