The use of mulitply use rcontrols (partial views).

Hello,

Example user control (partial view)

Code:

---

<%@ 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' &amp;&amp; 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)

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" Show&#111;nload="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.