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

  • Question

  • User-1795702563 posted

    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.

    Monday, February 22, 2021 2:27 PM

All replies

  • User-474980206 posted

    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.

    Monday, February 22, 2021 6:31 PM
  • User1686398519 posted

    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

    Tuesday, February 23, 2021 8:04 AM