Edit Div content

Question

Edit Div content

Navigation

#1 by (1 votes)

1

I have a index , which displays the data of my database, I wanted to click on div , open a modal, that would allow to change that value of div .

Code of view :

<div style="float:left; max-width:200px;max-height:200px;" class="text-center alteracor">
     <b>Salário</b><br />
     @Html.DisplayFor(modelItem => item.Salario)
</div>

Layout of view :

c# input asp.net-mvc-5

asked by anonymous 14.11.2016 / 04:54

1 answer

View Ocutar Password using EditorFor How to install C ++ compilers and libraries from previous versions in visual studio 2015?

score 1 · Accepted Answer

In your div place a class to change the value, for example:

<div style="float:left; max-width:200px;max-height:200px;" class="text-center alteracor alterarValor">
     <b>Salário</b><br />
     @Html.DisplayFor(modelItem => item.Salario)
</div>

Put a div to open the modal:

<div id="modal-container-alterar-valor"></div>

Through JavaScript you make the call to open the modal:

$('body').on('click', '.alterarValor', function (e) {
    var url = '@Url.Action("AlterarValor", "SeuController")';
        var params = { salario: "@Model.Salario" };
        $.post(url, params, function (data) {
            $('#modal-container-alterar-valor').html(data);
            $('#modal-alterar-valor').modal();
        });
    });
});

In the controller, place the partial call:

public PartialViewResult AlterarValor(double valorAlterado)
{
    return PartialView("_AlterarValorModal", new SeuModelo { ValorAlterado = valorAlterado });
}

Create a partial for modal content, for example:

@Html.Modal(new Modal {
    Id = "modal-alterar-valor",
    Titulo = "Alterar Valor",
    IdForm = "frm-alterar-valor",
},
    @<text>    
         <div class="form-group col-xs-6">
             @Html.Label("Informe o novo valor")
             @Html.InputGroup("valorAlterar", "", new { @class = "form-control mask-decimal" })
         </div>     
     </text>,
@<text>
    <button id="btnAlterarValorOk" class="btn btn-default" data-action="@Url.Action("AlterarValor")">OK</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</text>)