Home/ Questions/Q 1012599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T09:58:14+00:00

Integrating SimpleModal with ASP.NET I want to thank Eric for producing SimpleModal and compliment

  • 0

Integrating SimpleModal with ASP.NET

I want to thank Eric for producing SimpleModal and compliment the demos. It looks fantastic..

I only wish I could figure out how to use it.. (it’s me, I’m missing some chromosome or something.) Sorry in advance for my noobinicity.

I’ve seen several demos where specific functions are talked about and called, but this assumes that the scripts are integrated correctly into the project. This is the crux of the issue I am having, I don’t know what the heck I’m looking at when I look at jquery.

Some background: I’ve been programming for 25 years, with assembly, C, VB, and for the last 10 years as a SQL DBA, and architecting large corporate systems. Now I’m trying to make the leap to web ASP.NET. My C# skills are coming along and I’ve written a complete invoicing system in it, but I don’t know squat about getting this SimpleModal or any jquery integrated and working inside ASP.NET 2008.

I’ve taken the sample code and pasted it into a default.aspx file, only to be left with a total trash code heap.

Can someone make small sample of what I need to get SimpleModal integrated properly into my project? I’ve read Eric’s replies to others and read the subsequent links, but nobody has yet to explain how to entirely integrate it that I’ve found.

I’m assuming that I need to have the css, img, and the js folders & files in the project. Check, I got that in the root. After that I don’t know where to turn. My guess is that it needs to be declared near the top of the code on a page, and then in the HTML a link, and in the code behind it needs to be called. How to do that is beyond me, and I’ve spent perhaps 3-4 days researching this now…

Once I have a simple modal form popping up and down I should be able to look at the darn thing and figure out how to adapt it, and hopefully over time will begin to fill in the gaps of my understanding.

Here is what a sample default.aspx file looks like. I want to open a SimpleModal using a C# call from Code Behind.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

This is what a default sample code behind in c# looks like:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Anybody want to take a shot at getting SimpleModal simply integrated into a default project?

Any help would be greatly appreciated.

Victor

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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"></script>
    <script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal-1.3.5.js"></script>
    <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!!

    • 0