Modal Bootstrap and MVC C#

Question

Guys I got a view call Projects that brings a list of projects and need to view the information/detail of each project through a modal Bootstrap. So I created a button that calls a function javascript within the view Projects:

 <a data-toggle="modal"  class="btn btn-default btnDetalhes" data-value="@item.Codigo">Details</a>


$(document).ready(function () {
        $.ajaxSetup({ cache: false });
              var id = $(this).data("value");
                $(".btnDetalhes").click(function () {
                    $("#conteudomodal").load("/Documentos/DetalhePrj/" + id, function () {
                       $('#myModal').modal("show");
                });
            });
       });

And this function calls the modal Bootstrap:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" >
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div id="conteudomodal">

            </div>
        </div>
    </div>
</div>

and through the load("/Documentos/DetalhePrj/") calls the controller that returns a partial view DetalhePrj:

 public PartialViewResult DetalhePrj(int id)
    {
        string PRJCODIGO = id.ToString();         
        ClienteModels ClienteAtivo = (ClienteModels)Session["EmpresaAtiva"];
        PCIOSDIGITALSOAPClient soap = new PCIOSDIGITALSOAPClient();
        ProjetoModel projeto = new ProjetoModel();
        projeto.Codigo = PRJCODIGO;
        soap.Open();
        List<STRUCTPROJDETALHE> lista = soap.LSTDETALHEPRJ(projeto.Codigo, ClienteAtivo.Loja);
        List<DetalhePrjModel> model = new List<DetalhePrjModel>();


        foreach (STRUCTPROJDETALHE item in lista)
        {
            DetalhePrjModel document = new DetalhePrjModel();
            document.CodigoPrj = item.CODPRJ;
            document.Versao = item.VERPRJ;
            document.Coord = item.COORD;
            document.DescrPrj = item.DESPRJ;

            model.Add(document);
        }
        soap.Close();
        return PartialView("~/Views/Documentos/_DetalhePrj.cshtml", model);
    }

The problem is that by clicking on buttom it opens the Modal but does not bring any information/detail of the project (modal opens in white). It is as if I am not able to call the controller but I’ve already checked and I don’t know where I’m going wrong.

Does anyone know what it can be?

Now I’m trying to pass two values through buttom for javascript:

<a data-toggle="modal"  class="btn btn-default btnDetalhes" data-value="@item.Codigo" data-value2="@item.Versao">Details</a>


    $(document).ready(function () {

        $.ajaxSetup({ cache: false });             
                $(".btnDetalhes").click(function () {
                    var id = $(this).data("value");
                    var vers = $(this).data("value2");
                    $("#conteudomodal").load("DetalhePrj/" + id, + vers, 
                       function () {
                       $('#myModal').modal("show");
                });
            });
       });

Except that the variable vers is null, it is not pulling the value of buttom.. It is not possible to pass two values through a single buttom?

Answer 1

You declared the variable id that should receive the data-value of the details button outside the scope of the click event, so when using it to compose the url in the .load() it is undefined because the $(this).data("value") is not referring to the button. Simply position the statement in the correct location.

$(document).ready(function() {
  $.ajaxSetup({
    cache: false
  });
  //var id = $(this).data("value");
  $(".btnDetalhes").click(function() {
    var id = $(this).data("value");
    $("#conteudomodal").load("/Documentos/DetalhePrj/" + id, function() {
      $('#myModal').modal("show");
    });
  });
});