具有Bootstrap和部分视图的动态模态(asp.net)

时间:2014-01-09 13:47:23

标签: c# jquery asp.net twitter-bootstrap modal-dialog

/ ****已解决**** /

我曾尝试使用模式的bootstrap脚本创建一个带有部分视图结果的动态模态,但是我没有成功。这不等于12中的问题。

这是我的html PartialView(简单模态模式)

@model Dictionary<int?, Tuple<string,string>>

<div class="modal fade" id="@ViewBag.IdModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Selecione o item desejado</h4>
  </div>
  <div class="modal-body">
      <table id="tabPesquisa" class="table table-condensed">
          <thead>
              <tr><th>Código</th><th>Descrição</th></tr>
          </thead>
          <tbody>
              @foreach (KeyValuePair<int?,Tuple<string,string>> item in Model)
              {
                var valores = item.Value;
                <tr data-idreg="@item.Key"><td>@valores.Item1</td>  <td>@valores.Item2</td></tr>
              }
          </tbody>
      </table>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
    <button type="button" class="btn btn-primary" id="btnSelecao"><span class="glyphicon glyphicon-check"></span> Pronto!</button>
  </div>
</div><!-- /.modal-content -->

它是一个通用视图,可动态接收各种数据。 (明显) 在我的主html上,我有更多按钮来获取局部视图的不同数据。示例:

<button class="btn btn-primary" data-toggle="modal" data-target="#modalLayout" data-inputs="#hdnIdLayout,#txtCodLayout,#txtDescLayout" data-urlsearch="@Url.Action("ListaPesquisar", "Exame")"><span class="glyphicon glyphicon-search"></span></button>

在我的主要javascript文件中,我有代码:

Sistema.AbrirModal = function (urlSearch, target, fields) {
    var arrayFields = fields.split(",");
    var target = target.slice(1, target.length);
    var objModal;
    $.get(urlSearch, { idModal: target }, function (data) {
        objModal = $.parseHTML(data);
        console.log(objModal);
        $("body").append(objModal);
        $(objModal).modal(); //ERROR: Uncaught TypeError: Object [object Object] has no method 'modal'
    });
};

$(document).ready(function () {
    if($('[data-toggle="modal"]').length > 0) {
        $('[data-toggle="modal"]').on("click", function () {            
            var target = $(this).data("target"); //#modalLayout" 
            var fields = $(this).data("fields"); //#htnIdLayout,#txtCodLayout,#txtDescLayout" 
            var urlSearch = $(this).data("urlsearch")//"@Url.Action("ListaPesquisar", "Exame")"
            Sistema.AbrirModal(urlSearch, target, fields);
        });
    }
}

好吧,如果我使用$(objModal).modal([show,hide,none]);得到一个错误(在上面的行中注释),如果不使用它,什么都不会发生。 有没有人知道如何解决这个问题所以我不需要为我的主页上的每个模态窗口创建几个?

谢谢大家。

0 个答案:

没有答案