I have a requirement for four similar pages in an ASP.Net webforms application. All four pages will have a header with a dropdown and two buttons. I intend to use a master page for this header and then content pages for each of the different pages I need to produce. My master looks like this:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Processing.master.cs" Inherits="MyProject.Processing" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="../../Stylesheets/Processing.css" type="text/css" rel="stylesheet" />
<script language="javascript" src="../../Scripts/js/Processing.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="ProcessingForm" height="100%" runat="server">
<asp:Label ID="titleLabel" runat="server" class="bold"></asp:Label>
<asp:Label runat="server" ID="storeLabel" Text="Store:" />
<asp:ObjectDataSource runat="server" ID="storesDataSource" TypeName="MyProject.Processing"
SelectMethod="GetStoresDataSource">
<SelectParameters>
<asp:QueryStringParameter Name="UserName" QueryStringField="eUserName" DefaultValue="" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:DropDownList runat="server" ID="storeDropdown" AutoPostBack="true" OnSelectedIndexChanged="storeDropdown_SelectedIndexChanged"
AppendDataBoundItems="true" DataSourceID="storesDataSource" DataTextField="Display"
DataValueField="Number">
<asp:ListItem />
</asp:DropDownList>
<asp:Button ID="refreshButton" runat="server" Text="Refresh" OnClick="refreshButton_Click" />
<%-- ************************************************************************************--%>
<%-- This is the button that I want to add client side behaviour to from my content pages--%>
<%-- ************************************************************************************--%>
<asp:Button ID="processButton" runat="server" Text="Process" OnClick="processButton_Click"
OnClientClick="DoStuff();" />
<asp:ContentPlaceHolder ID="GridDiv" runat="server" />
</form>
</body>
</html>
In the Processing.master.cs I've defined an event that the content pages can subscribe to to react when the dropdown changes:
public delegate void StoreChangedHandler(object sender, string selectedValue);
public event StoreChangedHandler OnStoreChanged;
protected void storeDropdown_SelectedIndexChanged(object sender, EventArgs e)
{
if (OnStoreChanged != null)
{
OnStoreChanged(sender, ((DropDownList)sender).SelectedValue);
}
}
So the content page's OnLoad contains:
protected void Page_Load(object sender, EventArgs e)
{
((Processing)Master).OnStoreChanged += StockRoomWithMaster_OnSomethingSelected;
}
void StockRoomWithMaster_OnSomethingSelected(object sender, string selectedValue)
{
this.stockReceiptGridView.DataBind();
}
What is the best way to do this same strategy for the client side DoStuff() function call that occurs when the processButton control is clicked? I could declare a global variable in the Processing.js file and in the content page assign it to a function:
Processing.js:
var processButtonClickedHandler;
function DoStuff()
{
if (processButtonClickedHandler) {
processButtonClickedHandler();
}
}
In content page:
$(document).ready(function() {
processButtonClickedHandler = DoSpecificStuff;
});
function DoSpecificStuff() {
// Custom page client side stuff
}
