3

Tenho o seguinte botão:

<button class="btn btn-default details" data-id="@fornecedores.Codigo"><i class="glyphicon glyphicon-file"></i></button>

Na mesma página tenho o seguinte script:

$(document).ready(function () {
    $(".details").click(function () {
        var id = $(this).attr("data-id");
        $("#modal").load("Detalhes?id=" + id, function () {
            $("modal").modal('show');
        })
    });
})

Quando dou o Click olha a mensagem que aparece: inserir a descrição da imagem aqui

Esse exemplo peguei nesse link: http://www.linhadecodigo.com.br/artigo/3686/aspnet-mvc-e-bootstrap-exibindo-views-modais.aspx

3 Respostas 3

3

Para funcionar você precisa dar o include do js do twitter bootstrap 3.

Como está usando Asp .Net MVC, pode usar bundle, no arquivo BundleConfig.cs você configura assim:

bundles.Add(new ScriptBundle("~/bundles/bootstrapjs").Include(
    "~/Scripts/bootstrap.min.js"));

bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include(
    "~/Content/bootstrap.min.css",
    "~/Content/bootstrap-responsive.min.css"));

Depois no seu html você chama os bundles criados assim:

@Styles.Render("~/Content/bootstrapcss")
@Scripts.Render("~/bundles/bootstrapjs")

Lembrando que os arquivos de css e js do bootstrap deverão estar nas pastas corretas, você pode colocá-los manualmente ou utilizar o NuGet.

Ou pode usar assim:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
3
  • Includes assim não são recomendados, sobretudo porque o ASP.NET MVC tem o próprio mecanismo de minificação. É melhor instalar por NuGet e usar o BundleConfig para minificar. 10/09/2015 às 19:34
  • Obrigado pela resposta, me ajudou muito... Tenho mais um problema relacionado a essa pergunta. Tenho uma <div> que carrega o meu modal. Quando dou get minha div está vazia, porém quando ocorre o evento click a <div> recebe as informações da modal, porém não aparece na tela.
    – user31040
    10/09/2015 às 20:12
  • Melhorei a resposta. 11/09/2015 às 10:08
2

O console diz que a função não foi definida porque modal() não é uma função nativa do Jquery, e sim do Bootstrap.js.

Logo, se você não tem o arquivo do bootstrap.js sendo chamado uma tag script,a função não vai existir.

3
  • 1
    Acho que seria interessante você dar este exemplo em código. O que acha? 10/09/2015 às 19:47
  • O script feito pelo J.C. está provavelmente correto (pelo menos em relação à chamada do modal está), o problema é que ele estava usando uma função da biblioteca bootstrap.js sem antes tê-la incluso em sua página. Ele poderia ter feito isso a chamando de uma CDN, como a maxcdn (<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"), de um arquivo local (ex: /js/bootstrap.min.js) ou por um gerenciador de pacotes (bower, NuGet, etc)
    – CarvBru
    10/09/2015 às 19:56
  • Não, não, você não entendeu. Eu te sugeri melhorar a resposta. Não comentar aqui. Coloque um exemplo usando a @section Scripts {}, e tal. 10/09/2015 às 20:00
0

inclua o arquivo do bootstrap, sem instanciá-lo ele n reconhece, caso haja conflito por causa de outras bibliotecas, não esqueça de usar o noConflict() do jQuery.

2
  • Perdão, mas não entendi...
    – user31040
    10/09/2015 às 23:16
  • 1
    se mesmo que vc tenha incluído os devidos arquivos .js, e caso exista outros, teste o noConflict do jQuery, pode ser, talvez, algum conflito : api.jquery.com/jquery.noconflict 11/09/2015 às 0:43

Você deve fazer log-in para responder a esta pergunta.