Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create a SageFrame Module in ASP.NET

In this article we will see how we can create our own module in SageFrame. SageFrame is an open source ASP.NET CMS and web application development framework.

Creating a SageFrame Module - For Beginners

Some of us may have had a hard time to understand and actually create our own module in SageFrame. So, I have written this article to assist you all build a simple module in SageFrame. This article also covers on how to install a Source Version of SageFrame.

Requirements

  • Server-side Requirements:
    • Microsoft .Net Framework 3.5 and above with SP1 (Service pack 1) or Visual studio to use source version of SageFrame.
    • Microsoft Windows Server 2003, 2008, Windows Vista, Windows XP, Windows 7
    • Internet Information Service (IIS) 6 or above.
  • Database Platform:
    • MS SQL Server 2005
    • MS SQL Server 2008
    • MS SQL Express
  • Supported Browser:
    • Microsoft Explorer 7 or above
    • Mozilla Firefox
    • Google Chrome
    • Opera
    • Safari

NOTE: Javascript must be enabled on all browsers.

Setup SageFrame

  1. Install Visual Studio if you haven’t already done so.
  2. Install MS SQL Express if you haven’t already done so.
  3. Download and install SageFrame. SageFrame installation has very simple, fast and easy process.

Note: Make sure that you download the source version of SageFrame (SageFrameV2_Source.zip).

SageFrame Installation process includes 4 steps.

  • Unzip the downloaded source version of SageFrame and place the folder in a drive.
  • Set permissions to SageFrame unzipped folder. Select Security tab from a folder property and set full control permission to Network Services, IIS_IUSERS and IUSER.
  • Run Internet Information Service (IIS) and create a default website.
    • Expand the folder on the right side of IIS Manager.
    • Right click on Default Web Site and click on Add Application.
    • Enter Alias name (Name of your site. e.g., SageFrame).
    • Add the Physical path (browse for a folder which was unzipped and permissions were set).
    • Click OK button after adding the physical path.
    • Expand Default Web Site and right-click on the alias name that you just created (SageFrame) and, run the website by clicking on Manage Application -> Browse. This will open your website in a browser as a local host.
  • The last very step is running the SageFrame installation wizard. Enter Database Credentials, Database Name, Choose a template, and then test for both database permission and database connection. Click on Install SageFrame.

When SageFrame is successfully installed you will be redirected to selected template home page.

Creating a Module in SageFrame

Before creating a module make sure that you have installed a source version of SageFrame and are properly set (IIS, Security, Database, etc).

Here we will create a simple module which will display a text “Hello World!”. Follow the steps below to create a module.

  • Open a source version of SageFrame in Visual Studio.
  • From the solution explorer on the right side, right-click on Modules folder and create a new folder. Here we will name the folder as “SampleModule”.
  • SampleModule folder created under Modules folder

    Figure 1: SampleModule folder created under Modules folder.

    Before we proceed further, let’s look around 3 User Controls which are mainly used for creating any type of module.

    View: View user control works as a user interface for displaying data.

    Edit: Edit user control is related with data modification.

    Settings: Setting user control works as a controller for both view and edit user controls.

  • Right-click on SampleModule folder and click on Add New Item.
  • Add New Items on SampleModule

    Figure 2: Add New Items on SampleModule

  • Click on from the dialog box that appears. On the Name textbox enter the name of a user control (here we will enter as SampleModuleView).
  • Select the language as C# and click on Add button.
Create .ascx file (Web User Control)

Figure 3: Create .ascx file (Web User Control)

Likewise, create “Edit” and “Setting” user controls.

Created user controls will be listed in the SampleModule folder.

User Controls

Figure 4: User Controls

Adding namespace to User Controls

We need to add namespace “SageFrame.Web” in all the three user controls and also inherit the BaseUserControl class so that we can view the changes made in controls. Add the namespace and class as shown below.

Note: This namespace and class should be added and inherited in all the three user controls.

Listing 1: Adding SageFrame.Web namespace and BaseUserControl class.

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using SageFrame.Web;

public partial class Modules_SampleModule_SampleModuleEdit : BaseUserControl
{
    protected void Page_Load(object sender, EventArgs e)
    	{

    	}
}

Next, we will design our desired module by writing certain codes. As mentioned above, we will create a module which will display a text “Hello World!”. To do so, go to SampleModuleView user control and type your text. See an image below:

Add markup to display output

Figure 5: Add markup to display output.

Once you are done save the project and build the solution.

After you have completed with coding and designing the module, now you have to register the module. To register the module login to SageFrame interface, and click on Modules icon on the dashboard.

From the Module Management page click on create new module and follow the steps below.

Select the module folder and source file.

Module folder and source file

Figure 6: Module folder and source file

Enter the details about the module.

details about the module

Figure 7: details about the module

Add more advanced settings for the module.

Settings for the module

Figure 8: Settings for the module.

When done with applying all the settings for a module click on save module. The module that we created will be listed along with other modules in a Module Management page.

List of modules

Figure 9: List of modules.

Next, we need to add the other two user controls to a module. So, click on SampleModule edit icon and then click on Module Controls Setting tab.

We can see on the page that previously added user control is already listed there. Now, click on Add Module Control link on Module Controls Setting tab.

Add Module Controls

Figure 10: Add Module Controls

The next page displayed is a Module Controls Setting page where we will add our other two ‘edit’ and ‘settings’ user control. Set the settings for a user control and save it.

Module Control Settings

Figure 11: Module Control Settings

Saved user controls will be listed with the earlier added user control i.e., with ‘view’ user control. Similarly, add the ‘settings’ user control.

List of added Module Controls

Figure 12: List of added Module Controls

Finally, we are done with creating a module. Now, we shall use this module in one of site page. Select a page from Page Module and drag and drop recently created module (SampleModule) into a page position.

Frontend view of the created module when added to a page

Figure 13: Frontend view of the created module when added to a page.

This is all for the start up. Hope this article briefed you on creating a simple module on SageFrame. I’ll soon come up with more informative tutorials on creating a module and more. Till then keep coding.



Project Manager @Braindigit IT Solution and SageFrame addept and AspxCommerce.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login