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

INITIAL QUESTION

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

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

Layout:

MytableinViewisasfollows:

<divclass="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 the Modal. Follow Modal's 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 row in the table and change it in 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 to Script the ID of the selected object?

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

Thank you very much for your attention.

Arthur

COMPLEMENT

Doubt from colleague's response AL_Mauricio :

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

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

$('#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 peer responses AL_Mauricio and edCosta and searches in StackOverflow I came up with the following solution of the Script to take the 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!