父页面包括带有 AsyncFileUpload 的 iframe 表单。重定向到“_top”上传并点击“发送”后

发布于 2024-11-06 09:25:43 字数 3629 浏览 5 评论 0原文

我有一个包含 iframe 的父页面(testFrame.aspx)

iframe 是一个带有 AsyncFileUpload 控件 (ajaxcontroltoolkit) 的 aspx 表单(form.aspx)
该表单包含一个文本框和一个必填字段验证器。
bt_Send 代码隐藏中,我检查用户是否在文本框中输入了文本,如果没有,我会显示一条错误消息。

现在,如果我测试我的父表单并输入文本并单击“发送”,我会看到我的反馈消息(我在文本框中输入的文本)。
如果我不输入文本并单击“发送”,则会收到错误消息。

现在发生了奇怪的事情:如果我不输入文本,但我使用 AsyncFileUpload 上传文件。
我单击“发送”,但没有收到错误消息,我被重定向到父页面之外的 form.aspx(如 target="_top"),没有错误消息。我只在 iframe 中看到干净的表单。

我不想这样。我希望表单保留在我的父页面中

testForm.aspx 看起来像这样:

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    This is a container page. The following is inside an iframe:
    <br />

    <iframe src="form.aspx" width="800px" height="400px"></iframe>
    </div>
    </form>
</body>
</html>

form.aspx 看起来像这样:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="form.aspx.cs" Inherits="TestToolkit.form" %>

<%@ 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 id="Head1" runat="server">
    <title>Test Form</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblFirstName" runat="server" Text="First Name"></asp:Label>&nbsp;&nbsp;
        <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>

        <br /><br />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        Upload picture: <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" ClientIDMode="AutoID" />

            <div id="uploadOk" style="position: relative; left: 330px; bottom: 40px; width:0px; height:0px; display: none;"><asp:Image ID="imgOk" ImageUrl="_img/check-mark-40.png" runat="server" style="" AlternateText="Erledigt!" /></div>

        <br /><br />
        <asp:Button ID="btSend" runat="server" onclick="btSend_Click" Text="Send" />
        <br /><br />
        <asp:Label ID="lblFeedback" runat="server"></asp:Label>
&nbsp;<asp:RequiredFieldValidator runat="server" ID="rfvFirstName" ControlToValidate="txtFirstName" Display="None" EnableClientScript="false" />
    </div>
    </form>
</body>
</html>

form.aspx.cs 背后的代码:

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

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

        protected void btSend_Click(object sender, EventArgs e)
        {
            //ShowOrRemoveErrors();

            if (IsValid)
            {
                lblFeedback.Text = txtFirstName.Text;
            }
            else
            {
                lblFeedback.Text = "Please enter your name";
            }
        }
    }
}

I have a parent page (testFrame.aspx) including an iframe.

The iframe is an aspx form (form.aspx) with an AsyncFileUpload control (ajaxcontroltoolkit).
The form contains a textbox and a required field validator.
In the bt_Send Codebehind, I check if the user entered a text in the text box and if not I show an error message.

Now, if I test my parent form and I enter a text and click "send" I see my feedback message (the text I entered in the textbox).
If I don't enter a text, and I click send, I get the error message.

The weird thing happens now: if I don't enter a text but I upload a file with the AsyncFileUpload.
I click "send" and instead of getting the error message, I'm redirected to form.aspx outside my parent page (like target="_top"), without error message. I just see the clean form not anymore in my iframe.

I don't want that. I want the form to stay inside my parent page

testForm.aspx looks like this:

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    This is a container page. The following is inside an iframe:
    <br />

    <iframe src="form.aspx" width="800px" height="400px"></iframe>
    </div>
    </form>
</body>
</html>

form.aspx looks like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="form.aspx.cs" Inherits="TestToolkit.form" %>

<%@ 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 id="Head1" runat="server">
    <title>Test Form</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblFirstName" runat="server" Text="First Name"></asp:Label>  
        <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>

        <br /><br />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        Upload picture: <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" ClientIDMode="AutoID" />

            <div id="uploadOk" style="position: relative; left: 330px; bottom: 40px; width:0px; height:0px; display: none;"><asp:Image ID="imgOk" ImageUrl="_img/check-mark-40.png" runat="server" style="" AlternateText="Erledigt!" /></div>

        <br /><br />
        <asp:Button ID="btSend" runat="server" onclick="btSend_Click" Text="Send" />
        <br /><br />
        <asp:Label ID="lblFeedback" runat="server"></asp:Label>
 <asp:RequiredFieldValidator runat="server" ID="rfvFirstName" ControlToValidate="txtFirstName" Display="None" EnableClientScript="false" />
    </div>
    </form>
</body>
</html>

and the code behind form.aspx.cs:

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

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

        protected void btSend_Click(object sender, EventArgs e)
        {
            //ShowOrRemoveErrors();

            if (IsValid)
            {
                lblFeedback.Text = txtFirstName.Text;
            }
            else
            {
                lblFeedback.Text = "Please enter your name";
            }
        }
    }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

方觉久 2024-11-13 09:25:43

好吧,我想我找到了问题的答案。

如果上传文件并且字段无效(或必填字段没有文本),就会出现问题。

问题出现在回发上。因此,我所做的是使用 EnableClientScript="true" 实现客户端验证:

<asp:RequiredFieldValidator runat="server" ID="rfvFirstName" ControlToValidate="txtFirstName" Display="None" EnableClientScript="true" />

使用客户端验证,除非正确填写所有必填字段,否则不会进行回发。

希望这可以帮助解决我同样问题的人。

Well I guess I found the answer to my question.

The problem comes if a file was uploaded AND the fields are not valid (or required fields have no text).

The problem comes on postback. So what I did is to implement a client side validation using EnableClientScript="true":

<asp:RequiredFieldValidator runat="server" ID="rfvFirstName" ControlToValidate="txtFirstName" Display="None" EnableClientScript="true" />

With client side validation there is no postback unless all my required fields are filled correctly.

Hope this helps people with my same problem.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文