Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

MVC 3 - Razor Helpers

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft] [] [Jon Galloway] Hi, this is Jon Galloway with Microsoft, and this is an MVC 3 Quick Hit video. In this video we'll be looking at the Razor helper syntax. In previous versions of you would use an extension method off the HTML helper class that would allow you to define new helpers. In MVC 3 you have the option to continue doing that; however, you can also create declarative helpers using the @ helper syntax within a Razor view. So we'll start by reviewing the extension method approach and then we'll show how that compares to the Razor declarative helper syntax. Here I've created a new MVC 3 application. I've made no changes so far. In this application we've got an index method and on the index view we're just writing that ViewBag.Message out. I want to safeguard myself against if this string gets very long that it's going to break my page and make it look ugly. So I want to use a truncate method that I'm going to wrap around that message and set that the maximum length I'm going to display is say 25 characters. I like to keep my custom helpers in their own folder just for organization so they get their own namespace, etcetera, so I'm going to say add new folder. We'll call this helpers. To that I'm going to add a class. I'm hitting shift, alt C to create a class. Call this HTMLHelpers, and this class needs to be static. We're going to create a static method. and I'm using the standard extension syntax so I'm going to reference this htmlHelper. When I bring this in I've got two options. I've got WebPagesHtml or MVC and I want the MVC namespace. Then I can bring in string input as one parameter and string length and int length as another. Okay, so this is a pretty simple function. I'm just saying—I'm building an extension method off of the helper class. I'm passing in a string and a maximum length, and then I'm saying if the string is less than that length, that's fine. It can go as is. If it's greater than that length, chop it to the max length and return a "..." at the end as well just so that we can tell it's been truncated. So that all builds. Now let's go use that in our view page. I need do two things here. First, I need to bring in the namespace. Now for this simple example I'm just going to do this using syntax; however, if I was going to be using this in other views I would actually add a using— or I would add this namespace into the web config. Now I'm ready to use it, so I can say @HTML.Truncate and pass in the max length. Now this actually looks like it's going to work , but it's not, and that's because we need to actually cast this. It's a dynamic. We need to cast that as a string. This is one advantage of using the Razor HTML declarative helpers is that they're going to take care of that for us. We won't have to cast it, and we'll see that in a second. Now, with that all in place, we can run this, and we can see that our long string was chopped down to 8 characters and "..." was put at the end. So that was the extension method syntax. Now we'll look at the Razor declarative syntax. We'll stop our application. I'm going to delete this just to make it clear that we're not using that class anymore. We can create an in-page code block or we can move this off to a separate file. I'll show it in-page first. We'll call this Truncate string—Truncate. It will take a string input and an int length, and this is very similar to what we had before, but there are a few differences so I will retype it. We'll start at code block. Then, this is Razor syntax so I don't need to do anything special to write it out. I just write I out. Then I'll put in an else block. Then we also want to include that "..." I could do this a few different ways, but in this case I want to show using detect pseudo elements so I'll say— That's one way to escape back into text from C# code inside an @ statement inside of Razor. Now I've got Html.Truncate and I can just do @Truncate. Just so that we can see that something has changed a little bit I'll put in here a little extra text and we'll run that. We'll see, yes, it was still truncated and we got that extra text at the end. Now if we want to move this into a separate file we can do that. We'll need to out this inside a CS HTML file inside of an appcode folder. So I'm going to create a new folder. We'll call it App, and that name is important. You'll see it gets a special icon here and that means that this is going to be compiled as part of the build process. Into this we'll add a new Razor view. This is just a standard CS HTML page, and I can call this whatever I want. I'll call it CustomHelpers, and you see that name is important. Now into custom helpers—this what is put in there by default. I'm just going to grab all this text that was in here. I'm going to delete it. I'm going to put that in here. Obviously I could put a lot more helpers in here. I could declare another and just keep going. This is my first helper that I'm putting into this. Now in order to use that—I no longer have this showing up—I need to say CustomHelpers, and this no longer has to be cast as a string. You'll see that still works. So this is nice to have the two options. They're both C# code so you can move back and forth between them. I think that this second Razor syntax is a little bit smoother because I can work with things in line in a page or, you know, more loosely, and then move them into a helper—a separate helper. Then, later, if I wanted to, I could move them to an extension method. That concludes our quick look at Razor helper syntax. [Microsoft] []

Video Details

Duration: 8 minutes and 10 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Sep 20, 2013

In this video, you will learn how to use both extension methods and declarative @helper syntax in Razor views.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.