关于ModalPopupExtender&GridView1&FormView组合在一起使用的问题

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UItest.aspx.cs" Inherits="UI_test.UItest"
    EnableEventValidation="false" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
        .modalPopup
        {
            background-color: #ffffdd;
            border-width: 3px;
            border-style: solid;
            border-color: Gray;
            padding: 3px;
            width: 350px;
        }
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
    </style>
</head><script type="text/javascript">function ok(sender, e)
{
    $find('ModalPopupExtender1').hide();
    __doPostBack('editBox_OK', e);
}function cancel(sender, e)
{
    $find('ModalPopupExtender1').hide();
}function pageLoad(sender, args)
{
    $addHandler(document, "keydown", onKeyDown);
    $find("ModalPopupExtender1").add_showing(onModalShowing);
}
function onModalShowing(sender, args)
{
    $get("pnlEditCustomer").style.backgroundColor = "yellow";
}function onKeyDown(args)
{
    if(args.keyCode == Sys.UI.Key.esc)
    {
        $find('ModalPopupExtender1').hide();
    }
}
</script><body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:testConnectionString %>"
        SelectCommand="SELECT * FROM [ss]" DeleteCommand="DELETE FROM [ss] WHERE [ID] = @ID"
        InsertCommand="INSERT INTO [ss] ([Num], [Proid], [Price]) VALUES (@Num, @Proid, @Price)"
        UpdateCommand="UPDATE [ss] SET [Num] = @Num, [Proid] = @Proid, [Price] = @Price WHERE [ID] = @ID">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32" />
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="Num" Type="Int32" />
            <asp:Parameter Name="Proid" Type="String" />
            <asp:Parameter Name="Price" Type="String" />
            <asp:Parameter Name="ID" Type="Int32" />
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="Num" Type="Int32" />
            <asp:Parameter Name="Proid" Type="String" />
            <asp:Parameter Name="Price" Type="String" />
        </InsertParameters>
    </asp:SqlDataSource>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
                DataSourceID="SqlDataSource1" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound"
                AllowPaging="True" PageSize="5">
                <Columns>
                    <asp:TemplateField ShowHeader="false">
                        <ItemTemplate>
                            <asp:Button ID="btnEidt" runat="server" CausesValidation="false" CommandName="Edit"
                                Text="编辑" />
                            <asp:Button ID="btnDelete" runat="server" CausesValidation="false" CommandName="Delete"
                                Text="删除" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"
                        SortExpression="ID" />
                    <asp:BoundField DataField="Num" HeaderText="Num" SortExpression="Num" />
                    <asp:BoundField DataField="Proid" HeaderText="Proid" SortExpression="Proid" />
                    <asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />
                </Columns>
            </asp:GridView>
            <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
            <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="hiddenTargetControlForModalPopup"
                PopupControlID="pnlEditCustomer" BackgroundCssClass="modalBackground" DropShadow="false">
            </asp:ModalPopupExtender>
            
            <asp:Panel ID="pnlEditCustomer" runat="server" CssClass="modalPopup" Style="display: none">
                <asp:FormView ID="FormView1" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1">
                    <EditItemTemplate>
                        ID:
                        <asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' />
                        <br />
                        Num:
                        <asp:TextBox ID="NumTextBox" runat="server" Text='<%# Bind("Num") %>' />
                        <br />
                        Proid:
                        <asp:TextBox ID="ProidTextBox" runat="server" Text='<%# Bind("Proid") %>' />
                        <br />
                        Price:
                        <asp:TextBox ID="PriceTextBox" runat="server" Text='<%# Bind("Price") %>' />
                        <br />
                        <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
                            Text="更新" />
                         <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False"
                            CommandName="Cancel" Text="取消" />
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        Num:
                        <asp:TextBox ID="NumTextBox" runat="server" Text='<%# Bind("Num") %>' />
                        <br />
                        Proid:
                        <asp:TextBox ID="ProidTextBox" runat="server" Text='<%# Bind("Proid") %>' />
                        <br />
                        Price:
                        <asp:TextBox ID="PriceTextBox" runat="server" Text='<%# Bind("Price") %>' />
                        <br />
                        <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
                            Text="插入" />
                         <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False"
                            CommandName="Cancel" Text="取消" />
                    </InsertItemTemplate>
                    <ItemTemplate>
                        ID:
                        <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
                        <br />
                        Num:
                        <asp:Label ID="NumLabel" runat="server" Text='<%# Bind("Num") %>' />
                        <br />
                        Proid:
                        <asp:Label ID="ProidLabel" runat="server" Text='<%# Bind("Proid") %>' />
                        <br />
                        Price:
                        <asp:Label ID="PriceLabel" runat="server" Text='<%# Bind("Price") %>' />
                        <br />
                    </ItemTemplate>
                </asp:FormView>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;namespace UI_test
{
    public partial class UItest : System.Web.UI.Page
    {        protected void Page_Load(object sender, EventArgs e)
        {

        }        protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            string cmdName=e.CommandName;
            int iEditIndex;
            if (cmdName=="Edit")
            {
                iEditIndex = GetEditIndex(GridView1, Convert.ToInt32(e.CommandArgument));
                FormView1.PageIndex = iEditIndex;
                FormView1.ChangeMode(FormViewMode.Edit);
                UpdatePanel1.Update();
                //pnlEditCustomer.Style.Value = "display:block";
                ModalPopupExtender1.Show();
                //GridView1.Visible = false;

            }
        }
        protected int GetEditIndex(GridView gridview, int rowIndex)
        {
            int iEditIndex;
            if (gridview.AllowPaging)
            {
                iEditIndex = (gridview.PageIndex) * gridview.PageSize + rowIndex;
            }
            else
            {
                iEditIndex = rowIndex;
            }
            return iEditIndex;
        }        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            Button oButton;
            if (e.Row.RowType==DataControlRowType.DataRow)
            {
                oButton = (Button)e.Row.Cells[0].FindControl("btnEidt");
                oButton.CommandArgument = e.Row.RowIndex.ToString();
            }
        }
    }
}

没看懂。。你香点击那个编辑里面的值在textbox里填充吗？

我需要的效果是formview弹出来而背景色是透明的且只有formview这个控件能够操作,其他控件暂时不能操作,只有等单击formview的更新或者取消弹出层就会消失

这个简单
jquery遮罩就可以了。jQuery boxy
这个比较简单好用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
//显示灰色JS遮罩层
function showBg(ct,content){
var bH=$("body").height();
var bW=$("body").width()+16;
var objWH=getObjWh(ct);
$("#fullbg").css({width:bW,height:bH,display:"block"});
var tbT=objWH.split("|")[0]+"px";
var tbL=objWH.split("|")[1]+"px";
$("#"+ct).css({top:tbT,left:tbL,display:"block"});
$("#"+content).html("<div style='text-align:center'>正在加载，请稍后...</div>");
$(window).scroll(function(){resetBg()});
$(window).resize(function(){resetBg()});
}
function getObjWh(obj){
var st=document.documentElement.scrollTop;//滚动条距顶部的距离
var sl=document.documentElement.scrollLeft;//滚动条距左边的距离
var ch=document.documentElement.clientHeight;//屏幕的高度
var cw=document.documentElement.clientWidth;//屏幕的宽度
var objH=$("#"+obj).height();//浮动对象的高度
var objW=$("#"+obj).width();//浮动对象的宽度
var objT=Number(st)+(Number(ch)-Number(objH))/2;
var objL=Number(sl)+(Number(cw)-Number(objW))/2;
return objT+"|"+objL;
}
function resetBg(){
var fullbg=$("#fullbg").css("display");
if(fullbg=="block"){
var bH2=$("body").height();
var bW2=$("body").width()+16;
$("#fullbg").css({width:bW2,height:bH2});
var objV=getObjWh("dialog");
var tbT=objV.split("|")[0]+"px";
var tbL=objV.split("|")[1]+"px";
$("#dialog").css({top:tbT,left:tbL});
}
}//关闭灰色JS遮罩层和操作窗口
function closeBg(){
$("#fullbg").css("display","none");
$("#dialog").css("display","none");
}</script>
<style type="text/css">
*{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#fullbg{
background-color: Gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}#dialog {
position:absolute;
width:200px;
height:200px;
background:#F00;
display: none;
z-index: 5;
}#main {
height: 1500px;
}
</style>
</head>
<body>
<div id="main">
<a href="#rhis" onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a>
</div>

<div id="fullbg"></div>


<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align: center;"><a href="#" onclick="closeBg();">关闭</a></div>
</div>

</body>
</html>

除了jquery外就没有别的方法了吗? 我贴的代码是我从MS上Down来例子改编的

调试易

关于ModalPopupExtender&GridView1&FormView组合在一起使用的问题

解决方案 »