CODEWITHSUNDEEP
c#javascriptcssasp.net-mvcrazor
Nicklas Pouey-Winger
Nicklas Pouey-Winger

Reputation: 3023

Reusing components as custom text fields, spans etc in asp.net mvc (razor)

I'm part of a team working on a website where we find ourselves re-using components over and over again. One example is where we have a span that acts as a warning lamp. This has some code (C#) behind it with a few properties that control its color and text, some Javascript and also, some custom css.

I've noticed that there's a Toolbox in Visual Studio that has a few basic components that can be dragged into my markup. Is this the way to go, or are there any other possibilities when it comes to this 'issue'?

If possible, we'd like to build some reusable components into an assembly that can be referenced in our projects when needed, and I guess include CSS and Javascript separately(?)

Any suggestions on best practice / most practical solution / tutorial to this would help as I'm rather new to the subject of Asp.net MVC.

Also, please do let me know if this question is incorrectly specified. Like I said.. new to this world :)

Upvotes: 1

Views: 584

Answers (2)

developer10214
developer10214

Reputation: 1186

At first, the tool box contains items made for ASP.NET webforms, they are not for MVC.

Reusing components: I think the most common way for MVC is to use partial views. Partial views are also cshtml files, they are similar to normal views. Partial views can be created e.g. via the context menu in the solution explorer when you right click on a folder inside the "Views" folder, there is a check box "Create as partial view". The differences are:

  • they can be placed in a folder named "Shared" within the folder "Views", so they can easily reused in any view or action.
  • they don't use a layout view
  • if an action return a partial view the return type of an action must/should be "PartialViewResult"
  • in views you can call them with the Html-Helper @Html.Partial() or "@{ Html.RenderPartial("Menu");}"
  • they can also be strongly typed

I this partial view you can place you HTML. CSS and JS code I would place in separate css and js files and load them in the view which is calling the partial view.

As you are new to MVC I recommend to walk through the tutorials like this.

Upvotes: 1

rouen
rouen

Reputation: 5134

you have several ways to go, choose or combine them according your needs.

1. ASP.NET MVC Html Helpers.

Write your static class full of static methods, which you can then use in views as helpers:

public static class HtmlExtensions
{
    public static IHtmlString ErrorMessage(this HtmlHelper html, string msg)
    {            
        return MvcHtmlString.Create("<span class=\"validation-summary-errors\">"+msg+"</span>");            
    }
}

More : http://www.asp.net/mvc/tutorials/older-versions/views/creating-custom-html-helpers-cs

Sweet tip : if you want to use more HTML code as output of your helper, you can use partial view for it and return if from helper as return html.Partial("ErrorMessageTemplate", msg);

2. Razor helpers

Useful for formatting specific stuff in the scope of one view. If you want more reusability, use HTML helpers instead. See : http://weblogs.asp.net/scottgu/archive/2011/05/12/asp-net-mvc-3-and-the-helper-syntax-within-razor.aspx

Of course, in both cases, your javascript and CSS goes into separate files, and you bind them by jQuery to the classes or IDs of elements. Ignore this practice and you will suffer sooner or later :)

Upvotes: 1

Related Questions