Question

我是C＃和JQuery的新手。我尝试将jquery添加到C＃WebForm项目中。我想要做的是：在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);

        }
    }
}

Answer 1

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

代码背后的代码：

    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>

Answer 2

试试这个 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>

Answer 3

这是一个有效的完整示例：

您需要在引用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>

<强>输出：

c＃jquery简单对话框

3 个答案: