Question

我正在使用jquery UI模式弹出窗口来显示用户登录表单。该脚本在表单周围添加了html元素以构建弹出窗口。

当我提交登录表单时 - 后面的代码中的文本框似乎是空的，即使我已在其中输入了值。

我认为这是因为输入从它呈现的原始位置移开，因此代码以某种方式验证请求。

问题是：有没有办法让价值通过任何方式？或者禁用此验证？

代码示例：

HTML：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UI-login.aspx.cs" Inherits="tests_UI_login" %>

<!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">
    <script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="/js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
    <link href="/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />

    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
    Sys.Application.add_load(function (sender, args) {

                    // Dialog       
                    $('#loginDialog').dialog({
                        autoOpen: true,
                        width: 600,
                        resizable: false,
                        modal: true,
                        show: 'slide',
                        hide: 'slide'


                    });})
    </script>
    <div id="loginDialog">
        <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
        <asp:LinkButton ID="btnLogin" runat="server" onclick="btnLogin_Click1">Login</asp:LinkButton>
    </div>
    </form>
</body>
</html>

C＃：

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

    }

    protected void btnLogin_Click1(object sender, EventArgs e)
    {
        string email = txtEmail.Text; //Here the value is empty
    }
}

Answer 1

要获取代码中输入的值并通过服务器控件机制（textBox.Text）访问它们，它们的状态（和状态）需要在ViewState中保留。由于您使用javascript构建它们，它们的状态不会持久化，因此获取其值的唯一方法是使用Request.Form集合。

像往常一样，发布相关代码可能会产生更具体的答案。

Answer 2

实际上有几个问题，最快的解决方案是使用现有的插件，例如jQuery Form Plugin。

Answer 3

<body>


<div id="loginDialog">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

        <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
        <asp:LinkButton ID="btnLogin" runat="server" onclick="btnLogin_Click1">Login</asp:LinkButton>

    </form>
    <script type="text/javascript">
        Sys.Application.add_load(function (sender, args) {

            // Dialog       
            $('#loginDialog').dialog({
                autoOpen: true,
                width: 600,
                resizable: false,
                modal: true,
                show: 'slide',
                hide: 'slide'


            });
        })
</script>
    </div>
</body>

我做了类似上面的工作。我在对话框中保留了form1。

Answer 4

我找到了解决方案。只需将对话框添加到表单即可。

请参阅http://labs.kaliko.com/2011/08/jquery-ui-dialog-aspnet-postback.html

更新1：

为了让所有人满意，解决方案是将模态注册到表单中：

var myDialog = jQuery("#myDialog").dialog({ width: 480, height: 400 });
myDialog.parent().appendTo(jQuery("form:first"));

回发输入为空白

4 个答案: