Passing information to a Modal

Question

Passing information to a Modal

Navigation

#1 by (1 votes)

3

I have this routine using Razor from C #. 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 have this Modal in a _PartialModalLayout that I call with @Html.Partial() . The idea of working 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 to use data-id , but I could not. 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 to the modal how can I use this id in the modal? I tried something like, @Model.Mensagem[id].Conteudo but it does not recognize the id variable.

javascript html c# razor bootstrap

asked by anonymous 25.08.2016 / 21:32

1 answer

Ajax does not return the request date R - match and add string

score 1 · Accepted Answer

I was able to resolve it as follows:

The Modal call was changed, instead of% with% was put data-target="" was added alias to as class href="" finally I created a Json in the data id with the attributes 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 looks 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);

});

JScript already serializes Json, in the case when I do var class="openMyModal product-title" to data = $(this).data('id'); is already receiving a Json with the information.

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

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 in Modal.