Develop Reference

Blazor How to get a Blazor component to not reload/re-render

I am building a dynamic Drop Down Navigation bar in Blazor. Now the problem is that when paging occurs the Navbar component reloads and the drop down dissapears (which is not what I want).
I know this is true because when I take the navigationManager.NavigateTo(route); out of the equation then it works as intended.
My MainLayout:
<div style="height: 100%; width: 100%; display: flex;">
<div style="height: 100%; width: 170px">
<NavigationMenu></NavigationMenu>
</div>
<div class="flex-child-expand">
#Body
</div>
</div>
NavigationMenu.razor
<div>
#foreach (var navButton in NavManager.MainNavButtons)
{
<div class="dropdown">
<button class="#navButton.StyleClassString" #onclick="#(() => OnButtonClicked(navButton, navButton.ButtonRoute))">#navButton.ButtonString</button>
<div class="dropdown-content">
#foreach (var button in navButton.SubSection)
{
<button class="#button.StyleClassString" #onclick="#(() => OnButtonClicked(navButton, button.ButtonRoute, button.ButtonString))">#button.ButtonString</button>
}
</div>
</div>
}
</div>
private void OnButtonClicked(NavManager.NavButton mainButtonPressed, string route, string buttonString = "")
{
if(buttonString == "")
{
foreach (var mainbtn in NavManager.MainNavButtons)
{
if (mainbtn.Section == mainButtonPressed.Section)
{
mainbtn.StyleClassString = ButtonActiveStyle.active;
}
else
{
mainbtn.StyleClassString = ButtonActiveStyle.normal;
}
//cleanup
foreach (var subButton in mainbtn.SubSection)
{
subButton.StyleClassString = ButtonActiveStyle.normal;
}
}
if(mainButtonPressed.SubSection.Count > 0)
{
mainButtonPressed.SubSection[0].StyleClassString = ButtonActiveStyle.active;
}
}
else
{
foreach (var mainbtn in NavManager.MainNavButtons)
{
if (mainbtn.Section == mainButtonPressed.Section)
{
mainbtn.StyleClassString = ButtonActiveStyle.active;
}
else
{
mainbtn.StyleClassString = ButtonActiveStyle.normal;
}
foreach (var subButton in mainbtn.SubSection)
{
if (subButton.ButtonString == buttonString)
{
subButton.StyleClassString = ButtonActiveStyle.active;
}
else
{
subButton.StyleClassString = ButtonActiveStyle.normal;
}
}
}
}
GoToPage(route);
}
private void GoToPage(string route)
{
navigationManager.NavigateTo(route);
}
*Sorry for bad indentation.
So is there a way to make the NavigationMenu.razor component from not rendering or reloading it's state when I call navigationManager.NavigateTo(route);?

To avoid a component to auto reload, you should override the ShouldRender method, and make it always return false.
However, you should check your resulting HTML. It seems that the page that you are navigating into does not inherit MainLayout.
This means that it will overwrite the
<div style="height: 100%; width: 100%; display: flex;">
<div style="height: 100%; width: 170px">
<NavigationMenu></NavigationMenu>
</div>
<div class="flex-child-expand">
#Body
</div>
</div>
portion for whatever the page contains, even if you return false in the ShouldRender.
A state change in the NavigationMenu component should not make it disappear.

NavigateTo(route) loads an entire page afresh specified by the 'route' address.
Layouts are specified at a page level. When you navigate to an address, the layout is initialized again and its UI state is reset. This means that all your dropdown expansions, formatting changes etc are lost. For example, in your case, the following CSS assignment is lost:
subButton.StyleClassString = ButtonActiveStyle.normal;
StyleClassString members of subButton(s) will be reset to the initial value (is it null?)
Therefore, the only way you can make sure that the dropdown persists its state, is if you store it somewhere.
You can achieve it in two ways:
Read it from the current URL
Store it as a state somewhere in the memory and read it in OnInitialized (complex and I won't really recommend)

How to access for each loop html properties to code behind?

i'm trying to access these data in code behind file. if i change these html tag to asp tags i cannot retrieve data from for each loop. here i want actual sales price and the product size which are generated by for each loop to save these properties in database. So is there any possible ways to solve these problem??
aspx page
<%
foreach (Com.Idk.Application.ImaraResPOS.Entities.ProductSize psize in psList)
{
%>
<div class="col-sm-12 text-center type">
<div class="circle bg">
<img src="images/Meal-100.png">
</div>
<div class="btn-align-size">
<button class="btn btn-primary ladda-button cd-add-to-cart" data-price="<%=psize.SalesPrice %>" data-name="<%= psize.SizeDef.Name %>" data-product-image="images/3.jpg" data-style="expand-right" id="Breadtype_btn" data-dismiss="modal" data-toggle="modal" data-target="#bread_type">
<%= psize.SizeDef.Name %>
<img src="images/Buy-30.png" style="height: 30px; width: 30px">
<h3 class="hide">
<%= psize.Id%>
</h3>
</button>
</div>
</div>
<%
}
%>
code behind
private void InsertProductSizeToSale()
{
string sizeID = Request.QueryString["size_id"].ToString();
Com.Idk.Application.ImaraResPOS.Entities.ProductSize prid = new Com.Idk.Application.ImaraResPOS.Entities.ProductSize();
psList.Select(Global.sess, "ProductSize","where Product_ID="+ prid);
if (psList.Count > 0)
{
Hashtable parameterList = new Hashtable();
OfferDetailList odList = new OfferDetailList();
parameterList.Clear();
parameterList.Add("productSizeId", sizeID );
parameterList.Add("comboId", null);
parameterList.Add("currentDate", DateTimeUtil.GetFormattedString(((Sale)index.saleid).Date));
parameterList.Add("currentTime", DateTimeUtil.GetFormatedTimeString(DateTime.Now));
parameterList.Add("day", Const.GetDay(((Sale)index.saleid).Date.DayOfWeek));
odList.SelectUsingSP(Global.sess, "SqlProGetOfferDetail", parameterList);
if (odList.Count == 0)
{
//want to retrive psize properties here
// here i'm getting an error
SqlProInsertProductSizeToSale(prid, sizeID, psize.SalesPrice, psize.SalesPrice);
}
else if (odList.Count > 0)
{ SqlProInsertProductSizeToSale(selectedProduct, selectedProductSize, odSelection.GetSelectedProductSizePrice(), selectedProductSize.SalesPrice);
}
}
}
}

I am not sure why you wish to get the data from the page. Since you are populating the page from some entity objects, why not just get the data from the entity objects directly?
Codebehind
foreach (Com.Idk.Application.ImaraResPOS.Entities.ProductSize p in psList)
{
SqlProInsertProductSizeToSale(p.prid, p.sizeID, p.SalesPrice, p.SalesPrice);
}

ASP.NET MVC 2 View with PartialView - PartialView Opens New Page

My code works perfectly in VS2010 C# but once published to IIS7 the PartialView (list of records) does not get rendered in the View...it rolls to a new page without the data except for the correct record count retrieved from SQL server. SQL server is on separate box.
I have searched for hours on this site with no luck finding a resolution.
View with the RenderPartial:
<table style="width:100%">
<tr>
<td>
<h3>Outage Tracking List (Open or Active)</h3>
</td>
<td style="text-align:right">
<h1><%: ViewData["ApplicationName"]%></h1>
</td>
</tr>
</table>
<% Html.RenderPartial("OutageSearch",this.ViewData.Model); %>
PartialView:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&ltOutageTrackingWebSite.Models.OutageViewModel" %>
<div>
<script language="javascript" type="text/javascript">
function OutageSearch() {
$("#OutageSearchForm #CurrentPageNumber").val("1");
PostSearchForm();
}
Various functions then the rest of the partialview
<% using (Ajax.BeginForm("OutageSearch", null,
new AjaxOptions { UpdateTargetId = "DivOutageSearchResults", OnComplete="OutageSearchComplete" },
new { id = "OutageSearchForm" })) { %>
<table style="background-color: #ebeff2; width: 100%; border:solid 1px #9fb8e9" cellspacing="2" cellpadding="2">
<tr>
<td style="width: 60%; text-align: left">
<input id="btnSearch" onclick="OutageSearch();" type="submit" value="List Open/Active" />
</td>
</tr>
</table>
<div id="DivOutageSearchResults">
<% Html.RenderPartial("OutageSearchResults", this.ViewData.Model); %>
</div>
<% } %>
additional PartialView
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<%OutageTrackingWebSite.Models.OutageViewModel" >
<input name="CurrentPageNumber" type="hidden" id="CurrentPageNumber" value="<%=Model.CurrentPageNumber%>" />
<input name="TotalPages" type="hidden" id="TotalPages" value="<%=Model.TotalPages%>" />
<input name="SortBy" type="hidden" id="SortBy" value="<%=Model.SortBy%>" />
<input name="SortAscendingDescending" type="hidden" id="SortAscendingDescending" value="<%=Model.SortAscendingDescending%>" />
<input name="PageSize" type="hidden" id="PageSize" value="9" />
<script language="javascript" type="text/javascript">
function GetOutageDetails(OutageID) {
if (formIsDisabled == false) {
DisableForm();
formData = "OutageID=" + OutageID;
setTimeout(PostOutageIDToServer, 1000);
}
}
function PostOutageIDToServer() {
$.post("/Outage/GetOutageInformation", formData, function (data, textStatus) {
OutageUpdateComplete(data);
}, "json");
}
Controller
public ActionResult DisplayOutageList()
{
Models.OutageViewModel outageViewModel = new Models.OutageViewModel();
outageViewModel.TotalPages = 0;
outageViewModel.TotalRows = 0;
outageViewModel.CurrentPageNumber = 0;
ViewData.Model = outageViewModel;
string applicationName = Convert.ToString( System.Configuration.ConfigurationManager.AppSettings["ApplicationName"]);
ViewData["ApplicationName"] = applicationName;
return View("OutageMaintenance");
}
///
/// Outage Search
///
///
public PartialViewResult OutageSearch()
{
long totalRows;
long totalPages;
bool returnStatus;
string returnErrorMessage;
OutageBLL OutageBLL = new OutageBLL();
Models.OutageViewModel outageViewModel = new Models.OutageViewModel();
this.UpdateModel(outageViewModel);
List Outages = OutageBLL.OutageSearch(
outageViewModel,
outageViewModel.CurrentPageNumber,
outageViewModel.PageSize,
outageViewModel.SortBy,
outageViewModel.SortAscendingDescending,
out totalRows,
out totalPages,
out returnStatus,
out returnErrorMessage);
ViewData["Outages"] = Outages;
outageViewModel.TotalPages = totalPages;
outageViewModel.TotalRows = totalRows;
ViewData.Model = outageViewModel;
return PartialView("OutageSearchResults");
}
///
/// Get Outage Information
///
///
public JsonResult GetOutageInformation()
{
bool returnStatus;
string returnErrorMessage;
List returnMessage;
OutageBLL outageBLL = new OutageBLL();
Models.OutageViewModel outageViewModel = new Models.OutageViewModel();
this.TryUpdateModel(outageViewModel);
Outage outage = outageBLL.GetOutageInformation(
outageViewModel.OutageID,
out returnStatus,
out returnErrorMessage,
out returnMessage);
outageViewModel.UpdateViewModel(outage, typeof(Outage).GetProperties());
outageViewModel.ReturnMessage = returnMessage;
outageViewModel.ReturnStatus = returnStatus;
outageViewModel.OutageScheduledDate = UtilitiesBLL.FormatDate(outageViewModel.ScheduledDate);
outageViewModel.OutagePlannedDuration = UtilitiesBLL.FormatDuration(outageViewModel.PlannedDuration);
return Json(outageViewModel);
}

Check your included JavaScript files on the deployed version. If you are missing some files (MicrosoftMvcAjax.js, jQuery.js), the page could simply be posting instead of using an Ajax post.

image in div via codebehind

I'm trying to achieve setting my image inside my div id =test this has became extremely problematic:
cn.Open();
using (OdbcCommand cmd = new OdbcCommand("SELECT Wallpostings FROM WallPosting WHERE UserID=" + userId + " ORDER BY idWallPosting DESC", cn))
{
using (OdbcDataReader reader = cmd.ExecuteReader())
{
var divHtml = new System.Text.StringBuilder();
while (reader.Read())
{
Image img = new Image();
img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
divHtml.Append("<div id=test>");
divHtml.Append(img + String.Format("{0}", reader.GetString(0)));
// how can I append an img inside my div id=test?
// the image must stay at the start of the div id=test + the contents(text) from my database (in that order)
divHtml.Append("</div>");
}
test1.InnerHtml = divHtml.ToString();
}
}
}
}
css:
* { padding: 0; margin: 0; outline: 0; }
body {
font-size: 12px;
line-height: 1.2;
font-family: Arial, "Trebuchet MS", sans-serif;
color: #a0a0a0;
background: url(images/bg.gif) repeat 0 0;
text-align: left;
}
div#test1 {
}
div#test
{
width:90%;
z-index:1;
padding:27.5px;
border-top: thin solid #736F6E;
border-bottom: thin solid #736F6E;
color:#ffffff;
margin:0 auto;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
}
Asp html:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<p>
<asp:TextBox ID="TextBox1" name="TextBox1" runat="server" Rows="3"
Height="47px" Width="638px"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Post Message" Width="98px"
onclick="Button1_Click" />
</p>
<p>
</p>
<div id="test1" runat="server" />
// contents from my code go inside this div as div id=test
</asp:Content>
Firebug output:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1"><div id="test">System.Web.UI.WebControls.Imageweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div><div id="test">System.Web.UI.WebControls.Imagehello</div><div id="test">System.Web.UI.WebControls.Imagestill trying</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imagelets try this again</div><div id="test">System.Web.UI.WebControls.Imagehair marry went up the hill</div><div id="test">System.Web.UI.WebControls.Imagewedfwedwe</div><div id="test">System.Web.UI.WebControls.Imagewedfwedwe</div><div id="test">System.Web.UI.WebControls.Imagekjgfkjh</div><div id="test">System.Web.UI.WebControls.Imageanother comment</div><div id="test">System.Web.UI.WebControls.Imagebla bla hope this works</div></div>
I know the reason why my code outputs the actual text of the web ui controls, I have had in another post code that actually gets the image up but it adds the image onto the "END" of the test div so rather than it look like this:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1">
<div id="test"><img src=blabla></img> the text goes after the image </div>
It looks like this:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1">
<div id="test"> text comes before image </div>
<img src=blabla></img>
<div id="test">hello</div>
<img src=blabla></img>
Which isn't what I want, the code I've added although I know the reasons why it outputs the web controls text is just a demonstration of "how" I'm trying to get it to work.
divTest.Append on img THEN text;
Of course I cant append I would have to use controls.add but I still couldn't get it to work.
Previous post is here so you can see some images and some ideas:
My code below gives me a problem, the image comes after the text

Image is a web control. You can't stick it in a StringBuilder.

Is it possible to reference a linkbotton outside an update panel as the update trigger?

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>
<%-- [ <asp:LoginStatus ID="MasterLoginStatus" runat="server" LogoutAction="Redirect" LogoutPageUrl="~/Logout.aspx" /> ] --%>
</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...

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>

Is it a postback trigger or an async postback trigger?
i think you can register controls as post back or async on a script manager level with:
Control oControl;
ScriptManager1.RegisterAsyncPostBackControl(oControl);
you could try that