Kentico CMS 7.0 Developer's Guide

Adding custom code to a portal page template

Adding custom code to a portal page template

Previous topic Next topic Mail us feedback on this topic!  

Adding custom code to a portal page template

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

The most direct way to insert custom code into a portal engine-based website is using standard ASCX user controls. This chapter will show you how to do this. If you're not familiar with Visual Studio development, you can skip this chapter.


Current time example


In this example, we will create a simple user control (ASCX) using Visual Studio and integrate it into our home page.


Open the website project using the WebProject.sln file that is placed in the folder where you deployed the website. Right-click the web project in the Solution Explorer window and click New Folder. Name the folder the same as the code name of your site, e.g. CorporateSite - this folder will be exported with your project when you decide to export the site and import it on a live server.


Right-click the new folder and click the Add new item... option. Choose to create a new Web User Control and set its name to GetTime.ascx. You can set the programming language option to either Visual C# or Visual Basic.




Click Add. Switch to the Design tab and drag and drop the following controls and set their properties:


Button control:


ID: Button1

Text: Show current time


Label control:


ID: Label1

Text: <clear the value>




Double-click the Show current time button and enter the following code into the Button1_Click method:




Label1.Text = DateTime.Now.ToString();




Label1.Text = DateTime.Now.ToString()


This code ensures that the label displays the current date and time when the button is clicked.


Save all changes. It's not necessary to compile the project — user controls are compiled automatically at run time.


Adding the user control on the page


Sign in to Kentico CMS Desk, select the Home page and open the Design tab. Use the web part toolbar or the Add web part (AddWebPart) button to insert the User control web part from the General category into the Main zone. Enter the following value into the User control virtual path property:




(the folder name must reflect the folder that you previously created)


The ~ character represents the root of your web application. Click OK. Switch to Live site mode and you will be able to see the user control on the page. When you click the Show current time button now, the current date and time is displayed next to the button.




In this short example, you have seen that you can easily add any custom code developed as an ASCX user control in Visual Studio. This user control can contain any .NET controls, third-party controls or ADO.NET code that will retrieve data from an external database.


User controls versus web parts


Another option how to insert custom code into the page is creating your own web part. A web part is basically an ASCX user control, but it inherits some standardized properties and methods from the CMSAbstractWebPart class. You will usually build web parts in cases where you need to create re-usable, parameterized user controls. Web part development is described in the Development -> Web parts -> Developing web parts topic.