Sunday, February 21, 2010

Creating and running simple ASP.NET application in SharePoint

There are several ways to create and run ASP.NET application in SharePoint environment, however the way We are using in this example is, create a simple ASP.NET application as SharePoint modules and deploy as a SharePoint feature.
In this example, we will create a simple 3 pages shopping cart application which asks users for his name, ask for his order and display a message about his order.
 
To build this example, We will use
Visual Studio 2008
Visual Studio 2008 Extension for SharePoint
WSPBuilder
and a running SharePoint site. We will use http://spdev.

Start creating application
1.   Start Visual Studio 2008 and create a new project.
Select Empty template from SharePoint Project Types and name it Shopping Cart Application.

It will create an empty solution for us.

Add some references to our solution which are
System
System.Data
System.Web
System.XML
 

2.   Add new feature to this solution by right click on project in Solution Explorer and click Add New Item.

Select Blank Feature template from WSPBuilder Category and name it ShoppingCartFeature.



By clicking Add button, it will popup a new dialogue box for feature setting in which you can set feature Title, Description and Scope.



We will set scope of this features as Web.



It will add a feature with feature.xml and elements.xml in our Solution Explorer.



3.   Now, add SharePoint Modules in our feature which will hold our Shopping Cart Application’s ASPX pages.

Right click on Project and Add New Item. Select Module template from SharePoint Category and name it “Home”.



It will add a new Module in our project.



Rename sample.txt as Home.aspx and edit Module.xml. Replace
<File Path="sample.txt" Url="sample.txt" />
with
<File Path="Home.aspx" Url="Home.aspx" />
Drag “Home” Module into ShoppingCartFeature folder.



4.   Repeat step 3 and Add “ProductDisplay” and UserDisplay” Module in our project. Drag both modules in “ShoppingCartFeature” folder. Rename Sample.txt with ProductDisplay.aspx and UserDisplay.aspx accordingly.

In “UserDisplay” module, edit Module.xml and replace.
<File Path="sample.txt" Url="sample.txt" /> 
with
<File Path="UserDisplay.aspx" Url="UserDisplay.aspx" />
In “ProductDisplay” module, edit Module.xml and replace.
<File Path="sample.txt" Url="sample.txt" /> 
with
<File Path="ProductDisplay.aspx" Url="ProductDisplay.aspx" />
Our solution will be looked like this.



5. Open Home.aspx and add the code.
<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Page
Language="C#"
MasterPageFile="~masterurl/default.master"
Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage"
%>
<script runat="server">
      protected void Button1_Click(object sender, EventArgs e)
        {
            Response.Redirect("UserDisplay.aspx?name=" + TextBox1.Text );
        }
</script>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="PlaceHolderMain">
<br />
<div id="MainContent">
<table>
<tr>
<td>
<p id="NameLabel">
Enter your name :
</p>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Enter" OnClick="Button1_Click" />
</td>
</tr>
</table>
</div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea"
runat="server">
Shopping Cart Application : Home Page
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<style type="text/css">
#NameLabel
{
color: #6D9C00;
}
#MainContent
{
border: solid 1px black;
background-color: #C0F56E;
}
</style>
</asp:Content>
Open UserDisplay.aspx and add the code.
<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Page
Language="C#"
MasterPageFile="~masterurl/default.master"
Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage"
%>
<script runat="server"> 
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text += Request.QueryString["name"];
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            string username = Request.QueryString["name"];
            Response.Redirect("ProductDisplay.aspx?name=" + username + "&product=" + TextBox1.Text);
       }
</script>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="PlaceHolderMain">
<br />
<div id="Welcome">
<h3>
<asp:Label ID="Label1" runat="server" Text="Welcome, " ForeColor="#6D9C00"></asp:Label></h3>
</div>
<br />
<div id="MainContent">
<table>
<tr>
<td>
<p id="NameLabel">
Enter product name :
</p>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Checkout" OnClick="Button1_Click" />
</td>
</tr>
</table>
</div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea"
runat="server">
Shopping Cart Application : User Page
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<style type="text/css">
#NameLabel
{
color: #6D9C00;
}
#MainContent
{
border: solid 1px black;
background-color: #C0F56E;
}
#Welcome
{
border: solid 1px black;
background-color: #C0F56E;
}
</style>
</asp:Content>
Open ProductDisplay.aspx and add the code.
<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Page
Language="C#"
MasterPageFile="~masterurl/default.master"
Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage"
%>
<script runat="server">  
        protected void Page_Load(object sender, EventArgs e)
        {
            string username = Request.QueryString["name"];
            string product = Request.QueryString["product"];
            string message = username + ", You have ordered for " + product + ".";
            Label1.Text += message;
        }
</script>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="PlaceHolderMain">
<br />
<div id="Welcome">
<h3>
<asp:Label ID="Label1" runat="server" Text="Welcome, " ForeColor="#6D9C00"></asp:Label></h3>
</div>
<br />
<div id="Link">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="Home.aspx">Back to Home Page</asp:HyperLink>
</div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea"
runat="server">
Shopping Cart Application : Product Page
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<style type="text/css">
#Welcome
{
border: solid 1px black;
background-color: #C0F56E;
}
#Link
{
border: solid 1px black;
background-color: #C0F56E;
}
#Link a
{
color: black;
font-size: 8pt;
text-decoration: none;
font-weight: bold;
}
</style>
</asp:Content>
6.   Edit elements.xml and add the code.
<?xml version="1.0" encoding="utf-8" ?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
Id="ShoppingCartAction"
Description="Start Shopping Cart Application."
Title="Shopping Cart Application"
GroupId="SiteActions"
Location="Microsoft.SharePoint.StandardMenu"
ImageUrl="/_layouts/Images/ewr083.gif"
Sequence="10">
<UrlAction Url="Home.aspx" />
</CustomAction>
<Module Name="UserDisplay" Path="UserDisplay">
<File Path="UserDisplay.aspx" Url="UserDisplay.aspx" />
</Module>
<Module Name="ProductDisplay" Path ="ProductDisplay">
<File Path="ProductDisplay.aspx" Url="ProductDisplay.aspx" />
</Module>
<Module Name="Home" Path ="Home">
<File Path="Home.aspx" Url="Home.aspx" />
</Module>
</Elements>
7.   At this stage, our application is nearly finished. Now we will build and deploy it.
Right click on our project and click on WSPBuilder –> Build WSP

 

It will create Shopping Cart Application.wsp file for our project. Output window will be looked like this.



Now deploy our WSP file by right click on our project and click WSPBuilder –> Deploy.



It will deploy solution on our Server Farm. Output window will be looked like this.



8.   If we see in Central Administration Site –> Operations –> Global Configuration –> Solution Management, Shopping Cart Application solution will be there as deployed globally.



9.   Now, open our SharePoint Site and activate our feature.

Site Actions –> Site Settings –> Modify All Site Settings –> Site Administration –> Site Features

 

9.   It will add a new node in Site Actions Menu. We will start our Shopping Cart Application by clicking that node.



10.   Start application and it will bring you to Home.aspx.



Enter your name an click “Enter”.

19

Enter Product Name and click “Checkout”.



By clicking link “back to Home Page”, we will go back to Home Page of our Shopping Cart Application, “Home.aspx”.



This is how we can write a simple ASP.NET application in Visual Studio and run in SharePoint environment. Our application is deployed as a feature and we can activate and deactivate this feature as per requirement.

Download Visual Studio solution for this example from here.

No comments:

Post a Comment