javascript – Passing information to a Modal

Question:

I have this routine using 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>

Repare no link:

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

I have this Modal in a _PartialModalLayout that I call with @Html.Partial() . The idea of ​​how it works is when I click on Cliente.Nome it will open Modal with some information.

Here is 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 using the data-id , but I couldn't. How can I open the modal passing the message and customer information?

EDIT- I'm 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 to the modal how can I use this id in the modal? I tried something like @Model.Mensagem[id].Conteudo but it doesn't recognize the variable id.

Answer:

I managed to solve it as follows:

Modal call was changed, instead of data-target="" href="" was added the alias for class="openMyModal product-title" finally created a Json in the data id with the attributes that I wanted to switch to 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);

});

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

Modal in the elements for which 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 you open the modal, it already loads the information into Modal.

Scroll to Top
AllEscort