Modalpopup résultat dans master

Version imprimable

Puisque c'était le but de mes recherches et que ça marche maintenant je vous fait profiter:
Explication :
Il y a un formulaire à remplir
un bouton soumettre qui fait un traitement
Un coup sur 2 je renvoi comme quoi l'action a fonctionné l'autre coup que ça a raté.
Afficher au retour le message pour avertir l'utilisateur, mais à partir de fonctionnalité de la master

Master:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Master.master.vb" Inherits="Jquery.Master" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../script/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="../script/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
    <link href="../CSS/ui-lightness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet"
        type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        #checkmark
        {
            position: absolute;
            left: 0px;
            top: 10px;
            margin-right: 20px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#MsgBack").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    Ok: function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
    <div id="MsgBack" title="Download complete">
        <div class='subcontent-box' id='Errortitre'>
        </div>
    </div>
</body>
</html>

Page héritant de la master

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/Master.Master"
    CodeBehind="ModalResultMaster.aspx.vb" Inherits="Jquery.ModalResultMaster" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        label.error
        {
            font-weight: normal;
            color: red;
            text-align: left;
            padding-left: 25px;
            background: transparent url(/images/Critical.png) no-repeat scroll left;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('.error').hide();
 
            $("#Valider").click(
            function () {
                $('.error').hide();
 
                var surname = $("#<%= txtSurname.ClientID %>").val();
                var age = $("#<%= txtAge.ClientID %>").val();
 
                var name = $("input#name").val();
                if (name == "") {
                    $("label#name_error").show();
                    $("input#name").focus();
                    return false;
                }
 
                $.ajax({
                    type: "POST",
                    url: "ModalResultMaster.aspx/AddNewItem",
                    data: '{"name":"' + name + '", "surname":"' + surname + '", "age":' + age + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        if (msg.d == true) {
                            $("#Errortitre").html("<font color=green><I>Mise à jour effectuées.</I></font>");
                            $('#Errortitre').append("<img id='checkmark' src='Images/clean.png' />");
                            $("#MsgBack").dialog("open");
                        }
                        else {
                            $("#Errortitre").html("<font color=red><I>Erreur.</I></font>");
                            $('#Errortitre').append("<img id='checkmark' src='Images/critical.png' />");
                            $("#MsgBack").dialog("open");
                        }
                    },
                    error: function () {
                        alert("Error! Try again...");
                    }
                });
                return false;
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <table>
        <tr>
            <td>
                Name
            </td>
            <td>
                <input type="text" name="name" id="name" size="30" value="" class="text-input" />
                <label class="error" for="name" id="name_error">
                    This field is required.</label>
            </td>
        </tr>
        <tr>
            <td>
                Surname
            </td>
            <td>
                <asp:TextBox ID="txtSurname" runat="server" />
            </td>
        </tr>
        <tr>
            <td>
                Age
            </td>
            <td>
                <asp:TextBox ID="txtAge" runat="server" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button id="Valider">
                    Valider</button>
            </td>
        </tr>
    </table>
</asp:Content>

code behind

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Public Class ModalResultMaster
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
    End Sub
 
    <Services.WebMethod()> _
    Public Shared Function AddNewItem(ByVal name As String, ByVal surname As String, ByVal age As Integer) As Boolean
        Try
            Static persons As List(Of Person)
 
            If persons Is Nothing Then persons = New List(Of Person)
            Dim Person = New Person()
            Person.Name = name
            Person.Surname = surname
            Person.Age = age
 
            persons.Add(Person)
 
            Return ((persons.Count Mod 2) = 0)
 
        Catch ex As Exception
            Return False
        End Try
 
    End Function
 
End Class

Amélioration

On peut aussi imaginer de standardiser encore plus en mettant la gestion de l'affichage de la popup dans un fichier MsgResult.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function AfficheMsg(Reussi) {
    if (Reussi) {
        $("#Errortitre").html("<font color=green><I>Mise à jour effectuées.</I></font>");
        $('#Errortitre').append("<img id='checkmark' src='Images/clean.png' />");
        $("#MsgBack").dialog("open");
    }
    else {
        $("#Errortitre").html("<font color=red><I>Erreur.</I></font>");
        $('#Errortitre').append("<img id='checkmark' src='Images/critical.png' />");
        $("#MsgBack").dialog("open");
    }
}

Dans la master, il faut rajouter

Code:

<script src="../script/MsgResult.js" type="text/javascript"></script>

et la fonction qui traite le clic du boutton

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 $("#Valider").click(
            function () {
                $('.error').hide();
 
                var surname = $("#<%= txtSurname.ClientID %>").val();
                var age = $("#<%= txtAge.ClientID %>").val();
 
                var name = $("input#name").val();
                if (name == "") {
                    $("label#name_error").show();
                    $("input#name").focus();
                    return false;
                }
 
                $.ajax({
                    type: "POST",
                    url: "ModalResultMaster.aspx/AddNewItem",
                    data: '{"name":"' + name + '", "surname":"' + surname + '", "age":' + age + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        AfficheMsg(msg.d == true)
                    },
                    error: function () {
                        alert("Error! Try again...");
                    }
                });
                return false;
            });

Avec msg à afficher

Je viens de pousser le bouchon encore plus loin (je ne m'appelle pas Maurice)
Maintenant on peut afficher le msg dynamiquement et en gardant la notion de réussite ou pas

Dans le fichier MsgResult j'ajoute

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function AfficheMsgRetour(Retour) {
    if (Retour.Reussi) {
        $("#Errortitre").html("<font color=green><I>" + Retour.Msg + "</I></font>");
        $('#Errortitre').append("<img id='checkmark' src='Images/clean.png' />");
        $("#MsgBack").dialog("open");
    }
    else {
        $("#Errortitre").html("<font color=red><I>" + Retour.Msg + "</I></font>");
        $('#Errortitre').append("<img id='checkmark' src='Images/critical.png' />");
        $("#MsgBack").dialog("open");
    }
}

Mon code behind qui renvoie le msg à afficher

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
Public Class MDPPMsgComplex
    Inherits System.Web.UI.Page
 
    Public Class msgRetour
        Public Property Reussi As Boolean
        Public Property Msg As String
    End Class
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
    End Sub
 
    <Services.WebMethod()> _
    Public Shared Function AddNewItem(ByVal name As String, ByVal surname As String, ByVal age As Integer) As msgRetour
        Dim ret As New msgRetour
 
        Try
            Static persons As List(Of Person)
 
            If persons Is Nothing Then persons = New List(Of Person)
            Dim Person = New Person()
            Person.Name = name
            Person.Surname = surname
            Person.Age = age
 
            persons.Add(Person)
 
            ret.Reussi = ((persons.Count Mod 2) = 0)
            If ret.Reussi Then
                ret.Msg = "Trop fort ton Enr enregistré"
            Else
                ret.Msg = "Oups ! Erreur enr non enregistré"
            End If
 
            Return ret
 
        Catch ex As Exception
            ret.Reussi = False
            ret.Msg = ex.Message
            Return ret
        End Try
 
    End Function
 
End Class

et dans le fichier aspx, remplacer l'appel Ajax par

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 $.ajax({
                    type: "POST",
                    url: "MDPPMsgComplex.aspx/AddNewItem",
                    data: '{"name":"' + name + '", "surname":"' + surname + '", "age":' + age + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        AfficheMsgRetour(msg.d)
                    },
                    error: function () {
                        alert("Error! Try again...");
                    }
                });