iframe外的asp.net数据源控制参数

时间：2013-07-18 16:15:34

标签： asp.net

希望有人能在这里帮助我，我一直在寻找解决方案几天但却找不到它。

我已经构建了一个包含2个iframe的页面，SelectCustomer打开了一个页面，其中下拉列表中包含客户名称和iframecontent，其中我通过单击链接加载页面。此页面有一个带参数的sqldatasource。我想引用此参数中的下拉列表来过滤选择查询，但我还没有找到一种方法来引用iframe“iframecontent”之外的下拉列表。

这是包含iframe的页面： 

<%@ Page Title="" Language="VB" MasterPageFile="~/Dashboard/Sales/Dashboard_Sales.master" AutoEventWireup="false" CodeFile="Index.aspx.vb" Inherits="Dashboard_Sales_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

  <!DOCTYPE HTML>
<html>
<head>

</head>
<body>

            <iframe
        name="SelectCustomer" 
        src="SelectDebiteur.aspx"
        align="top"
        frameborder="0"
        height="50"
        width="100%"
        marginheight="0"
        marginwidth="0"
        scrolling="auto">
    </iframe>
    <iframe
        name="iframecontent"
        height="500"
        width="100%">
                </iframe>

</body>
</html>
</asp:Content>

这是第一个iframe的页面： 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="SelectDebiteur.aspx.vb" Inherits="Dashboard_Sales_SelectDebiteur" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $("#DropDownList1").on("change", function () {
        // When the DropDownList selected value has been changed,
        // refresh the other iframed page changing its source
        // adding the value as its query string.
        $("#iframecontent", parent.document).attr("src", "Default.aspx?value=" + $(this).val());

        return true;
    });
});
</script>
</head>
<body>

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

    <asp:SqlDataSource ID="ListDebiteur" runat="server" ConnectionString="<%$ ConnectionStrings:FLOSConnectionString2 %>" SelectCommand="SELECT [aa-270].cddeb, [ba-001].naamorg AS Debiteur FROM [aa-270] INNER JOIN [ba-001] ON [aa-270].cdorg = [ba-001].cdorg ORDER BY Debiteur"></asp:SqlDataSource>
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="ListDebiteur" DataTextField="Debiteur" DataValueField="cddeb">
    </asp:DropDownList>

</div>
</form>
</body>
</html>

这是在第二个iframe中加载的页面： 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:SqlDataSource ID="ListCustomers" runat="server" ConnectionString="<%$ ConnectionStrings:FLOSConnectionString2 %>" SelectCommand="SELECT [aa-270].cddeb, [ba-001].naamorg AS Debiteur FROM [aa-270] INNER JOIN [ba-001] ON [aa-270].cdorg = [ba-001].cdorg ORDER BY Debiteur"></asp:SqlDataSource>
    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" DataSourceID="ListCustomers" DataTextField="Debiteur" DataValueField="cddeb">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:FLOSConnectionString2 %>" SelectCommand="SELECT [va-211].cdorg, [ba-001].naamorg, RTRIM(YEAR([va-211].[datum-lvoor])) + '-' + CASE WHEN RTRIM(MONTH([va-211].[datum-lvoor])) &lt; 10 THEN '0' + RTRIM(MONTH([va-211].[datum-lvoor])) ELSE RTRIM(MONTH([va-211].[datum-lvoor])) END AS Maand, SUM(CASE WHEN [va-211].cdstatus = 'O' THEN [va-211].aanttelev * ([va-211].prijs / [bb-063].prijsper) WHEN [va-211].cdstatus = 'A' THEN [va-211].aantgelev * ([va-211].prijs / [bb-063].prijsper) END) AS Omzet FROM [ba-001] INNER JOIN [va-211] ON [ba-001].cdorg = [va-211].cddeb LEFT OUTER JOIN [bb-063] ON [va-211].cdprodukt = [bb-063].cdprodukt WHERE ([bb-063].cdprijssrt = 'VERK') AND ([va-211].cdstatus = 'O' OR [va-211].cdstatus = 'A') GROUP BY [ba-001].naamorg, RTRIM(YEAR([va-211].[datum-lvoor])) + '-' + CASE WHEN RTRIM(MONTH([va-211].[datum-lvoor])) &lt; 10 THEN '0' + RTRIM(MONTH([va-211].[datum-lvoor])) ELSE RTRIM(MONTH([va-211].[datum-lvoor])) END, [va-211].cdorg HAVING (SUM(CASE WHEN [va-211].cdstatus = 'O' THEN [va-211].aanttelev * ([va-211].prijs / [bb-063].prijsper) WHEN [va-211].cdstatus = 'A' THEN [va-211].aantgelev * ([va-211].prijs / [bb-063].prijsper) END) &gt; 0) AND ([va-211].cdorg = @param1) ORDER BY Maand, [ba-001].naamorg">
    <SelectParameters>
        <asp:ControlParameter ControlID="DropDownList2" Name="param1" PropertyName="Text" DefaultValue="00000739" />
    </SelectParameters>
</asp:SqlDataSource>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1" EnableModelValidation="True" ForeColor="#333333" GridLines="None">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
            <asp:BoundField DataField="cdorg" HeaderText="cdorg" SortExpression="cdorg" />
            <asp:BoundField DataField="naamorg" HeaderText="naamorg" SortExpression="naamorg" />
            <asp:BoundField DataField="Maand" HeaderText="Maand" ReadOnly="True" SortExpression="Maand" />
            <asp:BoundField DataField="Omzet" HeaderText="Omzet" ReadOnly="True" SortExpression="Omzet" />
        </Columns>
        <EditRowStyle BackColor="#7C6F57" />
        <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#E3EAEB" />
        <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
    </asp:GridView>
</div>
</form>
</body>
</html>

这是页面后面的代码：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Dashboard_Sales_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
        DropDownList2.SelectedValue = Request.QueryString["value"];
}
}

新挑战：

<a href="javascript:openPage()" target="iframecontent">Omzet in portefeuille </a> </li>

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"         
type="text/javascript"></script>                
            <script type="text/javascript">

                openPage = $(function () {
                    location.href = "Default.aspx?value=" + $("#DropDownList1").val();
                });
</script>

1 个答案:

答案 0 :(得分：1)

其中一个解决方案是使用jQuery刷新第二个iframed页面，将DropDownList选择的值作为查询字符串发送（以简化操作）。

为了演示，我基本上更新了第二个iframed页面上的DropDownList，但您可以轻松地适应您的需求：

主页面（放置iframe的位置）： 

<iframe id="iframe1" width="500" height="200" src="WebForm1.aspx"></iframe>
<iframe id="iframe2" width="500" height="200" src="WebForm2.aspx"></iframe>

第一个iframed页面： 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#ddl1").on("change", function () {
            // When the DropDownList selected value has been changed,
            // refresh the other iframed page changing its source
            // adding the value as its query string.
            $("#iframe2", parent.document).attr("src", "WebForm2.aspx?value=" + $(this).val());

            return true;
        });
    });
</script>

<asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true">
    <asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
    <asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
</asp:DropDownList>

第二个iframed页面： 

<asp:DropDownList ID="ddl2" runat="server" AutoPostBack="true">
    <asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
    <asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
</asp:DropDownList>

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
        ddl2.SelectedValue = Request.QueryString["value"];
}

<强>更新

关于您在评论中发布的问题，您可以通过这种方式找到第二页iframe的src（并随后更改）：

$("#iframe2", parent.document).attr("src", $("#iframe2", parent.document).attr("src") + "?value=" + $(this).val());

更新＃2

根据您的要求，您希望在页面加载时动态加载iframe源代码。 这就是你如何做到这一点：

主页面（放置iframe的位置）： 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#iframe2").attr("src", "the-page-you-want-to-load-on-this-iframe");
    });
</script>
<iframe id="iframe1" width="500" height="200" src="WebForm1.aspx"></iframe>
<iframe id="iframe2" width="500" height="200"></iframe>

第一个iframed页面： 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#ddl1").on("change", function () {
            var iframe2BaseSrc = $("#iframe2", parent.document).attr("src");

            if (iframe2BaseSrc) {
                iframe2BaseSrc = iframe2BaseSrc.split("?")[0];

                $("#iframe2", parent.document).attr("src", iframe2BaseSrc + "?value=" + $(this).val());
            }
            return true;
        });
    });
</script>
相关问题
最新问题