Question posted in
You can find the official documentation here.

How to show different contents of my each ViewModel's item using popup modals? – Jquery ajax

I have a ViewModel which has the list of different products.

Each product has its own description, albume, title, description, price and etc..

Foreach(var product in Model)
{
   <img src="/productImage/@product.ImageName"/>
}

How can I show each product’s individual contents when I click on its Image using popup modal ?

Tags:

2

Answers


  1. 0

    I would include individual description to data attribute, like data-description="Your description goes here …" , then, when image clicked, get this data attribute value and dynamically modify the modal content.

    Login or Signup to reply.
  2. 0

    You could use Bootstrap Modal like below:

    Model:

    public class Products
{
    public string Description { get; set; }
    public string Title { get; set; }
    public string ImageName { get; set; }
    public int Price { get; set; }
}

    View(Index.cshtml):

    @model List<Products>
@{
    var i = 0;
}
@foreach (var product in Model)
{
    <img src="/productImage/@product.ImageName" data-toggle="modal" data-target="#exampleModal_@i" style="width:100px;height:150px;" />
    <!--Modal Start-->
    <div class="modal fade" id="exampleModal_@i" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="Close()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!--Modal Body Content-->
                <div class="modal-body" id="details">
                    <dl class="row">
                        <dt class="col-sm-2">
                            @Html.DisplayNameFor(model => product.Title)
                        </dt>
                        <dd class="col-sm-10">
                            @Html.DisplayFor(model => product.Title)
                        </dd>
                        <dt class="col-sm-2">
                            @Html.DisplayNameFor(model => product.Description)
                        </dt>
                        <dd class="col-sm-10">
                            @Html.DisplayFor(model => product.Description)
                        </dd>
                        <dt class="col-sm-2">
                            @Html.DisplayNameFor(model => product.Price)
                        </dt>
                        <dd class="col-sm-10">
                            @Html.DisplayFor(model => product.Price)
                        </dd>
                    </dl>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!--Modal End-->

    i++;  //add this...
}

    Controller:

    public IActionResult Index()
{
    var model = new List<Products>()
    {
        new Products(){Title="aaa",Description="Description aaaa",Price=45,ImageName="book1.jpg"},
        new Products(){Title="bbb",Description="Description bbbb",Price=33,ImageName="book2.jpg"},
        new Products(){Title="ccc",Description="Description cccc",Price=52,ImageName="book3.jpg"}
    };
    return View(model);
}

    Result:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search