ASP . NET MVC and Javascript - Open modal with ID of the selected object in a list

Question

INITIAL QUESTION

I am working on an ASP . NET MVC project with bootstrap and need to open a modal for editing and deleting records from a list.

The idea is not to leave the buttons next to each row (like table columns), but to select a row and then click on Edit or Delete.

Layout:

My table in View is as follows:

<div class="wrapper wrapper-content animated fadeInRight">
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="title">
                        <h3>Grau de Curso</h3>
                    </div>
                    <br />
                    <table class="table table-striped table-bordered table-hover dataTables-example" id="myTable">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Nome</th>
                                <th>Ativo</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model)
                            {
                                <tr class="clickable-row" style="cursor: pointer">
                                    <td >@item.GrauId</td>
                                    <td>@item.Nome</td>
                                    <td>@item.Ativo</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                    <div class="ibox-content text-center">
                        <button type="submit" name="novo" id="novo" class="btn btn-w-m btn-primary" data-toggle="modal" data-target="#modal">Novo</button>
                        <button type="submit" name="editar" id="editar" class="btn btn-w-m btn-warning" data-toggle="#modal">Editar</button>
                        <button type="submit" name="excluir" id="excluir" class="btn btn-w-m btn-danger" data-toggle="modal">Excluir</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

By clicking the New button, I can normally open Modal. It follows Modal code.

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    @using (Html.BeginForm("InserirGrau", "Curso", FormMethod.Get))
    {
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Cadastrar Grau de Curso</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="ibox-content">
                    <div class="form-horizontal">

                        <div class="form-group" onload="document.txtnome.focus()">
                            @Html.Label("Nome: ", new { @class = "col-lg-2 control-label", @for = "inputNome" })
                            <div class="col-sm-10">
                                @Html.TextBox("txtNome", null, new { @class = "form-control", @id = "inputNome", @autofocus = "" })<br />
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="submit" id="salvar" name="salvar" class="btn btn-primary">Salvar</button>
            </div>
        </div>
    }
</div>

To select the line in the table and change it color I am using the following script:

            $('#myTable').on('click', '.clickable-row', function (event) {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
            } else {
                $(this).addClass('active').siblings().removeClass('active');
            }
        });

My doubts are as follows::

1) How to get and pass the ID of the selected object to the Script?

2) After obtaining this ID, how to open the modal by the Edit or Delete button by passing the Object data.

Thank you very much for your attention.

Arthur

---

COMPLEMENT

Doubt from the answer of the colleague Al_mauricio:

1. I created a Detail button in the Index view to run the script that opens the modal with the object details.
2. I put the data-val="@item.Grauid" in the view Index table.
3. I created an Action in the Controller called Details that receives the ID passed by the Script and searches in the Database the object, returning to view Details the localized object.
4. I created a view called Details without layout, only with part of the Modal being displayed, which displays the data received from the object sent by Action.

The Detail button is opening the modal, but is passing the empty ID to the Controller.

Apparently it is an error in my Script, which is not getting the id of the data-val.

$('#myTable').on('click', '.clickable-row', function (event) {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        } else {
            $(this).addClass('active').siblings().removeClass('active');
        }

        $(".detalhe").click(function Detalhes() {
            var id = $('.clickable-row .active').attr('data-val');
            $("#modal").load("Detalhes?id=" + id, function () {
                $("#modal").modal();
            })
        });

    });

---

SOLUTION

After answers from colleagues Al_mauricio and edCosta and searches on Stackoverflow I came up with the following Script solution to grab Id and pass it on to Actionresult.

$('#myTable').on('click', '.clickable-row', function (event) {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        } else {
            $(this).addClass('active').siblings().removeClass('active');
            var id = $(this).data('val');
        }

        $(".detalhe").click(function Detalhes() {
            $("#modal").load("Detalhes?id=" + id, function () {
                $("#modal").modal();
            })
        });
    });

Actionresult:

public ActionResult Detalhes(string id)
    {
        int num = int.Parse(id);

        //Busca do Objeto e retorno para View Detalhes (modal)
    }

Thanks!!

Answer 1

You can put a data-val in your tr with the value of the object id, so by clicking on the button you will be able to take the element id and send it to your function that deletes or edits.

Example

 <table class="table table-striped table-bordered table-hover dataTables-example" id="myTable">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Nome</th>
                                <th>Ativo</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model)
                            {
                                <tr class="clickable-row" data-val="@item.GrauId" style="cursor: pointer">
                                    <td >@item.GrauId</td>
                                    <td>@item.Nome</td>
                                    <td>@item.Ativo</td>
                                </tr>
                            }
                        </tbody>
                    </table>

To get the value later just use jquery and take the attribute data-val

function Excluir(){
var GrauIdSelected =$('.clickable-row .active').attr('data-val');
//faça algo para excluir
}

Answer 2

Replying to the supplementary part

How you use parameters in Actionresult Details (modal), then the right one to pass would be

$("#modal").load("Detalhes/" + id, function () {
                $("#modal").modal();
})


public ActionResult Detalhes(string ID)
{
  // Resto da logica
}