Editing content from Div

Question

I have a index, that displays the data from my database, wanted to click on the div, open a modal, which allows changing that 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:

Answer 1

In his div put 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>

By 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>)