Blogs

This Blog

Subscribe (RSS, Email)

Mehul Harry's DevExpress Blog

JavaScript, HTML 5, ASP.NET, DevExpress, ASP.NET MVC & WebForms, and News - Mehul Harry's DevExpress blog

August 2011 - Posts

  • How to use DevExpress ORM (XPO) in an ASP.NET MVC application

    imageCheck out the how-to knowledgebase article below that shows you 2 different approaches to using the eXpress Persisent Objects (XPO) with an ASP.NET MVC application:

    How to use XPO in an ASP.NET MVC application

     

    The article will be most useful if you are already using DevExpress XPO. If you're new to DevExpress XPO then check out the Code Central solution attached to this article:

    Example: How to use XPO in ASP.NET MVC3 application (Razor)

     

    It's a full working solution that shows how to use XPO with ASP.NET MVC. And there is a C# and VB.NET version of that sample available. Simply click the 'programming language' dropdown and choose.

    Best Practices

    If you're an XPO user now then you might have wondered, "What is the best practice for using XPO in an ASP.NET MVC application?"

    This knowledgebase article is your answer:

    The main difficulty of integrating the eXpress Persistent Objects framework into the ASP.NET MVC application is that both these frameworks have their own approaches to create a model instance. ASP.NET MVC requires a model to provide the parameter less constructor. It simply creates a new model instance each time it is required. XPO considers every object created via public constructors as new and inserts a new record in the database associated with this object. Hence, it is necessary to prevent the ASP.NET MVC engine from creating new instances and address this task manually. We will describe two possible approaches that can be used to address this issue.

     

    Why use XPO?

    If you've not yet seen XPO then check out this list of feature benefits here: XPO Features & Benefits

    The M in ASP.NET MVC stands model and you have a choice to use just about any .NET ORM including our own XPO.

     

    Check out the 'How to use XPO in an ASP.NET MVC application' article. Then drop me a line below with your thoughts on using XPO with ASP.NET MVC. Thanks.

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

    Follow MehulHarry on Twitter

  • Webinar: ASP.NET - Show a Popup Warning Before Session Timeout

    Register and attend my ASP.NET - Show a popup warning before session timeout to see how to add a very useful functionality to your ASP.NET websites that use login sessions.

    Learn how to add a popup warning dialog to let your end-users know that their web session will timeout. This is great for notifying your end-users and also allowing them to stay within the session by clicking a 'continue session' style button. This solution works for both ASP.NET WebForms and ASP.NET MVC.

    And this works for both ASP.NET WebForms and ASP.NET MVC.

    Register Now

    Click the register button below and attend the webinar on Friday, August 26th, 2011 at 10AM PST:

    Friday August 26th, 2011 01:00pm EDT | 10:00am PDT | 05:00pm GMT

    • Title: ASP.NET - Show a Popup Warning Before Session Timeout 
    • Date: Friday, August 26th, 2011
    • Time: 10am PDT (GMT -07:00)
    • Length: 1 hour (but may go longer)
    • Presenters: Mehul Harry
    • Register here - https://www3.gotomeeting.com/register/736845334
    • Level:  100

    Presenters

    Mehul Harry
    Mehul Harry
    Technical Evangelist – ASP.NET Team

    Amanda Christensen
    Amanda Christensen
    Host

    Register Soon

    What are you waiting for? Go register, now.

    Follow MehulHarry on Twitter

    Build Your Best - Without Limits or Compromise

    Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

    Read the latest news about DevExpress ASP.NET MVC Extensions

    Download a free and fully-functional version of DXperience now: http://www.devexpress.com/Downloads/NET/

  • Talk to your computer with Chrome and DevExpress ASP.NET Combo Box

    Check out how to enable speech-recognition for the DevExpress ASP.NET Combo Box control and let your end-users talk to your website!

    Watch this short 1 minute screencast to see how the voice-to-text integration works with the ASPxComboBox:

    Chrome Speech Recognition and DevExpress ASP.NET Combo Box

    First, the disclaimer:

    <disclaimer>

    1. This feature will only work with Google's Chrome Web browser version 11 and above. I explain why below.

    2. Two undocumented DevExpress client-side functions are used for this code. However, this sample is still simple to implement.

    This how-to is 99.9% for fun and I cannot guarantee that Google Chrome may change this feature in the future which could break the code I'm about to show you.

    You've been warned. Now let's have some fun…

    </disclaimer>

    Chrome Speech Recognition

    Google's Chrome Browser introduced support for speech recognition with version 11 (back in April 2011):

    Fresh from the work that we’ve been doing with the HTML Speech Incubator Group, we’ve added support for the HTML speech input API. With this API, developers can give web apps the ability to transcribe your voice to text. When a web page uses this feature, you simply click on an icon and then speak into your computer’s microphone. The recorded audio is sent to speech servers for transcription, after which the text is typed out for you. -Chrome Blog 

    And this feature still works in the current version 13 of Chrome which I used for the screencast above.

    How-To Enable Speech Recognition

    To enable speech recognition in the ASPxComboBox follow these 3 steps:

    1. Insert a meta-tag to set the language (in case the site language differs from the speech recognition language):

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv='Content-Language' content='en-US' />
        <title>DevExpress - Fun with Chrome</title>

    2. Override the ASPxClientComboBox's client-side Init event:

    <script type="text/javascript">
        function OnComboBoxInit(s) {
            var input = s.GetInputElement();
            input.setAttribute("x-webkit-speech", "x-webkit-speech");
            input.onwebkitspeechchange = function (evt) {
                if(s.filterStrategy && s.filterStrategy.FilterStartTimer)
                    s.filterStrategy.FilterStartTimer();
                else
                    aspxETextChanged(s.name);
            };
        }
    </script>

    Please note that s.filterStrategy.FilterStartTimer and aspxETextChanged functions are not documented. Sorry.

    3. Point the ASPxComboBox to the OnComboBoxInit event:

    <dx:ASPxComboBox ID="ASPxComboBox1" runat="server" IncrementalFilteringMode="Contains" DropDownStyle="DropDown"
       DataSourceID="AccessDataSource1" TextField="Country" ValueField="Country">
       <ClientSideEvents Init="OnComboBoxInit" />
    </dx:ASPxComboBox>

    The ASPxComboBox in this code above uses the same functionality as the one in this 'Callback mode' demo.

    What about Internet Explorer?

    Currently, Internet Explorer doesn't support speech recognition. There is a possibility that IE may get the speech recognition feature in the future.

    Download Code

    There is a code central demo for this feature which you can try online now:

    ASPxComboBox - How to enable speech recognition in Google Chrome web browser

    You can also download the full source code and project right from code central.

    Summary

    The how-to code above shows you a simple way to enable speech recognition for the ASPxComboBox in Chrome version 11 and above. Try it and then drop me a line below with your thoughts. Thanks.

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

    Follow MehulHarry on Twitter

  • Case Study: A Fast, slick website built with DevExpress components

    Check out this video case study below with Evert Wiesenekker, a developer from the Netherlands who's created a very interesting website.

    Evert has created an optimized website that helps his clients manage a Nematode taxonomic database. What is a Nematode?

    Nematodes are small, usually microscopic, unsegmented roundworms with a narrow cylindrical body. They are incredibly numerous in soil, water, and inside other animals and plants throughout the world. Approximately 10,000 species are known. Four of every five animals on the planet are nematodes, outnumbering even insects. A single gram of soil can contain more than 1,000 plant parasitic nematodes. -Divergence

    And Evert's website is fast, good looking and uses several great technologies like:

    Watch the video below as Evert discusses:

    • the website
    • how he chose the technologies
    • and some of his design decisions on the website:

    image

    Note: You can also view this video on YouTube which supports mobile devices too: http://www.youtube.com/watch?v=e5l44gzL0DU 

    One of my favorite things about his website is the speed. About 13 minutes into the video, you'll see how he has leveraged DevExpress ASP.NET Callbacks to retrieve and display different data items in milliseconds. Oh and be sure to check out his unique login screen that uses patterns instead of passwords!

    Click on the image above and watch the interesting video case study with Evert Wiesenekker.

    Then drop Evert a line below with any thoughts, questions and/or comments about his website.

    Follow MehulHarry on Twitter

    Save time and money...

    Save time and money with high quality pre-built components for ASP.NET, Windows Forms, WPF, Silverlight and VCL as well as IDE Productivity Tools and Business Application Frameworks, all backed by world-class service and support. Our technologies help you build your best, see complex software with greater clarity, increase your productivity and create stunning applications for Windows and Web in the shortest possible time.

    Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

  • ASP.NET TextBox - How to attach the jQuery AutoComplete Plugin (Webinar Video)

    Check out the screencast and Code Central sample below to learn how to add the jQuery AutoComplete Plugin to a DevExpress ASP.NET TextBox control.

    jQuery AutoComplete Plugin - DevExpress ASP.NET TextBox

    Introduction

    Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

    By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

    This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.

    Both local and remote data can be used: Local is good for small datasets (like an addressbook with 50 entries), remote is necessary for big datasets, like a database with hundreds or millions of entries to select from. -jQuery docs

    How-To

    There's 3 main steps to adding the jQuery AutoComplete to the DevExpress ASPxTextBox control:

    1. Define your source of data. It can be a JavaScript string, array, or even a callback. In this sample, I've got a simple string array of different computer languages:

    <script type="text/javascript">
        var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
    </script>

    2. Here's the important part. Since jQuery is a client-side only technology, it works with HTML elements. So the jQuery AutoComplete plugin will require the input element that it will be attached to. In our case, we need to get the client-side reference to the ASPxTextBox.

    And the DevExpress ASP.NET controls make it easy because they have great client-side support. The ASPxClientTextBox, the client-side object that represents the ASPxTextBox, exposes the GetInputElement method for us. This gives us access to the underlying INPUT element of the ASPxTextBox. Using the GetMainElement method, we'll pass it to the

    For the DevExpress ASPxTextBox, define a client-side 'INIT' event handler like so:

    <dx:ASPxTextBox ID="textBox" runat="server" Width="170px">
        <ClientSideEvents Init="OnTextBoxInit" />
    </dx:ASPxTextBox>
    <script type="text/javascript">
        function OnTextBoxInit(s, e) {
            //http://jqueryui.com/demos/autocomplete/
            //http://docs.jquery.com/UI/Position
            $(s.GetInputElement()).autocomplete({
                source: availableTags,
                position:
                {
                    my: "left top",
                    at: "left bottom",
                    of: s.GetMainElement()
                }
            });
        }
    </script>

    In the code above, the OnTextBoxInit method calls the jQuery AutoComplete plugin and passes it the 'availableTags' string array as a source of data. To properly position the plugin over the TextBox, we pass the 'position' attributes

    3. Finally, theme the list of items being displayed using the jQuery AutoComplete plugin's CSS styles:

    ul.ui-autocomplete
    {
        border: solid 1px #000000;
        list-style-type: none;
        margin: 0px;
        overflow: auto;
        padding: 0px;
        width: 168px;
    }
    ul.ui-autocomplete a.ui-corner-all
    {
        background-color: #EEEEEE;
        display: block;
        font-weight: bold;
    }
    ul.ui-autocomplete a.ui-state-hover
    {
        background-color: #0A246A;
        color: #ffffff;
        cursor: pointer;
        display: block;
    }

    And that's it. Now when you run the sample, your end-users will get a nice list of items that matches the text entered into the TextBox.

    Download Source Code

    Download and play with a sample version of this now on your local machine. Click on this Code Central sample:

    ASPxTextBox - How to attach the jQuery AutoComplete plugin

    If you're not sure how to use CodeCentral then watch this short how-to use code central video.

    Watch The Screencast

    Watch part 2 of the 'Using jQuery with DevExpress ASP.NET Controls' webinar video and you'll see a video version of how to add the jQuery AutoComplete plugin:

    image

    Got Lots of Data?

    DevExpress ASP.NET Ajax EditorsThe jQuery AutoComplete is a great solution for relative small amounts of data. However, if you have a large set of data, say about 20,000 records, then I recommend you consider a different approach.

    Use the DevExpress ASP.NET Combo Box because it supports binding to a large set of data and filtering with ease and fast performance!

    See the DevExpress ASP.NET Combo Box in action here: Combo Box - Filtering Large Data Source

     

    Summary

    Learn how to use the jQuery AutoComplete plugin with a DevExpress ASP.NET TextBox.

    Download and play with a full working sample.

    Watch the jQuery with DevExpress Part 2 webinar video to learn step by step and get a better explanation.

    Drop me a line below with your thoughts on the slick jQuery AutoComplete plugin and DevExpress ASP.NET TextBox integration. Thanks!

    Follow MehulHarry on Twitter

    Save time and money...

    Save time and money with high quality pre-built components for ASP.NET, Windows Forms, WPF, Silverlight and VCL as well as IDE Productivity Tools and Business Application Frameworks, all backed by world-class service and support. Our technologies help you build your best, see complex software with greater clarity, increase your productivity and create stunning applications for Windows and Web in the shortest possible time.

    Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2014 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners