Modal Bootstrap and MVC C #

Question

Modal Bootstrap and MVC C #

Navigation

#1 by (0 votes)

1

Personal I have a view called Projects that brings a list of projects and I need to visualize the information / detail of each project through a Bootstrap modal. So I created a button that calls a javascript function within 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 load("/Documentos/DetalhePrj/") call controller which returns 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's like I'm not being able to call controller but I've already reviewed and I do not know where I'm going wrong.

Does anyone know what it can be?

Now I'm trying to pass two values through the buttom to the 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");
                });
            });
       });

Only the variable vers is null, it is not pulling the buttom value. Can not pass two values through a single buttom?

c# mvc bootstrap

asked by anonymous 20.02.2018 / 15:20

1 answer

How to save Console Application data using EntityFramework how to get the word of the clicked link and send it to the page that the link sends

score 0 · Answer 1

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

$(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");
    });
  });
});