Using the Telerik Extensions in ASP.NET MVC4 Today - A First Look

转载：

http://blogs.telerik.com/blogs/posts/12-03-08/using-the-telerik-extensions-in-asp-net-mvc4-today---a-first-look.aspx

参考官方blog：

http://blogs.telerik.com/aspnetmvcteam/posts.aspx

It’s an exciting time to be an ASP.NET developer, especially with the upcoming ASP.NET 4.5 and MVC4 releases, and I know a lot of you are wondering how the Telerik Extensions ASP.NET MVC will work with ASP.NET MVC4. While we do not have official builds against MVC4 today, we will be providing these once the platform finally comes out of beta. For those of you curious as to whether or not it works in the current beta, I can tell you that it does! Actually, I’ll do one better: I’ll show you! :)

For the Love of Beta

For this demo I’m using Visual Studio 2010 and the MVC4 Beta, but if you take a look at this blog post you can see that the components should work in Visual Studio 11. This means that you early adopters should be able to follow along with the new version of Visual Studio as well.

As I mentioned in the beginning of this post, we do not have an official build against MVC4 and our Visual Studio Extensions do not quite know how to handle an MVC4 project, yet. This cannot stop the awesomeness that is the Telerik Extensions though, no sir! We really just have to add the associated files manually, modify our web.config and we’re good to go.

First of all, let’s create a basic ASP.NET MVC4 Internet application.

Side-note: Keep an eye out for future blog posts related to the Web API project – I know some of you are excited about this!

Once we’ve created the application and Visual Studio is good and ready we can go ahead and manually add a reference to the Telerik.Web.MVC assembly by right-clicking on our References folder and selecting Add Reference. I find that the easiest way to find the assembly is just to go with the Browse option and then find the install directory (usually Program Files\Telerik\Telerik Extensions for ASP.NET MVC [Version]) and locate the Binaries folder.

Now that we’ve added the assembly we need to open the Content and Scripts folder located in the install directory, as these contain the necessary folders that contain our CSS and JavaScript files. These are named after the version of the components we are using, but let’s just drag this over to their respective folders (Content and Scripts) in our ASP.NET MVC project. We should end up with the following:

References Folder:

Content and Scripts Folders:

This takes care of all of the physical files. However, if you were to try to use the Telerik Extensions in a View in this state you would receive this ugly error message:

‘System.Web.Mvc.HtmlHelper<dynamic>’ does not contain a definition for ‘Telerik’ and no extension method ‘Telerik […]

Although that looks upsetting, there’s no need to fear :) We just haven’t modified the Web.config to use our assembly yet, so let’s go ahead and do so. Opening the Web.config file under Views (not Views/Shared) we will need to add the following to the namespaces section:

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

And to get intellisense we have to add this snippet to our configSections under the configuration area:

<sectionGroup name="telerik">

<section name="webAssets"type="Telerik.Web.Mvc.Configuration.WebAssetConfigurationSection, Telerik.Web.Mvc"requirePermission="false"/>

</sectionGroup>

With these changes let’s just build the application to make sure we don’t get any odd issues from Visual Studio.

We can now use the Telerik Extensions in our Razor Views – intellisense and all! However, we have not added the necessary links to our CSS and JavaScript files in our Views yet, so let’s go ahead and do that. In the _Layout.cshtml file located under Views/Shared we can start by sticking the following in the header:

@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Combined(true).Compress(true)))

Which allows me to use our Windows7 theme, as well as combine and compress these CSS files (optimization out of the gate – I like it!).

Now at the very bottom of the page, right before the </body> tag we should add this:

@(Html.Telerik().ScriptRegistrar())

In case you’re wondering, the ScriptRegistrar is the same as the StyleSheetRegistrar, but for our JavaScript files. The neat thing is that the components we place on a page will automatically register with the ScriptRegistrar – so we don’t really need to add more than the line above. However, if you want to specify the files one by one, you can do so as well. Keep in mind to look at this page containing a list of all of the required JavaScript files for our individual components.

That’s all there is to it! You can now feel free to use the Telerik Extensions in your ASP.NET MVC4 project! Just for the sake of testing, and so that you will believe me ;), I added a quick menu:

@(Html.Telerik().Menu()

.Name("TelerikMenu")

.Items(items =>

{

items.Add().Text("Awesome")

.Items(subItems =>

{

subItems.Add().Text("Awesome Sauce");

});   

})

)

It’s That Easy

So while the example above is fairly simple, you can of course start using some of our more complex MVC components (Grid, TreeView etc.) in your MVC4 project as well. This was just laying the foundation of the MVC4 goodness!

Keep an eye out on the MVC blogs as we’ll be posting more content relating to how to use our Extensions in the ASP.NET MVC4 beta :D

Have any of you experimented with the Telerik MVC Extensions in the MVC4 beta yet? Feel free to post in the comment section below and share your experiences!

About the author

CARL BERGENHEM

Carl Bergenhem is an Enterprise Solutions Consultant at Telerik specializing in the ASP.NET AJAX and ASP.NET MVC products. He has always been interested in web development and has played around with various web technologies since he was a child. In his free time Carl enjoys soccer, running and playing his guitar.

@carlbergenhem

Tweet

?

inShare1

Email to a friend

Posted in: MVC4 ASP.NET ASP.NET MVC

13 Comments

• Nando29 Mar 2012

  Got it working! Thanks
  I don't have a web.config under Views/Shared so that was a bit confusing. Also, I had to restart visual studio 2010 for intellisense to kick in.
  Looking forward for any updates from Telerik for MVC 4.
  Any plans for using the now built-in js/css minification/bundling intead of your own?

• Jeff Scranton04 Apr 2012

  Just curious if this will also work in Visual Studio 11 Beta?

• Carl04 Apr 2012

  @Jeff - You can actually use the VS11-specific installer that you can find under the "browse all product files" link next to the regular download button in your account. This will take care of all of the integration for you, just like it does in VS2010. The approach above could easily work with VS11 Beta as well!

• JenVinh16 Apr 2012

  Dear all,
  I use vs2020 to create a new website with MVC4. After I add reference Telerik.Web.Mvc.dll for MVC3. Then, In View I use:

  @(Html.Telerik().Grid(Model)    .Name("GridByTelerik")    .DataKeys(keys => keys.Add(f => f.FIRMID))    .Columns(columns =>                    {                           columns.AutoGenerate(column =>                                                {                                                    //customize autogenereted column's settings                                                    column.Width = "150px";                                                    if (column.Member == "FIRMID")                                                        column.Visible = false;                                                });                        columns.Command(command =>                        {                            //command.Edit().ButtonType(GridButtonType.ImageAndText);                            //command.Delete().ButtonType(GridButtonType.ImageAndText);                            command.Edit();                            command.Delete();                                                    }).Width(150);                    })    .DataBinding(binding => binding            .Ajax()                    .Update("SaveAutoColumnsEditing", "GridByTelerik")                    .Delete("DeleteAutoColumnsEditing", "GridByTelerik")                    .Select("SelectAutoGenerateColumns", "GridByTelerik")        )    .Sortable()    .Pageable())

  On View form I click Edit one record, then click Update. When I debug In Controller to action "SaveAutoColumnsEditing" not  run to breakpoint.
  I think because add ref invalid version Telerik.Web.Mvc.dll .
  Help me, please.
  Thanks!

• Harish Beeram06 Jun 2012

  Now that the Microsoft has the MVC4 Release Candidate , does Telerik plan to offically release the builds againts MVC 4 Extensions soon? If yes what is the timeframe we can expect?

• Stefan Rahnev06 Jun 2012

  We have an upcoming Telerik MVC Extensions Q2'12 release in the beginning of next week. With it we will announce offcial support for the VS 2012, .NET 4.5 and MVC4 release candidates. Stand by for the aforementioned release.

• Rick15 Jun 2012

  I got this working. Thanks!
  One thing really threw me for a while. In the Save action of the controller, the attachments collection kept coming in as null. I eventually figured out it was because I named the Save action parameter something other than "attachments"! I then figured out that the parameter name of the IEnumerable<HttpPostedFileBase> that is sent to the controller must be the same as the name of the control. I suppose this might obvious to an "old hand" at MVC, but it certainly wasn't to me! And yet the parameter name for the Remove action apparently doesn't matter. What's going on here?!??!

• Cimpy17 Jun 2012

  I am waiting for the "Telerik MVC4 with razor" template to generate a project in vs 2010. Hope you do not forget of this

• Carl18 Jun 2012

  @Cimpy: If you download the Q2 2012 release you will see that we have that exact template ready to go!

• Cimpy20 Jun 2012

  @Carl
  Thanks. I update also the forum thread here (http://www.telerik.com/community/forums/aspnet-mvc/installer-vs-extensions/error-trying-to-create-telerik-mvc-application-in-vs-2010.aspx#2153893
  ) with your info

• menuka13 Jul 2012

  since I coudnt download teleric for mvc4 I used telerc mvc3 dll.
  when I use it with aspx tleric worked but not some css render with razor.
  when I use firebug, I could find that css not rendering fromo teleric.
  what is the problem . I am new to asp.net

• menuka13 Jul 2012

  hi , I could manage it when I remove  
  .Combined(true).Compress(true)
  part from          @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css").Combined(true).Compress(true)
  ))
  started to work.

• Cuong24 Aug 2012

  Hi,
  I just want to add a looping for create dynamic menu (see at below), could you help me.
  @(Html.Telerik().Menu()
        .Name("TelerikMenu")
        .Items(items =>
        {
  for(int i=0; i<10; i++)
  {
    items.Add().Text("Awesome" + i)
                   .Items(subItems =>
                   {
                       subItems.Add().Text("Awesome Sauce");
                   });    
  }
        })
  )
  Tks & Best regards,
  Cuong

转载于:https://www.cnblogs.com/yougyoum/archive/2012/09/18/2690041.html