I was working on an ASP.MVC project this week and needed to implement a modal pop up window, simmilar to Jquery UI. After unsuccessfully spending sometime trying to find a solution online, I wend ahead and wrote an HTML helper. Hope this helps out fellow ASP.MVC'ers out there.
10 <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
11 <script type="text/javascript" src="../../Scripts/JqueryUI/jquery-1.4.4.js"></script>
12 <script type="text/javascript" src="../../Scripts/JqueryUI/external/jquery.bgiframe-2.1.2.js"></script>
13 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.core.js"></script>
14 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.widget.js"></script>
15 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.mouse.js"></script>
16 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.button.js"></script>
17 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.draggable.js"></script>
18 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.position.js"></script>
19 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.dialog.js"></script>
8 Public Function PopUp(ByVal helper As HtmlHelper, _
9 ByVal text As String, _
10 Optional ByVal controller As String = "", _
11 Optional ByVal action As String = "", _
12 Optional ByVal Title As String = "", _
13 Optional ByVal prompt As String = "") As String
14
15 Dim dvBuilder = New TagBuilder("div") 'Pop Up div
16 Dim strJsBuilder As String = ""
17
18 'Id for Pop Up div
19 'Repalcing hyphens with underscore for JS
20 Dim dvID As String = Guid.NewGuid.ToString.Replace("-", "_")
21
22 'Pop Up
23 If controller = "" Then
24 ' If controller is not supplied get the current controller from Request object
25 controller = helper.ViewContext.RouteData.Values("controller").ToString()
26 End If
27
28 strJsBuilder = bldPopUP(dvID, controller, action)
29 dvBuilder.Attributes.Add("ID", dvID)
30 dvBuilder.Attributes.Add("title", Title)
31
32 dvBuilder.InnerHtml = prompt
33 dvBuilder.InnerHtml &= strJsBuilder 'JS functions to Pop Up div
34 dvBuilder.MergeAttribute("style", "display:none;")
35
36 'Span Hyperlink
37 Dim linkbuilder As TagBuilder
38 linkbuilder = New TagBuilder("span")
39 linkbuilder.MergeAttribute("style", "cursor:hand;")
40 linkbuilder.InnerHtml = text
41
42 linkbuilder.Attributes.Add("onClick", "javascript:showPopUp_" & dvID & "()")
43
44 Return linkbuilder.ToString(TagRenderMode.Normal) & dvBuilder.ToString(TagRenderMode.Normal)
45 End Function
46 Private Function bldPopUP(ByVal dvID As String, _
47 Optional ByVal controller As String = "", _
48 Optional ByVal action As String = "") As String
49
50 Dim JsWriter As New StringBuilder
51 JsWriter.Append("<script type=""text/javascript"">" & vbCrLf)
52 JsWriter.Append("function showPopUp_" & dvID & "() {" & vbCrLf)
53 JsWriter.Append(" var dvID = '#' + '" & dvID & "';" & vbCrLf)
54 JsWriter.Append("$(dvID).dialog(""destroy"");" & vbCrLf)
55 JsWriter.Append(" $(dvID).dialog({" & vbCrLf)
56 JsWriter.Append(" resizable: false," & vbCrLf)
57 JsWriter.Append(" height: 140," & vbCrLf)
58 JsWriter.Append(" modal: true," & vbCrLf)
59 JsWriter.Append(" buttons: {" & vbCrLf)
60 JsWriter.Append(" Continue: function () {" & vbCrLf)
61 JsWriter.Append(" popUpContinue_" & dvID & "();" & vbCrLf)
62 JsWriter.Append(" }," & vbCrLf)
63 JsWriter.Append(" Cancel: function () {" & vbCrLf)
64 JsWriter.Append(" $(this).dialog(""close"");" & vbCrLf)
65 JsWriter.Append(" }" & vbCrLf)
66 JsWriter.Append(" }" & vbCrLf)
67 JsWriter.Append(" });" & vbCrLf)
68 JsWriter.Append(" }" & vbCrLf)
69 JsWriter.Append(" function popUpContinue_" & dvID & "() {" & vbCrLf)
70 JsWriter.Append(" window.location.href = '" & controller & "/" & action & "';" & vbCrLf)
71 JsWriter.Append(" }" & vbCrLf)
72 JsWriter.Append(" </script>" & vbCrLf)
73
74 Return JsWriter.ToString
75
76 End Function
10 <%= Html.PopUp("ASP.MVC Custom PopUp ", "", "Index", "pop Up Title", " To learn more about ASP.NET MVC visit <a href=""http://asp.net/mvc"" title=""ASP.NET MVC Website"">http://asp.net/mvc</a>")%>.
1 Imports System.Collections.Generic
2 Imports System.Web
3 Imports System.Web.Mvc
4 Imports System.Web.Routing
5
6 Public Module Helpers
7 <System.Runtime.CompilerServices.Extension()> _
8 Public Function PopUp(ByVal helper As HtmlHelper, _
9 ByVal text As String, _
10 Optional ByVal controller As String = "", _
11 Optional ByVal action As String = "", _
12 Optional ByVal Title As String = "", _
13 Optional ByVal prompt As String = "") As String
14
15 Dim dvBuilder = New TagBuilder("div") 'Pop Up div
16 Dim strJsBuilder As String = ""
17
18 'Id for Pop Up div
19 'Repalcing hyphens with underscore for JS
20 Dim dvID As String = Guid.NewGuid.ToString.Replace("-", "_")
21
22 'Pop Up
23 If controller = "" Then
24 ' If controller is not supplied get the current controller from Request object
25 controller = helper.ViewContext.RouteData.Values("controller").ToString()
26 End If
27
28 strJsBuilder = bldPopUP(dvID, controller, action)
29 dvBuilder.Attributes.Add("ID", dvID)
30 dvBuilder.Attributes.Add("title", Title)
31
32 dvBuilder.InnerHtml = prompt
33 dvBuilder.InnerHtml &= strJsBuilder 'JS functions to Pop Up div
34 dvBuilder.MergeAttribute("style", "display:none;")
35
36 'Span Hyperlink
37 Dim linkbuilder As TagBuilder
38 linkbuilder = New TagBuilder("span")
39 linkbuilder.MergeAttribute("style", "cursor:hand;")
40 linkbuilder.InnerHtml = text
41
42 linkbuilder.Attributes.Add("onClick", "javascript:showPopUp_" & dvID & "()")
43
44 Return linkbuilder.ToString(TagRenderMode.Normal) & dvBuilder.ToString(TagRenderMode.Normal)
45 End Function
46 Private Function bldPopUP(ByVal dvID As String, _
47 Optional ByVal controller As String = "", _
48 Optional ByVal action As String = "") As String
49
50 Dim JsWriter As New StringBuilder
51 JsWriter.Append("<script type=""text/javascript"">" & vbCrLf)
52 JsWriter.Append("function showPopUp_" & dvID & "() {" & vbCrLf)
53 JsWriter.Append(" var dvID = '#' + '" & dvID & "';" & vbCrLf)
54 JsWriter.Append("$(dvID).dialog(""destroy"");" & vbCrLf)
55 JsWriter.Append(" $(dvID).dialog({" & vbCrLf)
56 JsWriter.Append(" resizable: false," & vbCrLf)
57 JsWriter.Append(" height: 140," & vbCrLf)
58 JsWriter.Append(" modal: true," & vbCrLf)
59 JsWriter.Append(" buttons: {" & vbCrLf)
60 JsWriter.Append(" Continue: function () {" & vbCrLf)
61 JsWriter.Append(" popUpContinue_" & dvID & "();" & vbCrLf)
62 JsWriter.Append(" }," & vbCrLf)
63 JsWriter.Append(" Cancel: function () {" & vbCrLf)
64 JsWriter.Append(" $(this).dialog(""close"");" & vbCrLf)
65 JsWriter.Append(" }" & vbCrLf)
66 JsWriter.Append(" }" & vbCrLf)
67 JsWriter.Append(" });" & vbCrLf)
68 JsWriter.Append(" }" & vbCrLf)
69 JsWriter.Append(" function popUpContinue_" & dvID & "() {" & vbCrLf)
70 JsWriter.Append(" window.location.href = '" & controller & "/" & action & "';" & vbCrLf)
71 JsWriter.Append(" }" & vbCrLf)
72 JsWriter.Append(" </script>" & vbCrLf)
73
74 Return JsWriter.ToString
75
76 End Function
77 End Module
1 <%@ Master Language="VB" Inherits="System.Web.Mvc.ViewMasterPage" %>
2 <%-- The following line works around an ASP.NET compiler warning --%>
3 <%: ""%>
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
6 <html xmlns="http://www.w3.org/1999/xhtml">
7 <head runat="server">
8 <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
9 <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
10 <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
11 <script type="text/javascript" src="../../Scripts/JqueryUI/jquery-1.4.4.js"></script>
12 <script type="text/javascript" src="../../Scripts/JqueryUI/external/jquery.bgiframe-2.1.2.js"></script>
13 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.core.js"></script>
14 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.widget.js"></script>
15 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.mouse.js"></script>
16 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.button.js"></script>
17 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.draggable.js"></script>
18 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.position.js"></script>
19 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.dialog.js"></script>
20
21 <link rel="stylesheet" href="../../Scripts/JqueryUI/themes/base/jquery.ui.all.css" />
22 <link rel="stylesheet" href="../../Scripts/JqueryUI/demos.css" />
23 </head>
24
25 <body>
26 <div class="page">
27
28 <div id="header">
29 <div id="title">
30 <h1>My MVC Application</h1>
31 </div>
32
33 <div id="logindisplay">
34 <% Html.RenderPartial("LogOnUserControl")%>
35 </div>
36
37 <div id="menucontainer">
38
39 <ul id="menu">
40 <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
41 <li><%: Html.ActionLink("About", "About", "Home")%></li>
42 </ul>
43
44 </div>
45 </div>
46
47 <div id="main">
48 <asp:ContentPlaceHolder ID="MainContent" runat="server" />
49
50 <div id="footer">
51 </div>
52 </div>
53 </div>
54 </body>
55 </html>
1- Download Jquery UI from http://jqueryui.com/download
2- Link Jquery UI scripts and CSS on ASP.MVC master page or any page you want the pop up
10 <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
11 <script type="text/javascript" src="../../Scripts/JqueryUI/jquery-1.4.4.js"></script>
12 <script type="text/javascript" src="../../Scripts/JqueryUI/external/jquery.bgiframe-2.1.2.js"></script>
13 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.core.js"></script>
14 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.widget.js"></script>
15 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.mouse.js"></script>
16 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.button.js"></script>
17 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.draggable.js"></script>
18 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.position.js"></script>
19 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.dialog.js"></script>
3- Add the following HTML Helper extension to ASP Form Helper
8 Public Function PopUp(ByVal helper As HtmlHelper, _
9 ByVal text As String, _
10 Optional ByVal controller As String = "", _
11 Optional ByVal action As String = "", _
12 Optional ByVal Title As String = "", _
13 Optional ByVal prompt As String = "") As String
14
15 Dim dvBuilder = New TagBuilder("div") 'Pop Up div
16 Dim strJsBuilder As String = ""
17
18 'Id for Pop Up div
19 'Repalcing hyphens with underscore for JS
20 Dim dvID As String = Guid.NewGuid.ToString.Replace("-", "_")
21
22 'Pop Up
23 If controller = "" Then
24 ' If controller is not supplied get the current controller from Request object
25 controller = helper.ViewContext.RouteData.Values("controller").ToString()
26 End If
27
28 strJsBuilder = bldPopUP(dvID, controller, action)
29 dvBuilder.Attributes.Add("ID", dvID)
30 dvBuilder.Attributes.Add("title", Title)
31
32 dvBuilder.InnerHtml = prompt
33 dvBuilder.InnerHtml &= strJsBuilder 'JS functions to Pop Up div
34 dvBuilder.MergeAttribute("style", "display:none;")
35
36 'Span Hyperlink
37 Dim linkbuilder As TagBuilder
38 linkbuilder = New TagBuilder("span")
39 linkbuilder.MergeAttribute("style", "cursor:hand;")
40 linkbuilder.InnerHtml = text
41
42 linkbuilder.Attributes.Add("onClick", "javascript:showPopUp_" & dvID & "()")
43
44 Return linkbuilder.ToString(TagRenderMode.Normal) & dvBuilder.ToString(TagRenderMode.Normal)
45 End Function
46 Private Function bldPopUP(ByVal dvID As String, _
47 Optional ByVal controller As String = "", _
48 Optional ByVal action As String = "") As String
49
50 Dim JsWriter As New StringBuilder
51 JsWriter.Append("<script type=""text/javascript"">" & vbCrLf)
52 JsWriter.Append("function showPopUp_" & dvID & "() {" & vbCrLf)
53 JsWriter.Append(" var dvID = '#' + '" & dvID & "';" & vbCrLf)
54 JsWriter.Append("$(dvID).dialog(""destroy"");" & vbCrLf)
55 JsWriter.Append(" $(dvID).dialog({" & vbCrLf)
56 JsWriter.Append(" resizable: false," & vbCrLf)
57 JsWriter.Append(" height: 140," & vbCrLf)
58 JsWriter.Append(" modal: true," & vbCrLf)
59 JsWriter.Append(" buttons: {" & vbCrLf)
60 JsWriter.Append(" Continue: function () {" & vbCrLf)
61 JsWriter.Append(" popUpContinue_" & dvID & "();" & vbCrLf)
62 JsWriter.Append(" }," & vbCrLf)
63 JsWriter.Append(" Cancel: function () {" & vbCrLf)
64 JsWriter.Append(" $(this).dialog(""close"");" & vbCrLf)
65 JsWriter.Append(" }" & vbCrLf)
66 JsWriter.Append(" }" & vbCrLf)
67 JsWriter.Append(" });" & vbCrLf)
68 JsWriter.Append(" }" & vbCrLf)
69 JsWriter.Append(" function popUpContinue_" & dvID & "() {" & vbCrLf)
70 JsWriter.Append(" window.location.href = '" & controller & "/" & action & "';" & vbCrLf)
71 JsWriter.Append(" }" & vbCrLf)
72 JsWriter.Append(" </script>" & vbCrLf)
73
74 Return JsWriter.ToString
75
76 End Function
4- Call the pop up helper to display pop up!
10 <%= Html.PopUp("ASP.MVC Custom PopUp ", "", "Index", "pop Up Title", " To learn more about ASP.NET MVC visit <a href=""http://asp.net/mvc"" title=""ASP.NET MVC Website"">http://asp.net/mvc</a>")%>.
Complete Code:
Helpers.vb
1 Imports System.Collections.Generic
2 Imports System.Web
3 Imports System.Web.Mvc
4 Imports System.Web.Routing
5
6 Public Module Helpers
7 <System.Runtime.CompilerServices.Extension()> _
8 Public Function PopUp(ByVal helper As HtmlHelper, _
9 ByVal text As String, _
10 Optional ByVal controller As String = "", _
11 Optional ByVal action As String = "", _
12 Optional ByVal Title As String = "", _
13 Optional ByVal prompt As String = "") As String
14
15 Dim dvBuilder = New TagBuilder("div") 'Pop Up div
16 Dim strJsBuilder As String = ""
17
18 'Id for Pop Up div
19 'Repalcing hyphens with underscore for JS
20 Dim dvID As String = Guid.NewGuid.ToString.Replace("-", "_")
21
22 'Pop Up
23 If controller = "" Then
24 ' If controller is not supplied get the current controller from Request object
25 controller = helper.ViewContext.RouteData.Values("controller").ToString()
26 End If
27
28 strJsBuilder = bldPopUP(dvID, controller, action)
29 dvBuilder.Attributes.Add("ID", dvID)
30 dvBuilder.Attributes.Add("title", Title)
31
32 dvBuilder.InnerHtml = prompt
33 dvBuilder.InnerHtml &= strJsBuilder 'JS functions to Pop Up div
34 dvBuilder.MergeAttribute("style", "display:none;")
35
36 'Span Hyperlink
37 Dim linkbuilder As TagBuilder
38 linkbuilder = New TagBuilder("span")
39 linkbuilder.MergeAttribute("style", "cursor:hand;")
40 linkbuilder.InnerHtml = text
41
42 linkbuilder.Attributes.Add("onClick", "javascript:showPopUp_" & dvID & "()")
43
44 Return linkbuilder.ToString(TagRenderMode.Normal) & dvBuilder.ToString(TagRenderMode.Normal)
45 End Function
46 Private Function bldPopUP(ByVal dvID As String, _
47 Optional ByVal controller As String = "", _
48 Optional ByVal action As String = "") As String
49
50 Dim JsWriter As New StringBuilder
51 JsWriter.Append("<script type=""text/javascript"">" & vbCrLf)
52 JsWriter.Append("function showPopUp_" & dvID & "() {" & vbCrLf)
53 JsWriter.Append(" var dvID = '#' + '" & dvID & "';" & vbCrLf)
54 JsWriter.Append("$(dvID).dialog(""destroy"");" & vbCrLf)
55 JsWriter.Append(" $(dvID).dialog({" & vbCrLf)
56 JsWriter.Append(" resizable: false," & vbCrLf)
57 JsWriter.Append(" height: 140," & vbCrLf)
58 JsWriter.Append(" modal: true," & vbCrLf)
59 JsWriter.Append(" buttons: {" & vbCrLf)
60 JsWriter.Append(" Continue: function () {" & vbCrLf)
61 JsWriter.Append(" popUpContinue_" & dvID & "();" & vbCrLf)
62 JsWriter.Append(" }," & vbCrLf)
63 JsWriter.Append(" Cancel: function () {" & vbCrLf)
64 JsWriter.Append(" $(this).dialog(""close"");" & vbCrLf)
65 JsWriter.Append(" }" & vbCrLf)
66 JsWriter.Append(" }" & vbCrLf)
67 JsWriter.Append(" });" & vbCrLf)
68 JsWriter.Append(" }" & vbCrLf)
69 JsWriter.Append(" function popUpContinue_" & dvID & "() {" & vbCrLf)
70 JsWriter.Append(" window.location.href = '" & controller & "/" & action & "';" & vbCrLf)
71 JsWriter.Append(" }" & vbCrLf)
72 JsWriter.Append(" </script>" & vbCrLf)
73
74 Return JsWriter.ToString
75
76 End Function
77 End Module
Site.Master
1 <%@ Master Language="VB" Inherits="System.Web.Mvc.ViewMasterPage" %>
2 <%-- The following line works around an ASP.NET compiler warning --%>
3 <%: ""%>
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
6 <html xmlns="http://www.w3.org/1999/xhtml">
7 <head runat="server">
8 <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
9 <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
10 <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
11 <script type="text/javascript" src="../../Scripts/JqueryUI/jquery-1.4.4.js"></script>
12 <script type="text/javascript" src="../../Scripts/JqueryUI/external/jquery.bgiframe-2.1.2.js"></script>
13 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.core.js"></script>
14 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.widget.js"></script>
15 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.mouse.js"></script>
16 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.button.js"></script>
17 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.draggable.js"></script>
18 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.position.js"></script>
19 <script type="text/javascript" src="../../Scripts/JqueryUI/ui/jquery.ui.dialog.js"></script>
20
21 <link rel="stylesheet" href="../../Scripts/JqueryUI/themes/base/jquery.ui.all.css" />
22 <link rel="stylesheet" href="../../Scripts/JqueryUI/demos.css" />
23 </head>
24
25 <body>
26 <div class="page">
27
28 <div id="header">
29 <div id="title">
30 <h1>My MVC Application</h1>
31 </div>
32
33 <div id="logindisplay">
34 <% Html.RenderPartial("LogOnUserControl")%>
35 </div>
36
37 <div id="menucontainer">
38
39 <ul id="menu">
40 <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
41 <li><%: Html.ActionLink("About", "About", "Home")%></li>
42 </ul>
43
44 </div>
45 </div>
46
47 <div id="main">
48 <asp:ContentPlaceHolder ID="MainContent" runat="server" />
49
50 <div id="footer">
51 </div>
52 </div>
53 </div>
54 </body>
55 </html>
Comments