Passing information to a Modal

Asked

Viewed 851 times

3

I have this routine using the C#Razor. It lists my messages :

Code:

 @for (int i = 0; i < 3; i++)
            {
                <div class="box-body" style="line-height:15px">
                    <ul class=" products-list products-list">
                        <li class="timeline-item">
                            <div class="product-img">
                                <img src="/Content/imagens/principais/no-user.png" alt="Product Image" style="height:40px">
                            </div>
                            <div class="product-info">
                                <a href="" class="product-title" data-toggle="modal" data-target="#myModal">
                                    @if (Model.Mensagens[i].Cliente.Nome != null && Model.Mensagens[i].Cliente.Nome.Length > 0)
                                    {
                                        @Model.Mensagens[i].Cliente.Nome;
                                    }
                                    else
                                    {
                                        @Model.Mensagens[i].Cliente.Email;
                                    }


                                    @if (Model.Mensagens[i].Visualizada == false)
                                    {
                                        <span class="label label-primary pull-right">Não lida</span>
                                    }
                                </a>
                                <span class="product-description">
                                    @Model.Mensagens[i].Conteudo
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>

Notice the link:

<a href="" class="product-title" data-toggle="modal" data-target="#myModal">

I got this Modal in a _PartialModalLayout that I call with @Html.Partial(). The idea of working is when I click on Cliente.Nome he will open Modal with some information.

Here is this part of my Modal (Remembering that it is in a separate file)

<div class="box box-info">
                <div class="box-body">
                    <form action="#" method="post">
                        <div class="form-group">
                            <h4>Cliente</h4>
                            <input type="email" disabled value="@if (@Model.Mensagens[id].Cliente.Nome != null)
                                                                { @Model.Mensagens[id].Cliente.Nome}else{ @Model.Mensagens[id].Cliente.Email}"
                                   class=" form-control" name="emailto" placeholder="Email to:">
                        </div>
                        <h4>Mensagem</h4>
                        <div>
                            <textarea disabled  id="MensagemRecebida" style="min-width: 100%;height:120px;display:block">@Model.Mensagens[id].Conteudo</textarea>
                        
                        </div>
                        
                        <div>
                            <textarea id="EscreverMensagem" style="min-width: 100%;height:150px;margin-top:20px " placeholder="Digite sua mensagem..."></textarea>
                        </div>
                    </form>
                </div>

I tried to use the data-id, but I couldn’t. How can I open the modal by passing the message and client information?

EDIT- I am using a script the following script :` $(Document). ready(Function () {

        $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {

            var data_id = '';

            if (typeof $(this).data('id') !== 'undefined') {

                data_id = $(this).data('id');
            }

            $('#myModal').val(data_id);
        })
    });

`

Assuming this is the right script, after I pass this data-id for the modal as I can use this id in the modal ? I tried something like, @Model.Mensagem[id].Conteudo but does not recognize the id variable.

javascript c# html razor bootstrap

  • See if any of these help: http://answall.com/questions/130803/passar-id-de-um-dado-de-uma-tabela-para-a-modal-resolvido or http://answall.com/questions/130169/tabela-edit%C3%a1vel-em-php

  • Hey How are you calling the modal ?

  • I will check this post Miguel , and did an Edit paulo_tully, Thanks for your attention .

  • 2

    Possible duplicate of Switch varialvel to modal

  • I made a change, check it out, I’m reading the posts they sent me to see if I can fix it.

  • William Cézar, I tried to edit your post to be clearer, see if I captured what you wanted.

  • Yes basically that’s it Anthony, as I have a for the listing of the message I do not know how to pass the customer index to Modal , for me to retrieve his information there.

  • I did an update reflecting a little more my doubt, if any can help me, so far I could not solve.

  • I got a solution and I answered my question, take a look at the answer, in case you’re confused I try to tidy up.

Show 4 more comments

1 answer

1


I was able to solve it this way :

Modal’s call was changed instead of data-target="" was placed href="" alias has been added for as class class="openMyModal product-title" finally a Json was created in the data id with the attributes that I wanted to pass to the modal :

data-id='{"nome": "@Model.Mensagens[i].Cliente.Nome", "pessoaId": @Model.Mensagens[i].Cliente.PessoaId, "mensagemId": @Model.Mensagens[i].MensagemId, "conteudo": "@Model.Mensagens[i].Conteudo", "clienteId"}'

the call went like this:

  <a class="openMyModal product-title" data-id='{"nome": "@Model.Mensagens[i].Cliente.Nome", "pessoaId": @Model.Mensagens[i].Cliente.PessoaId, "mensagemId": @Model.Mensagens[i].MensagemId, "conteudo": "@Model.Mensagens[i].Conteudo"}' data-toggle="modal" href="#myModal">

Then I created the following javascript :

<script type="text/javascript">
$(document).on("click", ".openMyModal", function () {
    var data = $(this).data('id');        
    $("#clienteNome").val(data.nome);
    $("#mensagemConteudo").val(data.conteudo);

});

Javascript already serializes Json, in the case when I do var data = $(this).data('id'); to data is already receiving a Json with the information.

In Modal in the Elements where I want you to receive the information I add the id #clienteNome or #mensagemConteudo

Example:

  <div class="form-group">
                            <h4>Cliente</h4>
                            <input id="clienteNome" type="text" disabled  class="form-control" name="emailto" placeholder="Email to:">
                        </div>
                        <div>
                            <h4>Mensagem</h4>
                            <textarea class="textarea" id="mensagemConteudo" disabled style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid rgb(221, 221, 221); padding: 10px;"></textarea>
                        </div>

So when opening the modal it already loads the information in Modal.

Browser other questions tagged javascript c# html razor bootstrap

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