Oct 15, 2009, 6:07 AM
The use of mulitply use rcontrols (partial views).
Hello,
Example user control (partial view)
Example of user control implementation. (just a part of code)
The problem:
We wanna use the same user control twice or more on the same page.
So what i want that every user control (partiall view) is unique when implementing it on a page. and the IDS are know.
the javascript can still adjust the behavor of that specifc user control.
Example user control (partial view)
<%@ Control Language="C#"%>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<script type="text/javascript">
/// <summary>
/// Public methods, for the pages who implement this user control.
/// </summary>
UCOrderBasket =
{
loadProductStore: function()
{
ProductInSessionStore.load();
TotalPriceStore.load();
}
};
/// <summary>
/// ProductName convertor.
/// </summary>
/// <returns>
/// <param href="value" /> that starts with uppercase.
/// </returns>
function convertProductName(value, record)
{
return (value.substr(0,1).toUpperCase() +
value.substr(1));
}
/// <summary>
/// TotalPrice convertor.
/// </summary>
/// <returns>
/// <param href="value" /> or custom string.
/// </returns>
function converTotalPrice(value, record)
{
return (value == 0 ? "0.00" : value);
}
/// <summary>
/// PrepareCommand, handles commands, toggles delete command.
/// </summary>
function prepareCommand(grid, command, record, row)
{
if (command.command == 'Delete' && record.data.IsPaid)
{
command.hidden = true;
command.hideMode = 'visibility';
}
}
/// <summary>
/// Renderer for IsPaid column.
/// </summary>
/// <returns>
/// tooltip, cursor, icon or productPrice
/// </returns>
function renderIsPaid(value, metadata, record, rowIndex, colIndex, store)
{
if (value)
{
var tooltip = '<%= Html.Encode((string)GetLocalResourceObject("Tooltip_IsPaid")) %>';
return returnStr = '<img ext:qtip="' + tooltip + '" style="cursor:pointer;" src="/icons/tick-png/coolite.axd" />';
}
return record.data.Price;
}
/// <summary>
/// Renderer for InPossession column.
/// </summary>
/// <returns>
/// tooltip, cursor, icon.
/// </returns>
function renderInPossession(value, metadata, record, rowIndex, colIndex, store)
{
var icon = value ? "tick" : "cross";
var tooltip = value ? '<%= Html.Encode((string)GetLocalResourceObject("Tooltip_InPossession")) %>' :
'<%= Html.Encode((string)GetLocalResourceObject("Tooltip_NotInPossession")) %>';
return returnStr = '<img ext:qtip="' + tooltip + '" style="cursor:pointer;" src="/icons/' + icon + '-png/coolite.axd" />';
}
function lala() {
}
</script>
<%-- Products in session store --%>
<ext:Store ID="ProductInSessionStore" runat="server" AutoLoad="false" SerializationMode="Simple">
<Proxy>
<ext:HttpProxy Method="GET" Url="/Voucher/GetItemsInOrderBasket/" />
</Proxy>
<Reader>
<ext:JsonReader ReaderID="Id" Root="data">
<Fields>
<ext:RecordField Name="Id" Type="int" />
<ext:RecordField Name="Name" Type="string" >
<Convert Fn="convertProductName" />
</ext:RecordField>
<ext:RecordField Name="Price" Type="float" />
<ext:RecordField Name="IsPaid" Type="boolean" />
<ext:RecordField Name="InPossession" Type="boolean" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<BeforeLoad Handler="BasketPanel.el.mask('Loading...', 'x-mask-loading');" />
<Load Handler="BasketPanel.el.unmask();" />
</Listeners>
</ext:Store>
<%--Total price store--%>
<ext:Store ID="TotalPriceStore" runat="server" AutoLoad="false" SerializationMode="Simple">
<Proxy>
<ext:HttpProxy Method="GET" Url="/Voucher/GetTotalBasketPrice/" />
</Proxy>
<Reader>
<ext:JsonReader ReaderID="Id" Root="data">
<Fields>
<ext:RecordField Name="TotalPrice">
<Convert Fn="converTotalPrice" />
</ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<DataChanged Handler="TotalTextField.setValue( this.getAt(0).get('TotalPrice') );" />
</Listeners>
</ext:Store>
<%--View--%>
<ext:FitLayout ID="BasketMainFitLayout" runat="server">
<ext:Panel ID="BasketPanel" runat="server" Border="false">
<Body>
<ext:FitLayout ID="BasketGridFitLayout" runat="server">
<ext:GridPanel ID="BasketGridPanel" StoreID="ProductInSessionStore" runat="server" AutoExpandColumn="Name" TrackMouseOver="true">
<ColumnModel ID="BasketColumnModel" runat="server">
<Columns>
<ext:Column ColumnID="Name" DataIndex="Name" meta:resourcekey="ProductName" />
<ext:Column ColumnID="Price" DataIndex="IsPaid" meta:resourcekey="IsPaid">
<Renderer Fn="renderIsPaid" />
</ext:Column>
<ext:Column ColumnID="InPossession" DataIndex="InPossession" meta:resourcekey="InPossession">
<Renderer Fn="renderInPossession" />
</ext:Column>
<ext:ImageCommandColumn Hideable="false">
<Commands>
<ext:ImageCommand CommandName="Delete" Icon="Delete" meta:resourcekey="Delete">
<ToolTip Text="<%$ Resources: Tooltip_Delete_Product %>" />
</ext:ImageCommand>
</Commands>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<AjaxEvents>
<Command Url="/Voucher/RemoveItemFromBasket/" Success="UCOrderBasket.loadProductStore();">
<ExtraParams>
<ext:Parameter Name="ItemId" Value="record.id" Mode="Raw" />
</ExtraParams>
</Command>
</AjaxEvents>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
</ext:FitLayout>
</Body>
<BottomBar>
<ext:Toolbar ID="BasketToolbar" runat="server">
<Items>
<ext:Label runat="server" Text="Totaal nog te betalen: " StyleSpec="margin-right: 10px" />
<ext:TextField ID="TotalTextField" Width="75" runat="server" ReadOnly="true" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</ext:FitLayout>
As you see the user control has a public methodes to define sertain behavor or loads needed for that specifief usercontrol.Example of user control implementation. (just a part of code)
<%--import--%>
<%@ Import Namespace="Riset.CTIS.VoucherPortal.Controllers" %>
<%--Register--%>
<%@ Register src="~/Views/Voucher/UserControls/OrderBasket.ascx" tagname="OrderBasket" tagprefix="uc" %>
<%--Reference--%>
<%@ Reference Control="~/Views/Voucher/UserControls/OrderBasket.ascx" %>
<%--page--%>
<!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 id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="~/Content/Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Content/Scripts/Site.js"></script>
<title>
<asp:Literal ID="Title" runat="server" Mode="Encode" meta:resourcekey="PageTitle"/>
</title>
<asp:ContentPlaceHolder ID="HeadContentPlaceHolder" runat="server" />
<script runat="server" type="text/C#">
protected void Page_Load()
{
}
</script>
<script type="text/javascript">
function ShowBasket()
{
UCOrderBasket.loadProductStore();
Basketwindow.show();
}
</script>
</head>
<ext:Window ID="BasketWindow" runat="server" Icon="Basket" Title="Atitle" Showonload="false" width="500" Height="200">
<Body>
<uc:OrderBasket ID="OrderBasket" runat="server" />
</Body>
</ext:Window>
(Information, i dont use behind code, i only use c# code when there is other option.The problem:
We wanna use the same user control twice or more on the same page.
So what i want that every user control (partiall view) is unique when implementing it on a page. and the IDS are know.
the javascript can still adjust the behavor of that specifc user control.