Creating Graphical Reports With Crystal Reports in .NET - Creating Web Pages
(Page 3 of 7 )
So let us look at our first aspx page, index.aspx. This is the page that the sales person will use to login into our system. You will find the code in the download.
This page consists of two text boxes to take a user name and password, and a submit button. If the user is valid we redirect them to the PostEntry.aspx page with their SalesPersonId in the query string.
Here the sales person selects the item they have sold and enters its amount, which is then added in the database. After that we simply return them back to the login page with a thanks message.
Up until now we have just discussed entering the data into our database. Now we will look at the reports of this data.
We create a page called ManagerDefault.aspx where a manager can make custom reports. Here is how it looks:
First the manager selects the Item they want a report on, then they select the date range for which they want to view data. We use ASP.NET Calendar controls to do this:
We also include an option to view the report either in Graph or List form.
This page is simple. The point of interest is the usage of calendar control. Let us first see what additions are made in the ManagerDefault.aspx file after adding the calendar control, then we will come to the code behind.
<asp:calendar id="DtPicker2" runat="Server" Height="156px" Width="280px" Visible="False" BackColor="White"
SelectorStyle-BackColor="#FFCC66" NextPrevStyle-Font-Size="9pt" NextPrevStyle- ForeColor="#FFFFCC"
TodayDayStyle-ForeColor="White" TodayDayStyle-BackColor="#FFCC66" DayHeaderStyle-Height="1px"
DayHeaderStyle-BackColor="#FFCC66" BorderWidth="1px" Font-Size="9pt" Font-Names="Verdana"
OtherMonthDayStyle-ForeColor="#CC9966" TitleStyle-Font-Size="9pt" TitleStyle-Font-Bold="True"
TitleStyle-ForeColor="#FFFFCC" TitleStyle-BackColor="#990000" ForeColor="Black"
BorderColor="White" SelectedDayStyle-Font-Bold="True" SelectedDayStyle-BackColor="#CCCCFF"
NextPrevFormat="FullMonth"> This stuff is for the calendar and as this calendar is displayed by clicking the image, here is the code for the image also in the same file.
<input type="image" onclick="Page_ValidationActive=false;" src="datepicker.gif" alt="Show Calender"
runat="server" onserverclick="ShowCal1" id="ImgCal1" name="ImgCal1"> Here we set the Page_ValidationActive variable to false so that we don't post the form, and perform validation on clicking the image. Secondly, notice onserverclick="ShowCal1". This ShowCal1() method is available in the code behind file ManagerDefault.aspx.cs.
Next we come to the code behind file ManagerDefault.aspx.cs. We will only cover the calendar related functions here. The method below displays the calendar, and is invoked when the calendar image is clicked:
// this method displays the first date calendar
public void ShowCal1(Object sender, System.Web.UI.ImageClickEventArgs e)
{
// Display calendar
DtPicker1.Visible = true;
} When the user clicks on the calendar to select a date, we move the selected date to its text box and hide the calendar.
// this method get the first date and hide the first calendar
private void DtPicker1_SelectionChanged(object sender, System.EventArgs e)
{
txtStartDate.Text = DtPicker1.SelectedDate.ToShortDateString();
DtPicker1.Visible = false;
} The second calendar is handled in the same way.
Once the manager has made their selections, they press the ShowReport button. Here is how we deal with it:
// this method redirects the manager to Report page with the selected items
private void bSubmit_ServerClick(object sender, System.EventArgs e)
{
// redirect to the report page
Response.Redirect("ViewReport.aspx?ItemId=" + cboItemType.SelectedItem.Value + "&StartDate=" +
txtStartDate.Text + "&EndDate=" + txtEndDate.Text);
} We simply redirect the user to the ViewReport.aspx page and send all the inputs as parameters like the ItemId, StartDate and the EndDate.
ViewReport.aspx does all of the work for displaying the report. Let's talk about it now.
Next: The Report >>
More C# Articles
More By Wrox Team