• Getting Started with Telerik Extensions for ASP.NET MVC

    by Venkata Koppaka | Dec 12, 2010

    Telerik provides UI extensions to ASP.NET MVC, In this three part series I will  show how to get started with Telerik Extensions for ASP.NET MVC and how to use the Grid and Editor Controls. In this post I will walk through how to get started with these extensions.

    To use Telerik Extensions for ASP.NET MVC go to Telerik Extensions for ASP.NET MVC Page, and download the extensions, you will download a .ZIP, extract them and we are ready to add them to an application.

    With the download you will get Binaries, Content, Scripts and some examples. We will need Binaries, Content and Scripts to start using the Extensions.

    Create a new ASP.NET MVC 2.0 application. Open your Web.config file and look for "Pages" section of your web.config and under "namespaces" add a "Telerik.Web.Mvc.UI" namespace.

    <add namespace ="Telerik.Web.Mvc.UI"/> 

    Then add a reference to "Telerik.Web.Mvc", this DLL can be found under "Binaries" folder of your download.

    Then go to "Scripts" folder of your download, typically you will find a Year, Month, Version folder at the time of this writing it is "2010.3.1110". Inside that folder you will find javascript files for various Telerik UI extensions.

     

    Pick whatever controls you need and copy them to scripts folder of your ASP.NET MVC application. Please copy the folder the extensions where ("2010.3.1110" in this case) these Javascript files are found.

    Once you copy the scripts, the scripts folder in your ASP.NET MVC application should look similar to (of course you could have copied more javascript files)  -

    At the minimum you would need jquery min file and telerik.common.min.js file.

    Then you need to copy the Content(Styles and images) for these controls.These are found under "Content" folder of your download. For this example I am going to use "Hay" theme.Copy the "Hay" folder and telerik.common.min.css and telerik.hay.min.css files to Content folder of your ASP.NET application, once you have done that your Content folder should look similar to -

    Now, open your Site.master file and add link references to these CSS files -

        <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
        <link href="/Content/telerik.common.min.css" rel="stylesheet" type="text/css" /> 
        <link href="/Content/telerik.hay.min.css" rel="stylesheet" type="text/css" /> 

    Now towards the bottom of the page, register the Telerik Script Registrar, using this line -

    <% Html.Telerik().ScriptRegistrar().Render(); %> 

    That's it you are now ready use Telerik UI Extensions. In the next post I will show you how to add "Grid" Control to your View page and how to do various operations with it.

    Hope this helped,

    Cheers,

    Venkata

    Go comment!