net中的弹出框问题

来源：互联网发布：淘宝二手店铺怎么开编辑：程序博客网时间：2024/06/06 07:32

12月8日，总结下。

asp.net中又一个窗体页面，打开的时候显示一个数据库的某张表中会员的名字,每行自动显示三列，点击右边的“X”可以删除该条会员信息。

关键点：在asp.net中从一个窗体中弹出另外一个窗体，在父窗体中要引用两个js文件和一个css样式表文件，

点击某个点击按钮，响应以下js函数

function showDialogue() {
            var haha = "<div title='添加会员信息'><iframe style='width:200px;height:200px;' frameborder='0' scrolling='no' src='/2012-12-6/Dialogue2.aspx'></iframe></div>";
             user_Win = $(haha).dialog(
                {
                    width: 300,
                    height: 300,
                    resizable: false,
                    modal: true
                }
            );

}

就会以窗体的形式弹出子页面。如果在子窗体的某个按钮点击后想关闭此子窗体，可以写 window.parent.user_Win.dialog('close')

一共三个页面。2.aspx页面如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>显示信息</title>
    <script type ="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
    <script type ="text/javascript" src="../Scripts/jQueryUI/jquery-ui.js"></script>
    <link rel="Stylesheet" type ="text/css" href="../Scripts/jQueryUI/jquery-ui.css" />
    <style type ="text/css">
    .item{width:200px;height:40px;overflow:hidden;float:left;}
    .item a{line-height:40px;font-size:15px;text-decoration:none;}
    .clear-float{height:0px;line-height:0px;overflow:hidden;visibility:hidden;clear:both;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style ="width :800px;margin:0 auto;border:1px solid red;" id="divHold">
        <asp:Repeater runat ="server" ID ="rptHold">
           <ItemTemplate >
                <div class ="item"> <a href ="javascript:void(0);"><%# Eval ("name") %></a>
            <a href ="javascript:void(0);" onclick ="ifDelete(this,'<%#Eval("id") %>')" style ="color :Red ;font-size:15px;"><%# Eval("name") == null?string .Empty:"X" %></a></div>
           </ItemTemplate>
        </asp:Repeater>

    </div>
    <div style ="width:800px;margin:0 auto;text-align:center ;">
    <input type ="button" value ="敲吧敲吧" onclick="showDialogue()"/>
    </div>
    </form>
    <script type ="text/javascript" >
        function showDialogue() {
            var haha = "<div title='添加会员信息'><iframe style='width:200px;height:200px;' frameborder='0' scrolling='no' src='/2012-12-6/Dialogue2.aspx'></iframe></div>";
             user_Win = $(haha).dialog(
                {
                    width: 300,
                    height: 300,
                    resizable: false,
                    modal: true
                }
            );

            }
            function ifDelete(ele,id) {
                if (confirm ("确定要删除该会员吗？")) {
                    $.ajax({
                        dataType: "text",
                        type: "post",
                        url: "Ajax2.ashx",
                        data: { action: "delete", deleteId: id },
                        success: function (data) {
                            if (data == "1") {
                                alert("删除成功！");
                                $(ele).parent().remove();
                            }
                            else {
                                alert("删除失败！");
                            }
                        }
                    });
                }
            }
    </script>
</body>
</html>

页面代码如下：
     protected void Page_Load(object sender, EventArgs e)
        {
            DataTable table = new ForTest._2012_10_25.SqlHelper().GetTable("select * from dbo.TestJubushuaxin");
            rptHold.DataSource = table;
            rptHold.DataBind();
        }

弹出框窗体Dialogue.aspx页面如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>55</title>
      <script type ="text/javascript" >
          //字符串格式化
          String.prototype.format = function () {
              var args = arguments;
              var result = this.replace(/\{(\d+)\}/g, function ($0, $1) { return args[parseInt($1)]; });
              return result;
          }
          function closeWin() {
              //alert("你好");
              var need = window.parent.document.getElementById("divHold");
              if (need ) {
                  var needJson = eval("(" + document.getElementById("hidValue").value + ")");
                  var html = '\
            <div class ="item"> <a href ="javascript:void(0);">{0}</a>\
            <a href ="javascript:void(0);" onclick ="ifDelete(this,\'{1}\')" style ="color :Red ;font-size:15px;">X</a></div>';
                  var newHtml = html.format(needJson.name, needJson.id);
                  //alert(newHtml);
                  need.innerHTML = need.innerHTML + newHtml;
                  window.parent.user_Win.dialog('close');
              }

          }

      </script>
</head>
<body style="width:200px;height:200px;">
    <form id="form1" runat="server">
    <input type ="hidden" runat ="server" id ="hidValue" />
    <div style="width:300px;height:200px;margin:0 auto;">

     姓名：<input type ="text" runat ="server" id="name" /><br /><br /><br />
     爱好:<input type ="text" runat ='server' id ="hobby" /><br /><br />
     <asp:Button runat ="server" ID ="btnOk" Text ="敲吧敲吧" onclick="btnOk_Click" />
    </div>
    </form>

</body>
</html>

页面代码如下：

public partial class Dialogue2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

}

        protected void btnOk_Click(object sender, EventArgs e)
        {
            if (string .IsNullOrEmpty (name .Value .Trim ()))
            {
                this.ClientScript.RegisterStartupScript(Page.GetType(), "key", "<script>alert('姓名不能为空！');</script>");
                return;
            }
            if (string.IsNullOrEmpty(hobby . Value.Trim()))
            {
                this.ClientScript.RegisterStartupScript(Page.GetType(), "key", "<script>alert('爱好不能为空！');</script>");
                return;
            }
            string sql = string.Format("insert into TestJubushuaxin values('{0}','{1}')",name .Value ,hobby.Value );
            int index=   new SqlHelper().Insert(sql);
            if (index !=-1)
            {
               // Response.Write("<script>alert('添加成功！');closeWin();</script>");
               this.ClientScript.RegisterStartupScript(Page.GetType(), "key", "<script>alert('添加成功！');closeWin();</script>");
                hidValue.Value = string.Format("{{id:'{0}',name:'{1}'}}",index ,name .Value );
            }
            else
            {
                this.ClientScript.RegisterStartupScript(Page.GetType(), "key", "<script>alert('添加失败！');</script>");
            }
        }

另外在删除个人信息的时候用到了一般处理程序页面Ajax2.ashx.代码如下：

/// <summary>
    /// Ajax2 的摘要说明
    /// </summary>
    public class Ajax2 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string result = null;
            if (context .Request .Form ["action"]=="delete")
            {
                string id = context.Request.Form["deleteId"];
             bool m=   new SqlHelper().Delete (string.Format("delete from TestJubushuaxin where id='{0}'",id ));
             if (m)
             {
                 result = "1";
             }
            }
            context.Response.Write(result );
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }