Code On Time: ASP.NET Membership

Blog

ASP.NET Membership

Saturday, July 6, 2013Print Subscribe

With the release of Windows Azure, Microsoft has provided a great cloud database, storage, and computing service platform. Windows Azure offers many benefits, such as guaranteed 99.95% uptime, automatic OS and service patching, integrated network load balancing, and easy scaling.

While the Windows Azure cloud may offer the perfect platform to deploy your next web application, you still need to build this application. This is where Code On Time’s Azure Factory comes in. All you have to do is paste in your SQL Azure database connection string, and hit Generate. In a minute, your advanced web application will start in your default browser, complete with sorting, adaptive filtering, reporting, charts, and much more. Hit Publish, and the application will be packaged. Upload the published deployment package to Windows Azure, and within minutes you’ll have your app running in the cloud.

Need to add more features and customize your app? Just make your changes in the easy to use Project Designer. While no coding is needed to make a great app, you can always open the source code in Visual Studio and change it to precisely fit your requirements.

The following article will explain how to generate and deploy an Azure Factory application. View our learning system if you need help setting up a Windows Azure account or creating a database using SQL Azure tools.

In order for the application created in this article to work properly, make sure to install Microsoft Azure SDK.

Creating the Azure Factory Project

Start the app generator, and click on Create a new web application. Select Azure Factory.

Enter a name, select your preferred language, and press Create.

Press Next to navigate to the Database Connection page. Click on the “…” button.

Enter your server username and password. If you already have an SQL Azure database, then enter the name in the Database field. If you don’t have a database, you can quickly create one using the web application generator. The next few steps explain how to create a sample Northwind database, include ASP.NET Membership and Roles, and add Session State management.

In the Database textbox, enter “Northwind”. Press Create to create the database.

In the Sample Tables dropdown, select Northwind and press Install.

Under Membership section, press Add button. ASP.NET Membership will be installed in the database.

By default, Azure Factory applications are configured to use two extra-small server instances in the cloud. If you use multiple instances, then Session State management must be included in the application. Under Session State, press Add. Press OK to confirm the installation.

Press OK to save the connection string. Press Next twice to get to the Reporting page.

Check the box to enable reporting, and keep pressing Next to reach the Theme page. Select “Azure” theme.

Hold down Shift key, and press Next. This shortcut will take you to the Summary page. Press the Generate button.

Wait until the generator finishes, and your default browser will open with your new web application. While the application is running on your computer, the database is located in the cloud. You can log in and start using the app immediately.

Deploying the Web App

It’s time to deploy the app to Azure. Go back to the generator, and click on the project name. Press Publish.

When the process is complete, the publish folder will be opened and will contain two files, CloudApp.cspkg and ServiceConfiguration.cscfg.

Navigate to the Azure Portal. In the bottom left corner, press New. Select Compute | Cloud Service | Custom Create.

Specify a URL, check the box next to “Deploy a cloud service package”, and click on the right arrow.

Next, specify a deployment name and select the two file locations. Mark the Environment as “Staging”. Click on the check icon to start deployment.

Press OK, and Windows Azure will start the deployment process. This step may take up to 15 minutes. Once the status of the deployment changes to Ready, use the SITE URL link found under DASHBOARD tab to view the app running in the cloud.

If you look at the URL, you will notice that it uses the ID of the deployment, not the requested DNS Name. This is because the deployment is a staging deployment. You can go back to the management portal, and choose Swap to change it into a production deployment. Now you can use the DNS Name you specified during creation of the hosted service.

When you are ready to deploy a new project revision, create a new staging deployment. Test the new deployment in the cloud. If everything is working as expected, then swap the virtual IP address of the staging deployment with the production one. Click Swap button at the bottom of the screen to do so.

When VIP swapping has finished, the previous application revision will become a staging deployment. Shut it down if you don’t need it. Continue upgrading staging deployment with the new revisions of the application, and swapping them later with production.

Labels: ASP.NET Membership, Azure, Deployment, Web Application Generator

Tuesday, June 11, 2013Print Subscribe

Password Recovery

Code On Time web apps using ASP.NET Membership automatically come configured with a password recovery form. This form can be opened by clicking on the Forgot your password? link on the dropdown login form.

When the user enters their User Name and Password Answer correctly, a new password will be sent to the email on file.

There are situations in which it may be necessary to allow users to access this form from a different location within the web app. In addition, if Custom Membership is used, the Forgot your password? link is not present. Let’s place the password recovery form in a custom user control and add this control to the home page.

Start the Project Designer. In the Project Explorer, right-click on Home / container2 node, and press New Control.

Next to the User Control lookup, click on the New User Control icon.

Assign a name to the user control:

Property	Value
Name	PasswordRecoveryForm

Press OK to save the user control. Press OK again to instantiate the user control on the Home page.

On the toolbar, press Browse to generate the user control. When complete, right-click on Home / container2 / control3 – PasswordRecoveryForm node and press Edit in Visual Studio.

The file will open in Visual Studio. Replace the existing code after the <%@ Control %> element with the following:

<asp:PasswordRecovery runat="server" />

Press OK to save the file. Switch back to the browser. Notice that the Password Recovery form is placed after the Instructions text box on the Home page.

Note that you must configure SMTP settings in order for the password recovery email to be sent by the application.

Labels: Application Builder, ASP.NET Membership, Security, Web Application Generator

Wednesday, April 3, 2013Print Subscribe

Data View Refresh

Data views are only automatically refreshed by the client library when data is inserted, updated, or deleted. The user can force a refresh using the Refresh icon in the bottom right corner of every data view. In addition, the Refresh Interval property can be configured to refresh the data view based on a timer.

Certain situations require a refresh based on different conditions. For example, suppose that there are multiple tabs displaying similar data.

The user may change the value of a record in one of the views.

However, when the user switches to another view showing the same record, the old value will be displayed.

Let’s add a custom user control that will contain some custom JavaScript. This code will refresh the data view when the tab is changed in order to ensure that the data visible to the user is always fresh.

Creating Views

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Orders / Views / grid1, and press Copy. Right-click on Orders / Views node, and press Paste to duplicate the view.

Do this one more time to create three grid views. Double-click on Orders / Views / v100.

Make the following changes:

Property	New Value
Id	OrdersToShip
Label	Orders To Ship
Filter Expression	OrderDate is null

Press OK to save. Double-click on Orders / Views / v101.

Make the following changes:

Property	New Value
Id	HighFreight
Label	High Freight
Filter Expression	Freight > 30

Press OK to save.

Setting Up the Page

Switch to the Pages tab. On the toolbar, press the New Page icon.

Assign a name to the page:

Property	New Value
Name	Filtered Orders

Press OK to save. Drop the new Filtered Orders page node to the right of Home page node.

Right-click on Filtered Orders page, and press New Container.

Keep the defaults and press OK to save. Right-click on the new container and press New Data View.

Assign the following values:

Property	Value
Controller	Orders
View	grid1
Tag	Orders
Activator	Tab
Text	Orders

Press OK to save. Create another data view with the following properties:

Property	Value
Controller	Orders
View	OrdersToShip
Tag	Orders To Ship
Activator	Tab
Text	Orders To Ship

Create one more data view.

Property	Value
Controller	Orders
View	HighFreight
Tag	High Freight
Activator	Tab
Text	High Freight

Save the data view.

Adding User Control

Right-click on Filtered Orders / c101 container node, and press New Control.

Next to the User Control property, click on the New User Control icon.

Assign a name:

Property	Value
Name	RefreshDataView

Press OK to save the user control and insert it into the property. Press OK again to save the control.

On the toolbar, press Browse to generate the web application and user control. When complete, right-click on Filtered Orders / c101 / control1 – RefreshDataView node, and press Edit in Visual Studio.

The custom user control file will open in Visual Studio. Replace the content after the <%@ Control %> element with the following:

<script type="text/javascript">
    Sys.Application.add_load(function () {
        $('div.TabBar td.Item').click(function () {
            var linkText = $(this).find('a').text();
            var tag = linkText;
            var dataView = Web.DataView.find(tag, 'Tag');
            if (dataView) {
                if (dataView._isBusy == false && dataView.get_isDisplayed())
                    dataView.refresh();

            }
        });
    })
</script>

Viewing the Results

Save the file, and switch to the web app open in your browser window. Navigate to the Filtered Orders page. The page will have three tabs displaying different filtered lists of orders. Note the Order Date of the first record.

Switch to the High Freight tab. Edit the first record, and change the Order Date.

Save the change, and switch back to the first tab. Note that the data view refreshes and the updated data is displayed.

Labels: ASP.NET Membership, JavaScript, Tips and Tricks, User Interface, Web Application Generator