In this article, We'll look into how to navigate between views in DNN module,using control key
Introduction
A DotNetNuke module is a collection of User Controls (.ascx files) that are grouped together by a module definition. If we look at the code for the Core project modules we will see that most modules only contain one View, Edit, and Settings control.Here we are going to create multiple user controls and navigation between them..
Objective
The objective of this article is to explain how to navigate between user controls in a Dnn Module.
Check my previous articles before we proceed
Now Lets us start by creating a user control
Step 1:
Add a new user control in the project which we had created in Part 2
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddEmployee.ascx.cs" Inherits="Christoc.Modules.TSM.AddEmployee" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register TagPrefix="dnn" Assembly="DotNetNuke.Web" Namespace="DotNetNuke.Web.UI.WebControls" %>
<%@ Register TagPrefix="dnn" TagName="label" src="~/controls/labelControl.ascx" %>
<script type="text/javascript">
function checkDate(sender, args) {
if (sender._selectedDate > new Date()) {
alert("You cannot select a day Greater than today!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
</script>
<style type="text/css">
.auto-style1 {
width: 253px;
}
</style>
<div class="dnnForm" id="AddEmp">
<div class="dnnFormItem dnnFormHelp dnnClear">
<p class="dnnFormRequired"><asp:Label runat="server" /></p>
<fieldset>
<table >
<tr>
<td colspan="4">
<h3><a href="#" class="folder_table1">Add New Employee:</a></h3>
</td>
</tr>
<tr>
<div class="dnnFormItem">
<td align="right">
EmployeeId:
</td>
<td colspan="3">
<asp:TextBox ID="txtEmpId" runat="server" CssClass="dnnFormRequired"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtEmpId" ValidationGroup="g1" CssClass="dnnFormMessage dnnFormError" ResourceKey="Name.Required"></asp:RequiredFieldValidator>
</td>
</tr>
</div>
<tr>
<td align="right">
FirstName:</td>
<td class="auto-style1">
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtFirstName" ErrorMessage="*" ForeColor="#FF3300" ValidationGroup="g1"></asp:RequiredFieldValidator>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender6" runat="server" TargetControlID="txtFirstName" FilterType="LowercaseLetters, UppercaseLetters" ValidChars="+"></cc1:FilteredTextBoxExtender>
</td>
<td align="right">
LastName:</td>
<td>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender7" runat="server" TargetControlID="txtLastName" FilterType="LowercaseLetters, UppercaseLetters" ></cc1:FilteredTextBoxExtender>
</td>
</tr>
<tr>
<td align="right">
Email Id:</td>
<td class="auto-style1">
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtEmail" ErrorMessage="*" ForeColor="#FF3300" ValidationGroup="g1"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ValidationGroup="g1" ControlToValidate="txtEmail" ErrorMessage="*" ValidationExpression="^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$" ForeColor="#FF3300"></asp:RegularExpressionValidator>
</td>
<td align="right">
Designation:</td>
<td>
<asp:TextBox ID="txtDesignation" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtDesignation" ErrorMessage="*" ForeColor="#FF3300" ValidationGroup="g1"></asp:RequiredFieldValidator>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender8" runat="server" TargetControlID="txtDesignation" FilterType="LowercaseLetters, UppercaseLetters" ></cc1:FilteredTextBoxExtender>
</td>
</tr>
<tr>
<td align="right">
Password:</td>
<td class="auto-style1">
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ValidationGroup="g1" ControlToValidate="txtPassword" ErrorMessage="*" ForeColor="#FF3300"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="Regular2" runat="server" ValidationGroup="g1" ErrorMessage="Min 6 chars combination of A-Z, a-z, 0-9, #,$,@,%,&" Display="None" ValidationExpression="^(?=.*[\d])(?=.*[A-Z])(?=.*[a-z])[\w\d%&@#$]{6,20}$" ControlToValidate="txtPassword" ForeColor="#FF3300"></asp:RegularExpressionValidator>
<cc1:ValidatorCalloutExtender ID="Regular2_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="Regular2"></cc1:ValidatorCalloutExtender>
</td>
<td align="right">
DateOf Join:</td>
<td>
<asp:TextBox ID="txtDOJ" runat="server"></asp:TextBox>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="txtDOJ" FilterType="Custom, Numbers" ValidChars="/"></cc1:FilteredTextBoxExtender>
<cc1:CalendarExtender ID="txtDOJ_CalendarExtender" runat="server" OnClientDateSelectionChanged="checkDate" DefaultView="Days" Enabled="True" PopupPosition="BottomLeft" TargetControlID="txtDOJ">
</cc1:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="txtDOJ" ErrorMessage="*" ForeColor="#FF3300" ValidationGroup="g1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
Gender</td>
<td class="auto-style1">
<asp:DropDownList ID="ddlGender" runat="server">
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:DropDownList>
</td>
<td align="right">
DOB:</td>
<td>
<asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server" TargetControlID="txtDOB" FilterType="Custom, Numbers" ValidChars="/"></cc1:FilteredTextBoxExtender>
<cc1:CalendarExtender ID="txtDOB_CalendarExtender" runat="server" OnClientDateSelectionChanged="checkDate" Enabled="True" TargetControlID="txtDOB">
</cc1:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="txtDOB" ErrorMessage="*" ForeColor="#FF3300" ValidationGroup="g1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
<tr>
<td align="right">
Address</td>
<td class="auto-style1">
<asp:TextBox ID="txtAddress" TextMode="MultiLine" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ControlToValidate="txtAddress" ErrorMessage="*" ForeColor="#FF3300" ValidationGroup="g1"></asp:RequiredFieldValidator>
</td>
<td align="right">
Location</td>
<td>
<asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server" ControlToValidate="txtLocation" ErrorMessage="*" ForeColor="#FF3300" ValidationGroup="g1"></asp:RequiredFieldValidator>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender5" runat="server" TargetControlID="txtLocation" FilterType="LowercaseLetters, UppercaseLetters" ></cc1:FilteredTextBoxExtender>
</td>
</tr>
<tr>
<td align="right">
MobileNumber:</td>
<td class="auto-style1">
<asp:TextBox ID="txtMobile" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" ControlToValidate="txtMobile" ErrorMessage="*" ForeColor="#FF3300" ValidationGroup="g1"></asp:RequiredFieldValidator>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" runat="server" TargetControlID="txtMobile" FilterType="Custom, Numbers" ValidChars="+"></cc1:FilteredTextBoxExtender>
</td>
<td align="right">
LandLine</td>
<td>
<asp:TextBox ID="txtLandLine" runat="server"></asp:TextBox></td>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server" TargetControlID="txtLandLine" FilterType="Custom, Numbers"></cc1:FilteredTextBoxExtender>
</tr>
<tr>
<td colspan="4" align="Center" >
<asp:Button ID="btnAddEmp" runat="server" ValidationGroup="g1" CssClass="dnnPrimaryAction" Text=" Add Employee" OnClick="btnAddEmp_Click" />
<asp:Button ID="btnCancel" runat="server" CssClass="dnnPrimaryAction" Text="Cancel" OnClick="btnCancel_Click" />
</td>
</tr>
</table>
</fieldset>
</div>
Step 2:-Now lets provide the link in default view from which we want to navigate..
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="View.ascx.cs" Inherits="Christoc.Modules.TSM.View" %>
<%@ Register TagPrefix="dnn" Assembly="DotNetNuke.Web" Namespace="DotNetNuke.Web.UI.WebControls" %>
<%@ Register TagPrefix="dnn" TagName="label" src="~/controls/labelControl.ascx" %>
<link href="Resources/CSS/style.css" rel="stylesheet" />
<link href="Resources/CSS/theme.css" rel="stylesheet" />
<div id="sidebar" style="height:430px; overflow:auto" >
<ul>
<li class="useradd">
<asp:LinkButton runat="server" CssClass="useradd" OnClick="EmpAdd_Click">Add Employee</asp:LinkButton></a></li>
<li><a href="../EditDeleteEmp.ascx" class="cart">Add Employee</a></li>
</ul>
</li>
</div>
Step3:-Now lets create a module definition click on Host and select Extensions and click on Edit Module
Step 4:-Click on Add Module Control as shown below and click on create
Step 5:-Now lets come back to code behind of AddEmployee.ascx and add the below code in the click event
protected void EmpAdd_Click(object sender, EventArgs e)
{
Response.Redirect(Globals.NavigateURL(PortalSettings.ActiveTab.TabID, "AddEmp", "mid=" + ModuleId.ToString()));
}
Now lets check the navigation
Click on Add Employee and we can see the navigation as shown
Conclusion
In this article we have learned how to Navigate in through user controls in DNN
Reference
http://www.christoc.com/Projects/Module-Development-Templates