Using AutoComplete Ajax Control With Separate ID Field from Name Field

In the previous post, I detailed how to use the SQL stored procedure to select matches.

AutoComplete Extender offers a convenient way to select values froma TextBox. One problem is that multiple details can be displayed, but the whole text is selected by default. I wanted to allow multiple AutoCompletes, select the id without the other details and append the appropriate delimeter in between entries. First, I setup the WebService method. Note that the Stock object has Symbol and Name properties:

   [WebMethod]
    public string[] GetStocksInPrefix(string prefixText, int count)
    {
        int curCount = 0;
        if (count == 0)
        {
            count = 10;
        }
        List<string> items = new List<string>();
        JavaScriptSerializer jss = new JavaScriptSerializer();
        string[] stocks = null;
        string connectionString = getConnectionString("ConnectionString");
        SqlDataReader rdr = null;
        SqlConnection conn = new SqlConnection(connectionString);
        System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand("sproc_aspnet_GetStocksByPrefix", conn);
        try
        {
            command.CommandType = System.Data.CommandType.StoredProcedure;
            conn.Open();
            command.Parameters.AddWithValue("@Prefix", prefixText+"%");
            rdr = command.ExecuteReader();
            string tmp = string.Empty;
            Stock _stock = null;
            while (rdr.Read() && curCount<count )
            {
                _stock = new Stock(rdr["Symbol"].ToString(), rdr["Name"].ToString(), rdr["Exchange"].ToString());
                tmp = rdr["Symbol"] + "\t" + rdr["Name"];
                items.Add(AutoCompleteExtender.CreateAutoCompleteItem(tmp, jss.Serialize(_stock)));
                curCount++;
            }
            command.Parameters.Clear();
        }
        catch (Exception ex)
        {
        }
        finally
        {
            if (rdr != null) rdr.Close();
            if(conn!=null) conn.Close();
        }
        return items.ToArray();
    }

Then, I add the javascript event, 'OnSymbolSelected',to the OnClientItemSelected event in the AutoComplete Extender:

                    <asp:TextBox ID="txtSymbols" runat="server" Width="300px"></asp:TextBox>
                    <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 
                        TargetControlID="txtSymbols" ServiceMethod="GetStocksInPrefix" 
                        ServicePath="~/WebServiceAutoCompleteSymbol.asmx" MinimumPrefixLength="2"
                        CompletionListHighlightedItemCssClass="watermark" CompletionSetCount="10"
                        DelimiterCharacters=", "
                        CompletionListElementID="Symbol"
                        CompletionListItemCssClass="watermarkMatch"                        
                        EnableCaching="true" CompletionInterval="1000" OnClientItemSelected="OnSymbolSelected"
                         >
                    </cc1:AutoCompleteExtender>

Finally, add the javascript function to the aspx page. This function reads the Stock object into results, takes the SelectedText and gets the original string before the new text was completed by replacing the completed text with an empty string. If it is an additional field (that does not contain ' ' or ',', then only the id (symbol in this case) is added. Othewise, the original id plus the ' ' delimeter and the new id is added:

<script type="text/javascript" language="javascript">   
    function OnSymbolSelected(source, eventArgs)   
    {   
        var results = eval('('  + eventArgs.get_value() + ')');   
        if (results.symbol != null)   {  
            var symbols = document.getElementById('<%= txtSymbols.ClientID %>').value;
            var original = symbols.replace((results.symbol+'\t'+results.name),'');
            if (original.indexOf(' ')>0 || original.indexOf(',')>0)
                document.getElementById('<%= txtSymbols.ClientID %>').value = original + (' '+ results.symbol);
            else  
                document.getElementById('<%= txtSymbols.ClientID %>').value = results.symbol;
            }
    }   
</script>  

References: http://ziqbalbh.wordpress.com/2008/06/11/google-like-autocomplete-suggestions/
http://www.tizag.com/javascriptT/javascript-string-replace.php
http://techron.blogspot.com/2008/04/reading-textbox-or-other-control-values.html

How to trim a string in javascript

How to trim a string in javascript:

var trimmed = str.replace(/^\s+|\s+$/g, '') ;

Reference: http://www.nicknettleton.com/zine/javascript/trim-a-string-in-javascript

Reading TextBox or other Control values with javascript

Reading TextBox or other Control values with javascript.
Assume TextBox ID="txtName"
First, there are the simple examples of a standard aspx page:

<script type="text/javascript" languague="javascript">
   function simple1() {
      var txtVal = $get('<%= txtName.ClientID %>').value;
   }
   function simple2() {
      var txtVal = $document.getElementById('<%= txtName.ClientID %>').value;
   }
</script>

Here is the complex sample used for accessing a MasterPage's updatePanel for example:

// In the ASPX class
private string scriptKey = "alertName";
private string script = "function alertName() { var txt = document.getElementById('[txtNameID]'); alert(txt.value); }"; 

// In the Page_Load event
script = script.Replace("[txtNameID]", txtName.ClientID);
ClientScript.RegisterClientScriptBlock(this.Page.GetType(), scriptKey, script, true); 

references: http://www.velocityreviews.com/forums/t109803-callback-manager-masterpage.html

Running a client-side application using javascript in asp.net

Here is how to run a client-side application (.exe) using javascript in asp.net. I don't recommend it, because you probably have to lower your IE security (Tools -> Internet Options -> Security... and allow unsafe activeX).

    <script language="javascript" type="text/javascript">
        function btnSubmit_Click() {
            var WshShell = new ActiveXObject("WScript.Shell"); 
            WshShell.Run("calc.exe"); 
        }
    </script>
    <div>
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="btnSubmit_Click();" />
    </div>

reference: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_11275014.html

Previewing a TextBox that has HTML with a Popup Window

Here is a nifty way to preview HTML in a TextBox. I use the ScriptManager and $get the TextBox ID before popping the window and then filling it.

        <script type="text/javascript" language="javascript" >
        function preview() {
            var txt= $get('txtContent');
            var sHTML= txt.value;
            win = window.open(", ", 'popup', 'toolbar = no, status = no');
            win.document.write("" + sHTML + "");
        }
        </script>

Reference: http://javascript.internet.com/forms/html-preview.html

Lazy Load Panel Courtesy of TabContainer and UpdatePanel

Here is how I implemented a Lazy load Panel. This is a nifty way to have a mini-menu of tabs without some big data transfer happening all at once. The ASP.NET render after complete model makes incremental rendering a necessary task of the developer or else the users will take a hike. This is my adaptation of Matt Burseth's example that should be helpful to avoid the LESSTHAN%= and LESSTHAN%# problems that I had. Remember to put the js in the form tag (probably below the ScriptManager). Two parts below are the ASPX and Code Behind. ASPX:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Lazy Load Panel Page</title>
   
</head>
<body>
    <form id="form1" runat="server">
        <ajax:ScriptManager ID="ScriptManager1" runat="server">
        </ajax:ScriptManager>
    <script type="text/javascript" language="javascript"> 
    //var _updateProgressDiv;
    
    function pageLoad(sender, args) {
        // register for our eveents
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
        
        //_updateProgressDiv = $get('ActionProgress');
    }
    function beginRequest(sender, args) {
        // get the gridview element
        var tabContainer = $get('<%= this.tcTest.ClientID %>');
        alert(tabContainer);
        // make it visible
       // _updateProgressDiv.style.display='';       
    }
    function endRequest(sender, args) {
        // make it invisible
       // _updateProgressDiv.style.display='none';
    }
            
        function clientActiveTabChanged(sender, args) {
            // see if table elements for the grids exist yet
            var isTab1Loaded = $get('<%= this.gv1.ClientID %>');
            var isTab2Loaded = $get('<%= this.gv2.ClientID %>');
            var isTab3Loaded = $get('<%= this.gv3.ClientID %>');
            
            // if tab does not exist and it is the active tab, trigger the async-postback
             alert(isTab1Loaded + ',' + isTab2Loaded + ',' + isTab3Loaded + ':' + sender.get_activeTabIndex());
            if (!isTab1Loaded && sender.get_activeTabIndex() == 0) {
                // load tab1
               // alert('fire1');
                __doPostBack('<%= btn1Trigger.UniqueID %>', '');
            }
            if (!isTab2Loaded && sender.get_activeTabIndex() == 1 ) {
                // load tab2
              //  alert('fire2');
                __doPostBack('<%= btn2Trigger.UniqueID %>', '');
            }
            if (!isTab3Loaded && sender.get_activeTabIndex() == 2 ) {
                // load tab3
               // alert('fire3');
                __doPostBack('<%= btn3Trigger.UniqueID %>', '');
            }
        }
    </script>         
        <input id="btn1Trigger" runat="server" type="button" style="display:none" onserverclick="btn1Trigger_Click" />
        <input id="btn2Trigger" runat="server" type="button" style="display:none" onserverclick="btn2Trigger_Click" />
        <input id="btn3Trigger" runat="server" type="button" style="display:none" onserverclick="btn3Trigger_Click" />
        
    <div>
        <ajaxc:TabContainer ID="tcTest" runat="server" OnClientActiveTabChanged="clientActiveTabChanged" ActiveTabIndex="0">
            <ajaxc:TabPanel ID="tp1" runat="server" HeaderText="TabPanel1">
                <ContentTemplate>
                    <ajax:UpdatePanel ID="upnl1" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                        1<br />
                            <asp:GridView ID="gv1" runat="server" Visible="true" DataSourceID="sqlLicStatus">
                            </asp:GridView>
                        </ContentTemplate>
                        <Triggers>
                            <ajax:AsyncPostBackTrigger ControlID="btn1Trigger" />
                        </Triggers>
                    </ajax:UpdatePanel>
                </ContentTemplate>
            </ajaxc:TabPanel>
            
            <ajaxc:TabPanel ID="tp2" runat="server" HeaderText="TabPanel2">
                <ContentTemplate>
                    <ajax:UpdatePanel ID="upnl2" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                        2<br />
                            <asp:GridView ID="gv2" runat="server" Visible="False" DataSourceID="sqlCondition" >
                            </asp:GridView>
                        </ContentTemplate>
                        <Triggers>
                            <ajax:AsyncPostBackTrigger ControlID="btn2Trigger" />
                        </Triggers>
                    </ajax:UpdatePanel>
                </ContentTemplate>
            </ajaxc:TabPanel>
            
            <ajaxc:TabPanel ID="tp3" runat="server" HeaderText="TabPanel3">
                <ContentTemplate>
                    <ajax:UpdatePanel ID="upnl3" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                        3<br />
                            <asp:GridView ID="gv3" runat="server" Visible="False" DataSourceID="sqlCondition" >
                            </asp:GridView>
                        </ContentTemplate>
                        <Triggers>
                            <ajax:AsyncPostBackTrigger ControlID="btn3Trigger" />
                        </Triggers>
                    </ajax:UpdatePanel>
                </ContentTemplate>
            </ajaxc:TabPanel>
            
        </ajaxc:TabContainer>    
    </div>
    
    
    
    
    
            <asp:SqlDataSource ID="sqlLicStatus" runat="server" 
            ProviderName="System.Data.Bar"
            DataSourceMode="DataReader" 
            ConnectionString="foo" 
            SelectCommand="SELECT foo FROM Validations WHERE bar=102 ORDER BY Code;">
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="sqlCondition" runat="server" 
            ProviderName="System.Data.Foo"
            DataSourceMode="DataReader" 
            ConnectionString="foo" 
            SelectCommand="SELECT foo FROM Validations WHERE bar=18 ORDER BY Code;">
        </asp:SqlDataSource>
    </form>
</body>
</html>

Code Behind:

/// <summary>
/// Lazy load TabPanel in a TabContainer
/// The update panel contents are fetched if client trigger is fired.
/// The client trigger is fired if the target tab is active and the 
/// target GridView is not active (visible).
/// </summary>
public partial class Samples_LazyPanel : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btn1Trigger_Click(object sender, EventArgs args)
    {
        this.gv1.Visible = true;
        this.gv1.DataBind();
    }
    protected void btn2Trigger_Click(object sender, EventArgs args)
    {
        this.gv2.Visible = true;
        this.gv2.DataBind();
    }
    protected void btn3Trigger_Click(object sender, EventArgs args)
    {
        this.gv3.Visible = true;
        this.gv3.DataBind();
    }
}

Intercepting return in list menu items in ASP.NET

Here is how I was able to intercept the return button in my list menu item when selected, despite a default button on the aspx page:

<li><a href="" onkeydown="if (event.keyCode==13)  { window.location.href='http://www.foo.com';}"</a></li>

FindContol Solution to add Javascript to a control from a user control

Here is a great solution to finding a control using FindControl method from a user control. TargetcontrolID is the public property for TextBoxFooExtender (User Control). _txt is the targeted TextBox assuming it is found.

    protected override void CreateChildControls()
    {
        txt = (TextBox)this.Parent.FindControl(TargetControlID);
        if (txt != null) {
            _txt.Attributes.Add("ondblclick", "alert('foo')");
        }
        base.CreateChildControls();
    }

C# ASP.NET using JavaScript

For ASP.NET, use the ClientScriptManager to register client scripts.

For example, in the Page_Load code behind I'll use:

ClientScript.RegisterClientScriptBlock(typeof(string), "MyScriptShow", "<script language=javascript>function showIt() { alert('showed it'); }</script>");

If the javascript was in a js file register it in the code behind with:

ClientScript.RegisterClientScriptBlock(typeof(string), "myScripts", "<script language='javascript' src='scripts/myScripts.js'></script>");

In the ASPX page I'll use;

        <asp:Button ID="Button1" runat="server" OnClientClick="showIt()" Text="Button" />

Resource links: link, link

Note: Use the ClientScript.RegisterClientScriptBlock or ClientScript.Register_x methods (since Page.Register_x methods are version 1.1)