Showing modal pop up in asp.net mvc as partial view RSS

• • Reply
  VishavP

  None

  0 Points

  1 Post

  Showing modal pop up in asp.net mvc as partial view

  Feb 22, 2021 02:27 PM|VishavP|LINK

  Hi,

  The solution here works partially for me: https://forums.asp.net/t/2167230.aspx?showing+modal+pop+up+in+asp+net+mvc+as+partial+view

  However, i have tried to apply it to render a partial within a for loop. i.e. iteratively; it only takes the value of the first item in the list.

  in my case, i want to use it to render thumbnail images as popup modals when you click a button. However, when i click the buttons on all of the items, it shows me the very first item's image only. Any ideas? Im also curious to do this without using jquery etc.

• • Reply
  bruce (sqlwo...

  All-Star

  58194 Points

  15655 Posts

  Re: Showing modal pop up in asp.net mvc as partial view

  Feb 22, 2021 06:31 PM|bruce (sqlwork.com)|LINK

  to not use explicit jquery (bootstrap declarative arguments use jquery), your list needs to create a unique modal for each image with a unique id.  the data-target for each button should match the modal id.

  this is a really poor design, as you need to render all the extra modals, as opposed to just using one modal, and changing its context on the button click, especially as its probably just  changing the src of an <img> tag.

  bruce (sqlwork.com)
• • Reply
  YihuiSun

  Contributor

  2730 Points

  778 Posts

  Re: Showing modal pop up in asp.net mvc as partial view

  Feb 23, 2021 08:04 AM|YihuiSun|LINK

  Hi VishavP, 

  1. There are two ways to open the modal:
     1. Via data attributes
        • To be honest, even in this case, you still need to reference the jquery file and the bootstrap js file. The only difference is that you don't need to write the js code to open Modal.

        • <button id='open' data-toggle="modal" data-target="#showmodal">open modal</button>

     2. Via JavaScript

        • $("#showmodal").modal("show");

  2. Based on your description, it seems that you need to dynamically load data and populate it into Modal.
     
     1. Html.RenderPartial() is used to write the result HTML of the specified partial view directly into the HTTP response stream.
        • Simply understand, if you want to load some static content, you can implement it according to the method in the link.
     2. In this case, I suggest you use Modal combined with ajax (jquery), and open Modal through JS.
        • I wrote an example, you can refer to it.

  Model

      public class Image
      {
          public int Id { get; set; }
          public string ImageName { get; set; }
          public string ImageUrl{ get; set; }
      }

  Controller

      public class PartialTestController : Controller
      {
          public DailyMVCDemoContext db = new DailyMVCDemoContext();
          public ActionResult Index()
          {
              return View(db.Images.ToList());
          }
          public ActionResult ShowImg(int id)
          {
              var model = db.Images.Where(m=>m.Id==id).FirstOrDefault();
              return PartialView("_imgshow", model);
          }
      }

  Index

  @model IEnumerable<DailyMVCDemo3.Models.Image>
  <table class="table" id="showtable">
      <tr><td>Id</td><td>ImageName</td><td>Image</td></tr>
      @foreach (var item in Model)
      {
          <tr>
              <td>@item.Id</td>
              <td>@item.ImageName</td>
              <td><button id="viewbtn">View Image</button></td>
          </tr>
      }
  </table>
  <div id="showmodal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
          
      </div>
  </div>
  @section scripts{
      <script>
          $("#showtable").on("click", "#viewbtn", function () {
              var id = $(this).closest("tr").find("td").eq(0).html();
              $.ajax({
                  url: "@Url.Action("ShowImg", "PartialTest")",
                  data: { id: id },
                  success: function (data) {
                      $("#showmodal .modal-dialog").html(data);
                      $("#showmodal").modal("show");
                  }
              });
          });
      </script>
  }

  _imgshow

  @model DailyMVCDemo3.Models.Image
  <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
          <img src="@(Model.ImageUrl)" />
      </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
  </div>

  Here is the result. 

  

  Best Regards,

  YihuiSun

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.