Razor - Send parameters to a Bootstrap modal

Asked

Viewed 821 times

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 store the data in a viewbag.

The idea is to open the modal window and use the data from 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 get the correct value of the selected image.

c# twitter-bootstrap razor parameters modal

  • You already own the modal? Post the rest of your code along with the method for details.

  • Hello, we don’t do this way jerally as there is no need to save the details of all items on the same page. A more interesting approach would be when you click on the item to see the details the page makes a request to the server and returns only the detail of the item in question.

3 answers

1

you can use the data-transfer from the js bootstrap library. in the case I am taking the parameter of an Eval but you can take the parameter from where 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 )

  • thanks a lot!

0

The ViewBag places the information inside the HTML, serving to carry data from the Controller for View. In your case, assuming the modal so:

<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 the view, add a data-id with the information you want to pass to the modal bootstrap:

@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 one ID via jQuery:

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

  • Thank you very much!

  • If this answer has solved the problem, check as the Solution to help those who have the same problem in the future :)

  • Hello, unfortunately it didn’t work out...

  • What’s the mistake? You must have done something wrong... :)

0

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

In the specific case of your code, each loop iteration overrides ViewBag.ImageFile and ViewBag.ImageId, that will be with the value of the last ViewBag.Images.

  • Yes, that’s what happens, Viewbag gets the last value only. I confess that I can not imagine how to move to the modal the key of the selected item.

  • You need to send the data to the action that generates the modal, if it is generated by a controller. If you generate or want to generate her HTML in the same view you showed, use the values in HTML. viewbag serves to pass controller data to the view, setting its value in the view is using wrong.

Browser other questions tagged c# twitter-bootstrap razor parameters modal

You are not signed in. Login or sign up in order to post.