How to display application web form in modal dialog?

Question

I have the following code of application page formdem.aspx:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="formdem.aspx.cs" Inherits="ProjectPrac.Layouts.ProjectPrac.formdem" DynamicMasterPageFile="~masterurl/default.master" %>

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div>
        <table class="auto-style1">
            <tr>
                <td class="auto-style2">
                    <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style2">
                    <asp:Label ID="Label2" runat="server" Text="Age"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style2">
                    <asp:Button ID="Button1" runat="server" Text="Submit" />
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </div>
</asp:Content>

<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
Application Page
</asp:Content>

<asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
My Application Page
</asp:Content>

In this I have created two textboxes and two labels and one button. I want this .aspx file to be displayed on the modal dialog but it is throwing me an error.

I have used the following web part code to use the above form.

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.HtmlControls;


namespace ProjectPrac.linkdemo
{
    [ToolboxItemAttribute(false)]
    public class linkdemo : WebPart
    {
        const string jsScriptURL = "/_catalogs/masterpage/jsFunctions.js";

        protected override void CreateChildControls()
        {
            HtmlGenericControl scriptInclude = new HtmlGenericControl("script");
            scriptInclude.Attributes.Add("src",
                                   SPContext.Current.Site.RootWeb.Url + jsScriptURL);
            Controls.Add(scriptInclude);

            HyperLink link = new HyperLink();
            link.Text = "View form";
            link.NavigateUrl = "javascript: ShowDialog()";

            this.Controls.Add(link);
        }
    }
}

On click of the link given in the web part, the above page should be displayed in the modal dialog. But it is throwing an error. The following javascript file is used for creation of modal dialog box

function ShowDialog()
{
    var options = SP.UI.$create_DialogOptions();
    options.url = "http://somehost/DemoOnly/_layouts/ProjectPrac/formdem.aspx";

    options.height = 300;
    SP.UI.ModalDialog.showModalDialog(options);

}

This is the error I am getting

Please help me out guys

Answer 1

Instead of creating a separate webpart. You can use the JavaScript code directly in a Content Editor Webpart.

Or Script Editor Webpart in case of SharePoint 2013.