ansaurus

Question

Answer 1

+3 A:

I think you're approaching this from a pure code-behind perspective; but using jQuery (or most any other client-side framework) shifts a great deal of the actual presentation of your application to the client. The server handles serving up data (in XML, JSON or some other format that you require) and the client utilizes an HTML DOM structure along with JavaScript, CSS and the data served up in order to render your application.

In your comment, you state that you want to use the modal as a confirmation that an action was successful. Here you'd use jQuery to collect the information and issue an AJAX call to your service (perhaps a WCF service), and the service would respond back with a success or failure. You would then handle the success or failure in your jQuery ajax success or error callback handler. This would be done on the client, not on the server.

Here's a quick example that only displays the modal:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <style type="text/css">
        #simplemodal-overlay {background-color:#000;}
        #simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;}
    </style>
</head>
<body>
    <div>
        Email: <input type="text" id="email" /><br />
        Message: <input type="text" id="message" /><br />
        <button id='theModal'>Show</button>
        <div id="sample" style="display:none"> 
            <h2>Sample Data</h2> 
            <p>Your email was successful!!</p> 
            <p>You can press ESC to close this dialog or click <a href="#" class="simplemodal-close">close</a>.</p> 
        </div> 
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal-1.3.5.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
        $(document).ready(function () {
            $("#theModal").click(function () {
                $("#sample").modal({
                    opacity: 80,
                    overlayCss: { backgroundColor: "#fff" }
                });
            });
        });
    </script>
</body>
</html>

This is just a basic HTML page with no code-behind. I could modify this to call a service when the submit button is clicked:

$("#theModal").click(function () {
    $.ajax({
      type: "POST",
      dataType: "json",
      contentType: "application/json",
      url: "MyEmailService.svc/SendEmail",
      data: {"email": $("#email").val(),
             "message": $("#message").val()},
      success: function(data) {
                 $("#sample").modal({
                     opacity: 80,
                     overlayCss: { backgroundColor: "#fff" }
                 });
      },
      error: function(m, t, x) { alert("something bad happened"); }
    });
});

This is all pseudo-code because the service doesn't exist, but hopefully I've conveyed the example properly. But in this pseudo-code example, the service would process the email functionality and respond back to the client and the success callback handler would be executed (which would display the modal). If there is a problem in communicating with the service or parsing the return value, then the error callback handler gets called.

Please let me know if this helps. If you have other questions, let me know and I'll update my answer accordingly. Hope this helps!!

David Hoerster 2010-08-18 02:00:33

D Hoerster,Your example worked first time.. That's exciting! I totally get what you mean and now realize why Eric asked me if it needs to be done from code behind. I'm still thinking in the "server exclusive" paradigm. I've written a complete system, and now need to put in the client side notifications, and my mind is resisting it. I have to admit, it has been difficult to retrain myself into thinking in terms of the client handling some of these tasks.

asus3000 2010-08-18 10:13:10

jscript still looks cryptic to me, but I know from experience that if I stare at it long enough then like other things it starts to make sense in my crazy head.I am sure that this example will help many others as it only needs cut and pasted into a default.aspx file. Thank you very much for providing this crucial learning step, and thanks to Eric again for SimpleModal. I also have a new found appreciation for StackOverflow. : ) This was a great experience, thanks again.Victor

asus3000 2010-08-18 10:14:59

@asus3000 I'm glad this helped! And yes, JavaScript can be cryptic, but I've found that a framework like jQuery helps me get my head around things easier. It doesn't help with everything, but it did help my transition from a C# developer who avoided jscript at all costs to someone that readily embraces a client-side issue/problem/project. Good luck!!

David Hoerster 2010-08-18 10:49:32

It's at least beginning to make some sense to me now, thanks to you.I put the code you wrote into a new page that has a masterpage, and now the simplemodal just flashes for about 1 second and then closes. Any idea how to get it to persist? Actually if it stayed open for 3 seconds it would be desirable. I tried some of Eric's other "option" code to fade in and had some success but it also closes fast on the masterpage. I'm starting to get the code, so I nested it inside the click event, but still unsuccessful.This doesn't look too hard once it's understood.Victor

asus3000 2010-08-18 20:26:10

If you either post your code in this question or open a new one, I can take a look. How are you getting the modal to close initially? I'm not sure why the masterpage would cause that to happen, unless it has to do with how it prefixes server-side control id's. I'll keep watching this question if you update it -- or I'll look for a new one. :) But if you could post some code (either new question or in this one), I (or someone else) will take a look. Thanks!!

David Hoerster 2010-08-18 20:42:07

D. Hoerster, I've created a new thread as a continuation to this one. Thank you.http://stackoverflow.com/questions/3517489/simplemodal-and-asp-net-masterpageVictor

asus3000 2010-08-18 23:19:27

ansaurus

tags:

views:

answers:

Basic Help with SimpleModal and ASP.NET

Integrating SimpleModal with ASP.NET

related questions