C# jquery einfache Dialogbox

Ich bin neu in C# und JQuery. Ich versuche, jQuery zu einem C# WebForm-Projekt hinzuzufügen. Was ich tun möchte, ist dies: Hinzufügen einer Schaltfläche zu einem Webformular. Wenn diese Schaltfläche serverseitig geklickt wird, dann wird eine JQuery-Dialogbox angezeigtC# jquery einfache Dialogbox

Dies ist der Code, den ich habe - wenn ich auf die Schaltfläche klicke passiert nichts. Ich frage mich, wo das Problem ist ....

ASPX-Datei:

<%@ 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 Datei:

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

     } 
    } 
}

Quelle

2016-05-23 Spacewalker

diesen Link finden> http://stackoverflow.com/questions/24917243/recommendation-for-simple-jquery-dialog-example – user2148124

Hier ist ein vollständiges Beispiel, das funktioniert hinzugefügt:

Sie müssen einen Verweis auf jQuery UI-Bibliothek nach dem Verweis auf jQuery, da hier die Dialoglogik definiert ist
Sie müssen einen Verweis auf den jQue hinzufügen ry UI CSS-Datei, um das modale Popup-Styling zu aktivieren.

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

Ausgang:

Quelle

2016-05-23 09:53:17

hier ein Beispiel, das funktioniert für mich:

hinterer Code:

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>

EDIT: Ich habe zwei js Dateien für 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>

Quelle

2016-05-23 09:11:22

Danke für Ihre Antwort. Ich habe es versucht, aber es funktioniert nicht für mich ... – Spacewalker

ich redigiere meine Antwort .. sorry, ersetzen $ ("# dialog") mit jQuery ("# dialog") .. hier ein Beispiel ohne der Aufruf in Code hinter: http://jsfiddle.net/eKb8J/748/ –

versuchen, diese 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>

hinzugefügt <div id="dialog"></div>

i auch javascirpt Dateien <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>

Quelle

2016-05-23 09:36:26

C# jquery einfache Dialogbox

Antwort

Verwandte Themen