Using the SharePoint 2010 Modal Dialog in Custom Aspx Page

SharePoint 2010 provides a new dialog framework using Client OM (javascript).
You can see the following dialog when you click an item from the list.

Modal dialog is provided by SP.UI.ModalDialog class.
Today, I'd like to introduce how to create a link to show modal dialog in a custom aspx page.
The steps are here.

• Create Empty SharePoint Project.

• Add new Application page in the new project.

• Open new Application page, and add HyperLink tag in "PlaceHolderMain".

    HyperLink

• Open code view of new Application page, and Write the code bellow.

This code indicates : 

1. Get workflow task item's URL.
2. Register modal dialog's script by using ScriptManager class.
3. Bind javascript method for task url link.

StringBuilder taskUrl = new StringBuilder();

        protected void Page_Load(object sender, EventArgs e)
        {
            SPWeb web = SPContext.Current.Web;
            SPList list = web.Lists["Announcements"];

            foreach (SPListItem item in list.Items)
            {
                if (item.Workflows != null)
                {
                    foreach (SPWorkflow workflow in item.Workflows)
                    {
                        if (workflow.Tasks != null)
                        {
                            foreach (SPListItem task in workflow.Tasks)
                            {
                                //create task item url.
                                taskUrl.Append("http://sharepoint/_layouts/WrkTaskIP.aspx?List=");
                                taskUrl.Append(workflow.TaskListId);
                                taskUrl.Append("&ID=" + task.ID + "&IsDlg=1&Web=");
                                taskUrl.Append(web.ID);
                            }
                        }
                    }
                }
            }
            
            //make modal dialog script.
            string script =
                @"
    var modalDialog;
    function ShowDialogTest() {
        var options = {
            url: '" + taskUrl.ToString() + @"',
            tite: 'Workflow Task',
            allowMaximize: false,
            showClose: false,
            width: 800,
            height: 600 };
        modalDialog = SP.UI.ModalDialog.showModalDialog(options);
    }";
            //register the script.
            ScriptManager.RegisterStartupScript(this, this.GetType(), ClientID, script, true);
            //bind the script for hyperlink.
            HyperLink1.NavigateUrl = "javascript:ShowDialogTest()";
        }

The code is very simple. If there are more than two task items, the code doesn't work.

• Deploy and access the new application page.

If you create Application page in SharePoint Empty Project, the aspx page is deployed in "_layouts" and master page tag is attached automatically. This is very nice function !! 

Sample url is here. "ShowModalDialog" is the project name.

http://sharepoint/_layouts/ShowModalDialog/ApplicationPage1.aspx

• Click "HyperLink" link. Modal Dialog is displayed !!

Tips :

I also created an application page in ASP.NET Web Application project. But the code didn't work even after I added the script reference. 

I got "'Type' is undefined (sp.js)" error when I clicked hyperlink to display modal dialog. I can't understand why the error appears.
I'm trying to find out why it happens.

I found tremendously beautiful movie in Vimeo !!
The movie was recorded on a mountain in Spain.