c# jquery简单对话框答案

【问题标题】：c# jquery simple dialogboxc# jquery简单对话框
【发布时间】：2016-05-23 08:50:04
【问题描述】：

我是 C# 和 JQuery 的新手。我尝试将 jquery 添加到 C# WebForm 项目中。我想做的是：将按钮添加到网络表单。如果在服务器端单击该按钮，则显示一个 JQuery 对话框

这是我拥有的代码 - 如果我单击按钮，则没有任何反应。我想知道问题出在哪里......

.aspx 文件：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frmMain.aspx.cs" Inherits="Dialog_YES_NO_mit_JQuery.frmMain" %>
<!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.8.0/jquery.min.js' type="text/javascript"></script>        

    <script type="text/javascript">
    function ShowPopup(message) {
        $(function () {
            $("#dialog").html(message);
            $("#dialog").dialog({
                title: "jQuery Dialog Popup",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        });
    };
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

        Dialogbox using JQuery<br />
        <br />
        <asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
        <br />

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

.aspx.cs 文件：

public partial class frmMain : System.Web.UI.Page
    {

        protected void btnDemo1_Click(object sender, EventArgs e)
        {

            string message = "Message from server side";

            //ClientScript.RegisterStartupScript   (this.GetType(), "Popup",  "ShowPopup('" + message + "');", true);
              ClientScript.RegisterClientScriptBlock(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);

        }
    }
}

【问题讨论】：

参考此链接> stackoverflow.com/questions/24917243/…

标签： c# jquery asp.net webforms

【解决方案1】：

这是一个完整的例子：

您需要在对 jQuery 的引用之后添加对 jQuery UI 库的引用，因为这是定义对话框逻辑的地方
您需要添加对 jQuery UI CSS 文件的引用以启用模式弹出样式。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">

    <script type="text/javascript">
        function ShowPopup(message) {
            $(function () {
                $("#dialog").html(message);

                $("#dialog").dialog({
                    title: "jQuery Dialog Popup",
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    },
                    modal: true
                });
            });
        };
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            Dialogbox using JQuery<br />
            <br />
            <asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
            <br />

            <div id="dialog"></div>

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

输出：

【讨论】：

【解决方案2】：

这里有一个适合我的例子：

后面的代码：

    protected void ShowDialogClick(object sender, EventArgs e)
    {
        ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), Guid.NewGuid().ToString(), "ShowDialogJS();", true);
    }

aspx：

<script type="text/javascript">

    function ShowDialogJS() {
        jQuery("#dialog").dialog();
    }
</script>


<asp:Button runat="server" ID="btnShowDialog" Text="Show Dialog"
            OnClick="ShowDialogClick"></asp:Button>

编辑：我有两个用于 jQuery 的 js 文件：

    <script src="ressources/jQuery/scripts/jquery-1.11.4.js" type="text/javascript"></script>
    <script src="ressources/jQuery/scripts/jquery-ui-1.11.4.js" type="text/javascript"></script>

【讨论】：

我重新编辑了我的答案.. 抱歉，用 jQuery("#dialog") 替换 $("#dialog").. 这是一个没有后面代码调用的示例：jsfiddle.net/eKb8J/748

【解决方案3】：

试试这个 aspx

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

    <div>

        Dialogbox using JQuery<br />

        <div id="dialog"></div>

        <br />
        <asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
        <br />

    </div>
</form>

已添加 <div id="dialog"></div>

我还添加了 javascirpt 文件 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

【讨论】：