Last month I did this post on creating a jQuery Modal Dialog in an ASP.NET page.

My friend Jose Guay emailed me to say “hey Joe – nice sample but why not really wire things up the jQuery way ?”

Jose’s right so here it is.

The OLD markup looked like this:


<asp:Content ID='HeaderContent' runat='server'    
             ContentPlaceHolderID='HeadContent'>
    <link href='Scripts/fancybox/jquery.fancybox-1.3.4.css'
          rel='stylesheet' type='text/css' />
    <script src='Scripts/fancybox/jquery.fancybox-1.3.4.js' 
	        type='text/javascript'>
    </script>
    <script src='Scripts/tos.js' type='text/javascript'></script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server'  
             ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <div id='content'>
	<h1>Join Our Community</h1>
	<hr />
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />
	Etiam quis mi eu elit tempor facilisis id et neque.
	Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare.
	Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
	ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum,
	vehicula non pretium varius, cursus ac tortor. Vivamus fringilla 
	laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in.
	Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc
	aliquet tempus sem, id aliquam diam varius ac.
    <hr />
    <br />
    <!-- Modal Dialog -->
    <a id='tos' href='#serviceterms' 
	   title='You must agree with our tems of service.'>
       Click HERE to Agree to our Terms
    </a>
    <div style='display: none;'>
	<div id='serviceterms' style='width:440px;height:250px;overflow:auto;'>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />
		Etiam quis mi eu elit tempor facilisis id et neque.
		Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare.
		Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras 
		ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum,
		vehicula non pretium varius, cursus ac tortor. Vivamus fringilla 
		laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in.
		Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc
		aliquet tempus sem, id aliquam diam varius ac.
		<br /><br /><hr />
		<input type='button' value='Yes' onclick='ToS_Agree()' />&nbsp;&nbsp;
		<input type='button' value='No' onclick='ToS_NotAgree()' />
	</div>
	</div>
    <br /><br />

    <asp:Button ID='SubmitButton' runat='server' Text='Submit Form' 
	            Enabled='False'
                ClientIDMode='Static' onclick='SubmitButton_Click' />
        <br /><br />
    <asp:Label ID='LabelResult' runat='server' Text=''></asp:Label>

</div>
</asp:Content>

And the included JavaScript (tos.js) looked like this:


$(document).ready(function () {

    $('#tos').fancybox({
    	'titlePosition': 'inside',
    	'modal': 'true',
    	'transitionIn': 'none',
    	'transitionOut': 'none'
    });
});

function ToS_Agree() {
    $('#SubmitButton').removeAttr('disabled');
    $.fancybox.close();
}

function ToS_NotAgree() {
    $('#SubmitButton').attr('disabled', 'disabled');
    $.fancybox.close();
}

So, I am sort of mixing metaphor’s here.

Lets look at a better way.

The Markup:



<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
         AutoEventWireup='true'  CodeFile='Default.aspx.cs' 
		 Inherits='_Default' %>
<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
    <link href='Scripts/fancybox/jquery.fancybox-1.3.4.css'
          rel='stylesheet' type='text/css' />
    <script src='Scripts/fancybox/jquery.fancybox-1.3.4.js' 
	        type='text/javascript'></script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
     ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <div id='content'>
	<h1>Join Our Community</h1>
	<hr />
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />
	Etiam quis mi eu elit tempor facilisis id et neque.
	Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare.
	Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
	ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum,
	vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue
	laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in.
	Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc
	aliquet tempus sem, id aliquam diam varius ac.
    <hr />
    <br />
    <!-- Modal Dialog -->
    <a id='tos' href='#serviceterms'
                title='You must agree with our tems of service.'>
        Click HERE to Agree to our Terms
    </a>
    <div style='display: none;'>
	<div id='serviceterms' style='width:440px;height:250px;overflow:auto;'>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />
	Etiam quis mi eu elit tempor facilisis id et neque.
	Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare.
	Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
	ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum,
	vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue
	laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in.
	Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc
	aliquet tempus sem, id aliquam diam varius ac.
	<br /><br /><hr />
	<input type='button' id='YesButton' value='Yes' />&nbsp;&nbsp;
	<input type='button' id='NoButton' value='No' />
	</div>
	</div>
    <br /><br />
    <asp:Button ID='SubmitButton' runat='server' Text='Submit Form' 
	            Enabled='False'
                ClientIDMode='Static' onclick='SubmitButton_Click' />
				<br /><br />
    <asp:Label ID='LabelResult' runat='server' Text=''></asp:Label>

</div>
<script src='Scripts/tos.js' type='text/javascript'></script>
</asp:Content>

Take special note of line 58.

And the JavaScript file:


$(document).ready(function () {

    $('#tos').fancybox({
        'titlePosition': 'inside',
        'modal': 'true',
        'transitionIn': 'none',
        'transitionOut': 'none'
    });

});

$('#YesButton').click(function () {
    $('#SubmitButton').removeAttr('disabled');
    $.fancybox.close();
});
$('#NoButton').click(function () {
    $('#SubmitButton').attr('disabled', 'disabled');
    $.fancybox.close();
});

So why is this better ?

Well, there are a few reasons.

  • The code above eliminates in-line JavaScript. This is GOOD. Separation of concerns and we can modify the code without editing the markup.
  • Using jQuery selectors instead of explicit click event handlers is far more flexible.
  • Including the jQuery / JavaScript at the bottom of the page is more performant.
  • NOT mixing metaphors ultimately makes your code more readable, maintainable and understandable.

You can download the UPDATED source code [ HERE ].