c＃jquery簡單對話框

我是C＃和JQuery的新手。我嘗試將jquery添加到C＃WebForm項目中。我想要做的是：將一個按鈕添加到webform。如果該按鈕被點擊serverside然後顯示一個jQuery對話框c＃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); 

     } 
    } 
}

來源

2016-05-23 Spacewalker

參考此鏈接> http://stackoverflow.com/questions/24917243/recommendation-for-simple-jquery-dialog-example – user2148124

這裏是一個可行的完整的例子：

您需要參考後添加到jQuery用戶界面庫的引用jQuery，因爲這是定義對話邏輯的地方
您需要添加對jQue的引用ry 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>

輸出：

來源

2016-05-23 09:53:17

這裏爲我工作的例子：

後面的代碼：

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>

編輯：我有兩個js文件的jQuery：

<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>

來源

2016-05-23 09:11:22

thx爲您的答案。我已經嘗試過，但對我不起作用... – Spacewalker

我重新編輯我的答案..對不起，用jQuery（「＃dialog」）替換$（「＃dialog」）.. 這裏是一個例子，沒有在後面的代碼中調用：http://jsfiddle.net/eKb8J/748/ –

試試這個 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>

來源

2016-05-23 09:36:26

c＃jquery簡單對話框

回答

相關問題