1

希望有人可以在这里帮助我,我已经寻找了几天的解决方案,但还没有找到。

我已经建立了一个带有 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>
4

1 回答 1

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>

第一个 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 () {
        $("#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>

第二个 iframe 页面:

<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>

第一个 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 () {
        $("#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>
于 2013-07-19T08:22:59.367 回答