将jquery ui对话框实现为.net形式答案

【问题标题】：implementing jquery ui dialog into .net form将jquery ui对话框实现为.net形式
【发布时间】：2015-05-07 16:34:11
【问题描述】：

我在 .net 表单上使用开箱即用的 JQuery UI Dialog 实现：

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

         <asp:Button ID="btnTest" runat="server" Text="Open Me" 
             onclick="btnTest_Click" />
<div id="dialog" title="Dialog Title">I'm a dialog</div>

<script>
    $("#dialog").dialog(
        { autoOpen: false });
    $("#btnTest").click(function () {
        $("#dialog").dialog("open");
    });
</script>  
    </form>

我有两个问题。首先，我希望对话框的内容依赖于在代码隐藏中处理按钮单击事件后发生的一些逻辑。我该怎么做？

其次，只是在演示模式下测试它，触发对话但立即关闭它。我假设它与 e.preventDefault() 有关，或者这就是我读过的内容，但我不确定如果我将它绑定在表单回发后运行，这将如何影响。

【问题讨论】：

你使用的是asp:Button，所以在click函数里面尝试在这行代码后面加上return false $("#dialog").dialog("open");并且“在代码隐藏中处理按钮单击事件后发生的一些逻辑”意味着如果您想获取数据，那么您可以使用 ajax post。

标签： c# jquery asp.net .net jquery-ui

【解决方案1】：

要调用服务器，您需要进行 Ajax 调用以获取需要显示的数据：

 $('#dialog').dialog({
        autoOpen : false,
        width : 500,
        height : 400,
        resizable : true,
        modal : true,
        open : function()
        {
            jQuery.ajax({
                type : "POST",
                url : //"post Url ex. Default.aspx/OpenDialog",
                data ://data to send to the server,
                dataType://the data type,

成功：函数（响应） { $('#dialog').html(响应);

                },
                error : function(xhr, ajaxOptions, thrownError)
                {
                    alert("Error: " + thrownError + "Status: " + xhr.status);
                }
            });
        },
        buttons : {
            "Close" : function()
            {
                $(this).dialog("close");
            }
        }
    });

在你的按钮点击你会做：

$("#btnTest").click(function () {
        $("#dialog").dialog("open");
   });

【讨论】：

【解决方案2】：

我们可以在按钮点击事件后面的代码中使用 ScriptManager.RegisterStartupScript。然后我们就可以在aspx页面中添加一个javascript函数，这个函数实际上是有对话逻辑的。

ScriptManager.RegisterStartupScript(this, GetType(), "myFunction", "myFunction();", true);   //in code behind file

function myFunction(){
  // update something to dialog div
  $("#dialog").dialog(
        { autoOpen: false }
  );  
  $("#dialog").dialog("open");
}

【讨论】：

【解决方案3】：

您希望从后端到前端的代码中获得一些价值？
如果是：

然后在代码后面：

protected void Button1_Click(object sender, EventArgs e)
        {

            HiddenField1.Value = " from code behind";
            ScriptManager.RegisterStartupScript(this, GetType(), "myFunction", "myFunction('Hello');", true);      
        }

在 aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <style>
        body {
            font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
            font-size: 62.5%;
        }
    </style>

    <script>
        function myFunction(a) {

            $("#dialog").text(a+$("[id$=HiddenField1]").val());
            $("#dialog").dialog();          
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
        <div id="dialog" title="Basic dialog">            
        </div>
        <asp:HiddenField ID="HiddenField1" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </form>
</body>
</html>

希望对你有帮助。

【讨论】：