高手赐教：GridView中链接打开模态框（Modal）问题！急！bootstrap的模态框

huangjun2008 2015-03-23 01:41:56

在开发项目时用bootstrap效果不错，效率也挺高。现在碰到一个比较烦人的问题，始终不得其解，望坛子的朋友一起研究帮忙解决，我觉得也很实用。
目标：bootstrap提供了一个非常方便的模态框效果，调用也非常方便，只要在<a>标签内加 href="#myModal"即可，我想实现的就是在GridView中链接打开模态框，显示具体内容，这样可以在一个页面中实现了。
问题：在GridView中创建了<a>链接，但id 的值传不出去了，考虑用 href 和 onclick 同时使用，也就是说 href="#myModal"让模态框显示，onclick将显示具体内容的Repeater重新绑定数据，但onclick事件后台没有处理。希望高手能帮忙解决指导，万分感谢！



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link rel="stylesheet" href="../css/bootstrap.css">

    <link rel="stylesheet" href="../css/font-awesome.css"> 

    <link rel="stylesheet" href="../css/new_style.css">

    <link rel="stylesheet" href="../css/buttons.css" />

    <link href="../ueditor/themes/default/ueditor.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>

    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>

    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

    <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

</head>

<body>

    <form id="form1" runat="server">



        

 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

  模态框按钮

</button>



<!-- Modal -->

<div class="modal fade" id="myModal" 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-label="Close"><span aria-hidden="true">×</span></button>

        <h4 class="modal-title" id="myModalLabel">Modal title标题</h4>

      </div>

      <div class="modal-body">

          内容

        <asp:Repeater ID="Repeater1" runat="server" >

          <ItemTemplate>



              <%#Eval("title") %><br />

              <%#Eval("pk_content") %>

          </ItemTemplate>



        </asp:Repeater>

        

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>

<!--END Modal -->





    <div>

        

         <asp:GridView ID="GridView1"  runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1" EnableModelValidation="True">

            <Columns>

                <asp:TemplateField>

                <ItemTemplate>

                     <a  data-toggle="modal" href='test.aspx?id=<%# Eval("id") %>#myModal'><%# Eval("title") %></a>

                </ItemTemplate>

                    </asp:TemplateField>

            </Columns>

        </asp:GridView>

      

    </div>

     </form>

          <script src="../js/jquery.min.js"></script>

    <script src="../js/bootstrap.min.js"></script>

</body>

</html>

效果地址：
http://www.psjying.pudong-edu.sh.cn/yz_admin/tea_admin/test.aspx

...全文

393 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

huangjun2008 2015-03-26

打赏
举报

方向我很明确了通过<linkbutton>的 onclick 执行 js 代码，就是不知道如何实现！！急盼！

huangjun2008 2015-03-26

打赏
举报

<asp:LinkButton OnClick="OpenDetailsInfo();" data-target="#myModal" data-toggle="madal"><%# Eval("title").ToString()%></asp:LinkButton> ***** <script type="text/javascript"> //如何写获取ID，并tset..aspx?id= //谢谢 </script> *****CS protected void Page_Load(object sender, EventArgs e) { //如何获取javascript传来的值， //谢谢！ }

huangjun2008 2015-03-26

打赏
举报

还是不太明白。如何在 java script 中获取Gridview中 <%# Eval("id") %>的数据呢？能帮我写完整吗？把OpenDetailsInfo();方法写一下，谢谢！就是先获取gridview 中字段 id 的值，然后返回给页面 test.aspx，谢谢！也就是 test.aspx?id=<%# Eval("id") %>在 java script 中OpenDetailsInfo();方法写一下。成功后再感谢！这个问题等了很久了，我是菜鸟见谅！

蝶恋花雨 2015-03-26

打赏
举报

  var search = $("#txtFactroy").val() ;
    $.ajax({
        type: "post",
        url: "ResponseHandler.ashx",
        data: "SearchDetailsInfo=" + search ,
        datatype: "json",
        async: false,
        success: function (returnData, textstatus, xmlhttprequest) {
            $("#divShowDetailsInfo").html(returnData.split('_')[0]);
        },
        error: function () {
            $.msgbox("<span style='font-size:14px;line-height:30px;'>获取明细数据请求错误。</span>", { type: "error", buttons: [
                { type: "submit", value: "确定" }
            ]});
        }
    });
    	public void ProcessRequest(HttpContext context)
		{
			context.Response.ContentType = "text/plain";
    	if (!string.IsNullOrEmpty(context.Request["SearchDetailsInfo"]) )
			{
				//执行一些数据操作即可
			}
			}

huangjun2008 2015-03-26

打赏
举报

谢谢！3楼，能将OpenDetailsInfo使用jquery psot 把数据传递给后台的代码发给我一下吗？万分感谢！我只要传一个值ID，或则给我个示例代码！对 jquery 一点不懂，谢谢！

蝶恋花雨 2015-03-25

打赏
举报

<input type='button' class='btn btn-primary' onclick='OpenDetailsInfo();' data-target="#anim-modal" data-toggle="modal" value='查看明细' /> 你可以把button改成 linkbutton　来使用你可以在OpenDetailsInfo使用jquery psot 把数据传递给后台。 <div id="anim-modal" class="modal fade hide" data-backdrop="static" > </div> 就可以实现效果了

huangjun2008 2015-03-25