Home Modal with dynamic content, from asp.net core 2
Reply: 0

Modal with dynamic content, from asp.net core 2

taiko
1#
taiko Published in 2017-12-05 17:44:43Z

I was wondering how I would be able to open up a modal popup with dynamic content, depending on the object clicked. I can do a static one, but when it comes to dynamic content, how would I be able to do it? I mean, the object is from c#, being used with razor, and I thought of invoking a javascript function as I would in a static content modal from they aren't exactly compatible.

I was told there was an official bootstrap dynamic content modal but I can't find it in the docs.

So, here's some code I have:

@model List<RoomType>
    @for (int i = 0; i < Model.Count; i++)
{
         @for (int j = 0; j < Model[i].PossibleRateTypes.Count; j++)
{
            <a data-toggle="modal" data-target="#myModal" style="cursor:pointer;" onclick="test(@Model[i].UUID,@Model[i].PossibleRateTypes[j].UUID);"><img src="~/images/PlaceholderImages/MoreInfo.png" title="More Information" /></a>
}
}

<div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content" id="myModalContent">
                <div class="modal-body font-general">
                    <label id="modalLabel"></label>
                </div>
            </div>
        </div>
    </div>

<script>
        function test(roomTypeUuid, rateTypeUuid) {
            @ViewBag.RoomTypeUUID=roomTypeUuid;
            @ViewBag.RateTypeUUID=rateTypeUuid;
            document.getElementById('modalLabel').innerHTML= @(Model.Where(rt=>rt.UUID == ViewBag.RoomTypeUUID))

        }
    </script>

The only think that works like this is the popup modal showing up. But no data. Having data is not the problem because I have it on the screen before I click the link for the popup. I have a list and I want to pass the object (or in this case, the UUID, but it could be the object itself) and show the content on the modal depending on the variable contents. For instance, it has a title attribute as well. If the UUID is 1 it will change the content of the designated space on the modal for the content of the title property. Let's say the title in the object 1 is 'Welcome' and in the object 2 is 'Goodbye'. If I click on the link of the object 1 I want the title to be 'Welcome' and the same goes for the object 2.

But I can't have this static because I don't how many objects there will or what they will have as contents.

I'd appreciate some help. If you need me to tell you anything else, just let me know. Thanks.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.307968 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO