Navigate between views in your Dotnetnuke Module

Rama Sagar
Posted by in C# category on for Beginner level | Points: 250 | Views : 6683 red flag

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

Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
ramasagar
http://www.ramasagar.com
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)