Razor - Send parameters to a modal Bootstrap

Question

Razor - Send parameters to a modal Bootstrap

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I have a list (grid) and want to open a modal bootstrap with details of the chosen line. To build the list I'm using - @foreach , and I store the data in viewbag .

The idea is to open the modal window and use the data of viewbag .

@foreach (var _img in ViewBag.Images)
{
    <a href="#modal60" data-toggle="modal">
        <img src="~/Content/images/products/@_img.MediaFileName"  />
    </a>
    ViewBag.ImageFile = _img.MediaFileName;
    ViewBag.ImageId = _img.ProductsMediasId;
}

The problem is that ViewBag.ImageFile does not have the correct value of the selected image.

c# twitter-bootstrap razor modal

asked by anonymous 30.09.2015 / 07:15

3 answers

Does not xCode components appear in the simulator? [closed] What is the DispatcherServlet function in Spring?

score 1 · Answer 1

You can use the data-transfer from the bootstrap js library. in case I'm taking the parameter from an eval but you can get the parameter from wherever you want:

<a><i class="fa fa-times" data-toggle="modal" data-target="#modalexcluir" data-transfer1="<%#Eval("nome") %>"></i></a>

and in javascript just use:

    $('#modalexclui').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var nome = button.data('transfer1')
            var modal = $(this)
            modal.find('#textoexclui').text(nome )

score 0 · Answer 2

The viewbag is used to pass data from controller to view , not to be used in view in this way. Use variables.

In the specific case of your code, each iteration of the loop overwrites ViewBag.ImageFile and ViewBag.ImageId , which will get the value of the last item ViewBag.Images .

score 0 · Answer 3

ViewBag puts the information inside the HTML, serving to transport data from Controller to View . In your case, supposing the modal like this:

<div id="modal60">
    <div class="modal-header">
       <button class="close" data-dismiss="modal">×</button>
       <h3>Header</h3>
    </div>
    <div class="modal-body">
       <input type="text" name="imagemId" id="imagemId" value=""/>
    </div>
</div>

In view , add a data-id with the information you want to pass to the bootstrap modal:

@foreach (var _img in ViewBag.Images)
{
    <a href="#modal60" data-toggle="modal" data-id="@_img.ProductsMediasId" class="abrirModal">
        <img src="~/Content/images/products/@_img.MediaFileName"  />
    </a>
}

And treat this ID via jQuery:

$(document).on("click", ".abrirModal", function () {
    var idImagem = $(this).data("id");
    $(".modal-body #imagemId").val(idImagem);
    //exibir modal
});