Question

THIS IS THE SITE.MASTER ASPX PAGE

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Prototype4.SiteMaster" %>

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”asp” %>

alert(“JS code in general: OK”);
$(function () {
$(“#lnkShowOtherPage”).click(function () {
alert(“OtherPagePanel length: ” + $(“#OtherPagePanel”).length);
alert(“OtherPagePanel load: ” + $(“#OtherPagePanel”).load);
$(“#OtherPagePanel”).load(“/EntryForms/OpenCase.aspx”);
});
});

    function updateClock() {
        var currentTime = new Date();

        var currentHours = currentTime.getHours();
        var currentMinutes = currentTime.getMinutes();
        var currentSeconds = currentTime.getSeconds();

        // Pad the minutes and seconds with leading zeros, if required
        currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
        currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

        // Choose either "AM" or "PM" as appropriate
        var timeOfDay = (currentHours < 12) ? "AM" : "PM";

        // Convert the hours component to 12-hour format if needed
        currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;

        // Convert an hours component of "0" to "12"
        currentHours = (currentHours == 0) ? 12 : currentHours;

        // Compose the string for display
        var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

        // Update the time display
        document.getElementById("clock").firstChild.nodeValue = currentTimeString;
    }

Case Management System

 

Welcome
!
[ ]
<%–Welcome:
!–%>

Welcome: Guest
[ Log In ]

                </asp:LoginView>
                <%--&nbsp;&nbsp; [&nbsp;<asp:LoginStatus ID="MasterLoginStatus" runat="server" LogoutAction="Redirect" LogoutPageUrl="~/Logout.aspx" />&nbsp;]&nbsp;&nbsp;--%>

            </div>
            <div class="topNav">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" 
                        ImageUrl="~/homeIcon.png"/>
                    <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" 
                        ImageUrl="~/aboutIcon.png"/>
                    <asp:MenuItem ImageUrl="~/contact_us_icon1.png" NavigateUrl="~/Contact.aspx" 
                        Text="Contact Us" Value="Contact Us"></asp:MenuItem>
                </Items>
            </asp:Menu>
            </div>
        </div>
            </div>

            </div>
            <div class="page" style="margin-top:5px;height:auto;">

            <div class="right" style="border-style:solid;padding-left: 4px; padding-right:4px;">
                <asp:Button ID="newsButton" runat="server" Text="News" 
                        class="fnctButton" Height="25px" Width="70px" />
                <div style="border-color: White; border-width:medium; border: medium;"> 
                <p style="text-align:left; font-size:1.2em; color:White;">
                    This is a place holder for some real text that is displayed regarding news within the departement and additional links to external sites for news.
                </p>
                </div>
                <asp:ContentPlaceHolder ID="RightNewsItem" runat="server"/>           

            </div>
            <div class="left" style="border-style:solid;">
                <asp:Button ID="functionButton" runat="server" Text="System Functions" 
                        class="fnctButton" Height="25px" Width="170px" />

                <asp:ContentPlaceHolder ID="LeftNavigation" runat="server">            


                </asp:ContentPlaceHolder>
            </div>
            <div class="middle" style= "border-bottom-style:solid;">
                <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
            </div>
            </div>



    <div class="clear">
    </div>

    <div class="footer">

        <span style="font-size: small;color: #FFFFFF;"><strong>Copyright 2011 JustRite Software Inc.</strong></span></div>
</form>

AND THIS ONE IS THE CASE ADMIN PAGE BASED ON THE MASTER PAGE. THERE ARE TWO BUTTONS ON THE LEFT NAVIGATION PANE THAT SHOULD LOAD A THIRD PAGE (OPENCASE OR ADDEXHIBIT) IN THE CENTRE SPACE DEPENDING ON WHICH BUTTON IS CLICKED. THE CASE ADMIN PAGE .ASPX BELOW.

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/Site.Master” AutoEventWireup=”true” CodeBehind=”CaseAdmin.aspx.cs” Inherits=”Prototype4.CaseAdmin” %>
<%@PreviousPageType VirtualPath=”~/Account/Login.aspx”%>

<div style="margin-top:20px; margin-bottom:20px;">
<p class="actionButton">        

        <a id="lnkShowOtherPage" href="#">Open Case</a> 
</p>
<p class="actionButton"><asp:LinkButton ID="RegisterExhibitLinkButton" 
        runat="server" onclick="RegisterExhibitLinkButton_Click">Register Exhibit</asp:LinkButton> </p>
</div>

<div id="OtherPagePanel" style="width:auto">

</div>         

THIS SECTION REPRESENTS THE CODE BEHIND FOR THE CASEADMIN PAGE THUS THE .CS CODES

using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Prototype4
{
public partial class CaseAdmin : System.Web.UI.Page
{
//string userid;
//string strUsername;
protected void Page_Load(object sender, EventArgs e)
{
//strUsername = Session[“Username”].ToString();
}
//public String AdminUserID
//{
// get
// {
// //return userid;
// }
//}

        //userid = PreviousPage.AdminID;


        //Response.Redirect("~/EntryForms/OpenCase.aspx", false);


        /* if (PreviousPage != null)
         {
             TextBox SourceTextBox =
                 (TextBox)PreviousPage.FindControl("UserName");
             if (SourceTextBox != null)
             {
                 userid = SourceTextBox.ToString();
             }
         }*/


    protected void RegisterExhibitLinkButton_Click(object sender, EventArgs e)
    {
        Response.Redirect("~/EntryForms/AddExhibit.aspx", false);
    }
}

}

THIS IS ONE OF THE TWO PAGES THAT SHOULD LOAD DEPENDING ON THE BUTTON CLICK. I HAVE ATTACHED THE CODE FOR THE OPENCASE FORM SO THAT WOULD CORRESPOND WITH THE OPENCASE LINK BUTTON ON THE LEFT. OPENCASE.ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OpenCase.aspx.cs" Inherits="Prototype4.EntryForms.OpenCase" %>

<%@PreviousPageType VirtualPath=”~/CaseAdmin.aspx” %>
<%@ Register assembly=”AjaxControlToolkit” namespace=”AjaxControlToolkit” tagprefix=”asp” %>

.casePage
{
width: 430px;
height:314px;
background-color:#3a4f63;
}
.style1
{
font-weight: normal;
color: #FFFFFF;
text-align: center;
}
.style2
{
font-weight: normal;
color: Black;
text-align: left;
margin-left: 20px;
margin-top:0px;

    }
    .style3
    {
        width: 85%;
    }
    .style4
    {
        width: 175px;
        background-color: #808080;
    }
    .style5
    {
        background-color: #CCCCCC;
        padding-left:10px;
    }
</style>

Open Case
Form

    <table class="style3" align="center">
        <tr>
            <td class="style4">
                <p class="style2">
                Case ID:    
                </p>
        </td>
            <td class="style5">
        <asp:TextBox ID="caseIDTextBox" 
            runat="server" height="22px" width="154px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style4">
                <p class="style2">
                Case Description:
                </p>
            </td>
            <td class="style5">
                <asp:TextBox ID="caseDescTextBox" 
            runat="server" height="22px" width="154px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style4">
               <p class="style2">
                Case Administrator ID:
                </p>
            </td>
            <td class="style5">
                <asp:TextBox 
            ID="caseAdminIDTextBox" runat="server" height="22px" width="154px"></asp:TextBox>
            </td>
        </tr>
    </table>






        </div>
        <div>


            <table class="style3" align="center">
                <tr>
                    <td align="left">
                        <asp:Button ID="openCaseBotton" runat="server" Text="Open Case" 
                            onclick="openCaseBotton_Click" />
                    </td>
                    <td align="center">
                        <asp:Button ID="addExhibitBotton" runat="server" Text="Add Exhibit" 
                            onclick="addExhibitBotton_Click" />
                    </td>
                    <td align="right">
                        <asp:Button ID="cancelButton" runat="server" Text="Cancel" 
                            onclick="cancelButton_Click" /></td>
                </tr>
            </table>


        </div>
</div>
</form>

AND LASTLY THE OPENCASE.CS PAGE

using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;

namespace Prototype4.EntryForms
{
public partial class OpenCase : System.Web.UI.Page
{
string adminString;
protected void Page_Load(object sender, EventArgs e)
{
adminString = “CA123”;
}

    protected void openCaseBotton_Click(object sender, EventArgs e)
    {
        //SQL connection string
        SqlDataSource CSMDataSource = new SqlDataSource();
        CSMDataSource.ConnectionString = ConfigurationManager.ConnectionStrings["CMSSQL3ConnectionString"].ToString();

        //SQL Insert command with variables
        CSMDataSource.InsertCommandType = SqlDataSourceCommandType.Text;
        CSMDataSource.InsertCommand = "INSERT INTO Filing (FilingID, FilingDesc, DateOpened, FilingPriority, AdministratorID) VALUES (@FilingID, @FilingDesc, @DateOpened, @FilingPriority, @AdministratorID)";

        //Actual Insertion with values from textboxes into databse fields
        CSMDataSource.InsertParameters.Add("FilingID", caseIDTextBox.Text);
        CSMDataSource.InsertParameters.Add("FilingDesc", caseDescTextBox.Text);
        CSMDataSource.InsertParameters.Add("DateOpened", DateTime.Now.ToString());
        CSMDataSource.InsertParameters.Add("FilingPriority", null);
        CSMDataSource.InsertParameters.Add("AdministratorID", adminString.ToString());

        int rowsCommitted = 0;

        //Try catch method to catch exceptions during insert
        try
        {
            rowsCommitted = CSMDataSource.Insert();

        }

        catch (Exception ex)
        {
            //error message displayed when exception occurs


            string script = "<script>alert('" + ex.Message + "');</script>";
            Response.Write("The following Error occurred while entering the records into the database" + " " + ex.ToString() + " ");
            Response.Redirect("~/ErrorPage.aspx", false);
        }
        finally
        {
            CSMDataSource = null;
        }

        //Where to go next if insert was successful or failed
        if (rowsCommitted != 0)
        {
            Response.Redirect("~/CaseAdmin.aspx", false);
        }
        else
        {

            Response.Redirect("~/ErrorPage.aspx", false);
        }

    }

    protected void addExhibitBotton_Click(object sender, EventArgs e)
    {
        Response.Redirect("~/EntryForms/AddExhibit.aspx", false);

    }

    protected void cancelButton_Click(object sender, EventArgs e)
    {
        Response.Redirect("~/CaseAdmin.aspx", false);
    }
}

}

ALL I WANT TO DO IS GET THE RESPECTIVE PAGES TO LOAD INSIDE THE MAIN CONTENT AREA (THE MIDDLE SECTION) WITHOUT RELOADING THE PAGE. ITS BEEN A LONG WAY COMING BUT PROVED SUCCESSFUL WITH A LOT TO LEARN BUT I JUST WANT TO KNOW HOW I CAN APPLY THIS SAME TECHNIQUE TO THE OTHER BUTTON CLICK(ADD EXHIBIT) SINCE IN THE AJAX CODE IN THE HEADER OF THE MASTER PAGE SPECIFIES THE URL ON JUST ONE PAGE. HOW DO I DO THAT FOR SUBSEQUENT PAGES THAT USE THE MASTER PAGE AND WOULD BE DOING SIMILAR ACTIONS. FOR EXAMPLE THE CASE MANAGER PAGE THAT LOOKS LIKE THIS.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="CaseManager.aspx.cs" Inherits="Prototype4.CaseManager" %>

This is a place holder for allerts about cases to which the investigator has been assigned to.

    <div style="margin-top:20px; margin-bottom:20px;">    
<p class="actionButton"><asp:LinkButton ID="AllocateOfficerLinkButton" runat="server">Allocate Officer</asp:LinkButton> </p>
<p class="actionButton"><asp:LinkButton ID="ReallocateLinkButton" runat="server">Reallocate Officer</asp:LinkButton> </p>
<p class="actionButton"><asp:LinkButton ID="SetPriorityLinkButton" runat="server">Prioritize Case</asp:LinkButton> </p>
<p class="actionButton"><asp:LinkButton ID="OpenCaseLinkButton" runat="server">Open Case</asp:LinkButton> </p>
<p class="actionButton"><asp:LinkButton ID="RegisterExhibitLinkButton" runat="server">Register Exhibit</asp:LinkButton> </p>
</div>

I WANT TO TO DO SOMETHING SIMILAR LIKE IN THE CASE ADMIN PAGE BUT AM WONDERING WHAT THE CODES WILL ADD UP TO BE LIKE IN THE MASTER PAGE.

THANKS…

Answer 1

I actually just wanted to load a form
that is created in another asp. page
into the main content area…

I fear that what you need is not UpdatePanel but rather “ordinary” AJAX loading that other page contents into some element.. using jQuery it’s as simple as:

$("#OtherPagePanel").load("OtherPage.aspx");

Where OtherPagePanel is the ID of some element in your .aspx code.

You can pass parameters to the other page over the URL, if you need to Post data it’s still possible but requires some extra lines – let us know in such case.

Edit:

In the placeholder where you want the data from other page to appear, have this:

<div id="OtherPagePanel"></div>

Have such link in the other placeholder: (no need in LinkButton, ordinary HTML link is enough)

<a id="lnkShowOtherPage" href="#">Show other page</a>

Now in the <head> section of your master page add this code and it’s all done:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#lnkShowOtherPage").click(function() {
        $("#OtherPagePanel").load("OtherPage.aspx");
    });
});
</script>

You can also copy the jQuery.min.js file to your own server and change the src accordingly.

Edit 2:

In order to debug add such lines to the code, it will tell what went wrong:

<script type="text/javascript">
alert("JS code in general: OK");
$(function() {
    alert("Page load: OK");
    $("#lnkShowOtherPage").click(function() {
        alert("Link click: OK");
        $("#OtherPagePanel").load("OtherPage.aspx");
    });
});
</script>

Reload the page and let us know what alerts you get.

Edit 3:

Based on the previous debug results, have this code now:

<script type="text/javascript">
$(function() {
    $("#lnkShowOtherPage").click(function() {
        alert("OtherPagePanel length: " + $("#OtherPagePanel").length);
        alert("OtherPagePanel load: " + $("#OtherPagePanel").load);
        $("#OtherPagePanel").load("OtherPage.aspx");
    });
});
</script>

Edit 4 and hopefully last:

In order to load different page into different div by clicking different button in addition to everything you already have, have such code:

<script type="text/javascript">
$(function() {
    $("#lnkShowOtherPage").click(function() {
        $("#OtherPagePanel").load("OtherPage.aspx");
    });

    $("#lnkShowDifferentOtherPage").click(function() {
        $("#DifferentOtherPagePanel").load("DifferentOtherPage.aspx");
    });
});
</script>