title: Refresh image gallery without postback ASP.NET MVC
body: <p>I have an image gallery were the user can edit or add a image with a description. My problem is when the user adds, delete or update a image I have to refresh the page to see the modifications. How can I update my image gallery without a postback?</p>
  
  <p>Here is visually what my image gallery looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/YZe7k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YZe7k.png" alt="My image gallery"></a></p>
  
  <p>This is my cshtml</p>
  
  <pre><code>&lt;div class="form-row"&gt;
      @foreach (var archivo in Model.archivos)
      {
          string formatedId = "edit" + @archivo.archivo_id;
          string formatedDeleteId = "delete" + @archivo.archivo_id;
          &lt;div class="gallery"&gt;
              &lt;a target="_blank" href="@archivo.file_URL"&gt;
                  &lt;img src="@archivo.image_URL" alt="@archivo.description" width="400"&gt;
              &lt;/a&gt;
              &lt;div class="desc"&gt;
                  &lt;p&gt;@archivo.description&lt;/p&gt;
                  &lt;a id="@formatedId" class="popup-edit" data-url="@archivo.file_URL" data-description="@archivo.description" data-id="@archivo.archivo_id"&gt;&lt;i class="material-icons" title="Detalles"&gt;edit&lt;/i&gt;&lt;/a&gt;
                  &lt;a id="@formatedDeleteId" class="popup btn-primary-delete" data-id="@archivo.archivo_id"&gt;&lt;i class="material-icons" title="Eliminar"&gt;delete&lt;/i&gt;&lt;/a&gt;
                  @*@Html.ActionLink("contratoArchivo", "AnadirEditar", new { ID = archivo.archivo_id }, new { @class = "material-icons-contrato-archivo" })*@
              &lt;/div&gt;
          &lt;/div&gt;
      }
  
      &lt;div class="gallery"&gt;
              &lt;img src="https://cdn.pixabay.com/photo/2017/04/20/07/07/add-2244771_1280.png" alt="Añadir nueva" width="400"&gt;
          &lt;div class="desc"&gt;
              &lt;a id="btnAddImage" class="popup-edit" data-id="0"&gt;&lt;i class="material-icons" title="Añadir nueva"&gt;add&lt;/i&gt;&lt;/a&gt;
              @*@Html.ActionLink("contratoArchivo", "AnadirEditar", new { ID = archivo.archivo_id }, new { @class = "material-icons-contrato-archivo" })*@
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my Javascript/jQuery code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var id = 0;
          var description = "";
          var url = "";
          $('[id^=delete]').click(function () {
              id = $(this).data('id');
              var contratoArchivoModel = {
                  archivo_id: id,
                  contrato_id: @Model.contract_id
              };
              $.ajax({
                  type: "POST",
                  url: "/contratoArchivo/Eliminar",
                  data: JSON.stringify(contratoArchivoModel),
                  dataType: "json",
                  contentType: 'application/json; charset=utf-8',
                  success: function (data) {
                      alert(data.msg);
                  },
                  error: function () {
                      alert("Error occured!!")
                  }
              });
          })
  
          $('[id^=edit]').click(function () {
              id = $(this).data('id');
              $('#txtDescription').val($(this).data('description'));
              $('#txtUrl').val($(this).data('url'));
          })
  
          $('#btnAddImage').click(function () {
              id = 0;
              $('#txtDescription').val('');
              $('#txtUrl').val('');
          })
  
          $('#btnSubmit').click(function (event) {
              event.preventDefault();
              var contratoArchivoModel = {
                  archivo_id: id,
                  contrato_id: @Model.contract_id,
                  file_URL: $('#txtUrl').val(),
                  description: $('#txtDescription').val()
              };
              $.ajax({
                  type: "POST",
                  url: "/contratoArchivo/AnadirEditar",
                  data: JSON.stringify(contratoArchivoModel),
                  dataType: "json",
                  contentType: 'application/json; charset=utf-8',
                  success: function (data) {
                      alert(data.msg);
                  },
                  error: function () {
                      alert("Error occurred!!")
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here are my controller methods:</p>
  
  <pre><code>public ActionResult Eliminar(contratoArchivoModel archivoModel)
  {
      contratoArchivoModel contratoArchivoFound = new contratoArchivoModel();
      contratoArchivoContext contratoArchivoContext = new contratoArchivoContext();
      contratoArchivoContext.deleteFromDB(archivoModel);
      return View();
  }
  
  public ActionResult AnadirEditar(contratoArchivoModel archivoModel) 
  {
      contratoArchivoModel contratoArchivoFound = new contratoArchivoModel();
      contratoArchivoContext contratoArchivoContext = new contratoArchivoContext();
  
      if (archivoModel.archivo_id &gt; 0)
      {
          contratoArchivoFound = contratoArchivoContext.GetAllArchivos(archivoModel.contrato_id).Find(obj =&gt; obj.archivo_id == archivoModel.archivo_id);// = context.InventoryLocations.Find(id);
  
          if (contratoArchivoFound == null)
          {
              throw new HttpException(404, "Not found");
          }
          else
          {
              contratoArchivoContext.updateToDB(archivoModel);
              return Json("chamara", JsonRequestBehavior.AllowGet).Success("El archivo ha sido actualizada");
          }
      }
      else
      {
          contratoArchivoContext.addToDB(archivoModel);
          return Json("chamara", JsonRequestBehavior.AllowGet).Success("El archivo ha sido actualizada");
      }
  }
  </code></pre>
  
  <p>Any help would be very much appreciated. Thank you.</p>