Along with EPiServer CMS comes the integration with Visual Studio, this module provide us pre-build structure to create a clean site from the IDE. However, we have a small limitation that this module just works with C#, and even thought most people will be fine with it, there are some cases where the client requirement is to build the templates on Visual Basic. Well, even though we all will think what a lazy job to find the way to make everything work on Visual Basic, I would like to pass along the news that it isn’t hard once you know what to do.
So let's start by describing each step:
1. Let's create a basic C# EPiServer Project: Go to File, New Project, select the project type C# and the EPiServer Project. This will create a clean EPiServer Project with all the needed components.
2. Create a common ASP.Net Web Application with the similar steps as above but just selecting an ASP.Net application under the project type Visual Basic.
3. Once we have the two projects let's copy some of the C# project files to the Visual Basic project.
The folders with all the files inside we will copy are: Folder App_Browsers, App_Data, bin, lang, Web Services. Then we will also copy the following files from the root folder of the project: ApplicationInitializing, connectionString, EPiServerLog, FileSummary, Global and the Web config.
4. Having all the file structure, now let's open the two projects. On the Web Config of the Visual Basic Project we need to find the following line of code:
<compilation defaultLanguage="c#" debug="true" />
Replace the default language parameter from c# to vb.
Here we have to very carefull, on that config file we will also fine the lines:
<system.codedom>
<compilers>
<compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CSharp.CSharpCodeProvider,System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" warningLevel="4">
This lines are for code that will be compiled at runtime and that code will still be in c# so we must keep the c#; cs; csharp parameters
5. Now we have to look for the port that our application is going to use, usually is 6666 and you can see on the lines of the web config file:
<sites>
<site siteId="unknown" description="Example Site">
<siteSettings categoryId="1" enableScheduler="true" enableEvents="true" enableRemoteEvents="false" errorMailHandler="~/util/SendErrorReport.aspx" globalErrorHandling="RemoteOnly" globalErrorMail="" httpCacheExpiration="0:0:0" httpCacheability="Public" httpCacheVaryByCustom="path" httpCacheVaryByParams="id,epslanguage" indexingDelayAfterPublish="0:0:20" indexingTextRegExp="[\p{N}\p{L}]{1}[\p{N}\p{L}-\._]*[\p{N}\p{L}]{1}" logServiceUrl="soap.tcp://localhost/TimeSpanAnalyzerView" mirroringFileWriteRetryDelay="0:0:5" mirroringHtmlTextEncoding="" mirroringRetries="5" mirroringRetryDelay="0:0:1" pageCacheSlidingExpiration="12:0:0" pageFolderVirtualPathProvider="SitePageFiles" pageOfficeStartId="0" pageRootId="1" pageUseBrowserLanguagePreferences="false" pageValidateTemplate="false" pageWastebasketId="2" remoteCacheListenerShortNames="" remotePageCacheSlidingExpiration="2:0:0" remoteWebServiceCulture="0" sgmlParserDecodeCharEntities="false" stringCompressionThreshold="0" stringDelayedLoadThreshold="0" subscriptionHandler="EPiServer.Personalization.SubscriptionMail,EPiServer" uiDefaultPanelTab="0" uiEditorColors="" uiEditorCssPaths="" uiEditorHeight="250" uiEditorValueOptions="0" uiEditorWidth="500" uiImageTransparencyReplacement="White" uiKeepUserLoggedOn="true" uiMaxVersions="0" uiOptimizeTreeForSpeed="false" uiSafeHtmlTags="b,i,u,br" uiShowGlobalizationUserInterface="true" uiTheme="" uiVersionMerging="true" urlRewriteExtension="" urlRebaseKind="ToRootRelative" operationCompatibility="None" pageStartId="1" siteDisplayName="EPiServerVb" siteUrl="http://localhost:6666/EPiServerVb/" uiUrl="http://localhost:6666/EPiServerVb/ui/" utilUrl="http://localhost:6666/EPiServerVb/util/" />
</site>
</sites>
On the last lines you can see the site URL, uiUrl and utilUrl, this port is where our application has to work, so to make sure of it, go to the Solution Explorer and right-click on the project and select properties. On the properties let's go to the Web Tab and select Use Visual Studio Development Server and select the specific port option. Here we must set the port equals as the port we have on the web comfit (in this case 6666), then look at the Virtual path - it should be EPiServerVb.
6. Finally to finish the configuration of the site we have to add the References. Go to the Solution Explorer, right-click the project and select Add Reference.
On the newly appearing window go to the Browse tab, then the bin folder and select all the .dll files there. Once the reference is done, on the Solution Explorer go to the Reference Folder, select all the new references and on the properties select the Local Copy as true.
7. Now that we have the site configured and ready to run, let's modify the default page so it will work.
The code behind of the Default.aspx page should be as:
Imports System.Collections.Generic
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Imports EPiServer
Imports EPiServer.Core
Imports EPiServer.DataAbstraction
Imports EPiServer.Web.WebControls
Partial Public Class _Default
Inherits EPiServer.TemplatePage
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
End Class
Here we are importing the EPiServer Libraries and Inheriting the page from the Template Page.
<system.codedom>
<compilers>
<compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CSharp.CSharpCodeProvider,System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" warningLevel="4">
This lines are for code that will be compiled at runtime and that code will still be in c# so we must keep the c#; cs; csharp parameters
5. Now we have to look for the port that our application is going to use, usually is 6666 and you can see on the lines of the web config file:
<sites>
<site siteId="unknown" description="Example Site">
<siteSettings categoryId="1" enableScheduler="true" enableEvents="true" enableRemoteEvents="false" errorMailHandler="~/util/SendErrorReport.aspx" globalErrorHandling="RemoteOnly" globalErrorMail="" httpCacheExpiration="0:0:0" httpCacheability="Public" httpCacheVaryByCustom="path" httpCacheVaryByParams="id,epslanguage" indexingDelayAfterPublish="0:0:20" indexingTextRegExp="[\p{N}\p{L}]{1}[\p{N}\p{L}-\._]*[\p{N}\p{L}]{1}" logServiceUrl="soap.tcp://localhost/TimeSpanAnalyzerView" mirroringFileWriteRetryDelay="0:0:5" mirroringHtmlTextEncoding="" mirroringRetries="5" mirroringRetryDelay="0:0:1" pageCacheSlidingExpiration="12:0:0" pageFolderVirtualPathProvider="SitePageFiles" pageOfficeStartId="0" pageRootId="1" pageUseBrowserLanguagePreferences="false" pageValidateTemplate="false" pageWastebasketId="2" remoteCacheListenerShortNames="" remotePageCacheSlidingExpiration="2:0:0" remoteWebServiceCulture="0" sgmlParserDecodeCharEntities="false" stringCompressionThreshold="0" stringDelayedLoadThreshold="0" subscriptionHandler="EPiServer.Personalization.SubscriptionMail,EPiServer" uiDefaultPanelTab="0" uiEditorColors="" uiEditorCssPaths="" uiEditorHeight="250" uiEditorValueOptions="0" uiEditorWidth="500" uiImageTransparencyReplacement="White" uiKeepUserLoggedOn="true" uiMaxVersions="0" uiOptimizeTreeForSpeed="false" uiSafeHtmlTags="b,i,u,br" uiShowGlobalizationUserInterface="true" uiTheme="" uiVersionMerging="true" urlRewriteExtension="" urlRebaseKind="ToRootRelative" operationCompatibility="None" pageStartId="1" siteDisplayName="EPiServerVb" siteUrl="http://localhost:6666/EPiServerVb/" uiUrl="http://localhost:6666/EPiServerVb/ui/" utilUrl="http://localhost:6666/EPiServerVb/util/" />
</site>
</sites>
On the last lines you can see the site URL, uiUrl and utilUrl, this port is where our application has to work, so to make sure of it, go to the Solution Explorer and right-click on the project and select properties. On the properties let's go to the Web Tab and select Use Visual Studio Development Server and select the specific port option. Here we must set the port equals as the port we have on the web comfit (in this case 6666), then look at the Virtual path - it should be EPiServerVb.
6. Finally to finish the configuration of the site we have to add the References. Go to the Solution Explorer, right-click the project and select Add Reference.
On the newly appearing window go to the Browse tab, then the bin folder and select all the .dll files there. Once the reference is done, on the Solution Explorer go to the Reference Folder, select all the new references and on the properties select the Local Copy as true.
7. Now that we have the site configured and ready to run, let's modify the default page so it will work.
The code behind of the Default.aspx page should be as:
Imports System.Collections.Generic
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Imports EPiServer
Imports EPiServer.Core
Imports EPiServer.DataAbstraction
Imports EPiServer.Web.WebControls
Partial Public Class _Default
Inherits EPiServer.TemplatePage
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
End Class
Here we are importing the EPiServer Libraries and Inheriting the page from the Template Page.
Additionally on the Default.aspx, let's add any html text code so we will have some content, a hello world will work just fine for now.
8. Finally, we just need to set the Users and Roles. On the Solution Explorer click the Project and go the ASP.NET Configuration, the icon is
, this will open the Site Administration Tool.
On this tool, select the Provider Tab and the options SqlServerMembershipProvider and SqlServerRoleProvider.
Then on the Security tab create the following roles: Administrators and WebAdmins
Finally create a user with the Administrators role.
9. Run the application; you should see the default page at http://localhost:6666/EPiServerVb/Default.aspx. Now let's enter the Admin console of the CMS by going to http://localhost:6666/EPiServerVb/util/login.aspx, log in with the user you created and then go back to the http://localhost:6666/EPiServerVb/Default.aspx. Now right click on the text you created and you will see the options to enter the CMS Console just like a C# Project.
10. Now that the site is running you can create templates and Page Types. Just one last Note, when you create a Page Type you have to define the path of the template as /EPiserverVb/TemplatePage.aspx because the application is running under the virtual path EPiServerVb.
8. Finally, we just need to set the Users and Roles. On the Solution Explorer click the Project and go the ASP.NET Configuration, the icon is
, this will open the Site Administration Tool.On this tool, select the Provider Tab and the options SqlServerMembershipProvider and SqlServerRoleProvider.
Then on the Security tab create the following roles: Administrators and WebAdmins
Finally create a user with the Administrators role.
9. Run the application; you should see the default page at http://localhost:6666/EPiServerVb/Default.aspx. Now let's enter the Admin console of the CMS by going to http://localhost:6666/EPiServerVb/util/login.aspx, log in with the user you created and then go back to the http://localhost:6666/EPiServerVb/Default.aspx. Now right click on the text you created and you will see the options to enter the CMS Console just like a C# Project.
10. Now that the site is running you can create templates and Page Types. Just one last Note, when you create a Page Type you have to define the path of the template as /EPiserverVb/TemplatePage.aspx because the application is running under the virtual path EPiServerVb.
blog comments powered by Disqus