Coder Social home page Coder Social logo

taghelperstarterweb's Introduction

TagHelperStarterWeb

ASP.NET 5 Starter Web project template converted to use Tag Helpers

taghelperstarterweb's People

Contributors

damianedwards avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

taghelperstarterweb's Issues

pulled to compile with 2 errors

I think the read-me may need to be changed to deal with this.

Severity Code Description Project File Line Suppression State
Error The design time host build failed with the following error: Illegal character '/' (Unicode hexadecimal 002F). TagHelperStarterWeb C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\DNX\Microsoft.DNX.targets 166

What will be in the new default templates in Visual Studio 2015?

Thanks for putting this together. It is very helpful for understanding how the tag helpers will work.
Any thoughts on what the final templates will look like in Visual Studio 2015?

In my opinion these templates and the scaffolding templates should be added to the main MVC github project so that they can be pier reviewed and improved with the input of the community. It would also be nice to allow developers to pick which version of the templates they want to use as part of the new project experience.

Syntax colour?

I think this TagHelper is really cool thing but to make it easier to differentiate what is HTML and what is not would it be better to highlight somehow what is not HTML?

<a controller="Home" action="Index" class="navbar-brand">Application name</a>

<form controller="Account" action="Login" route-returnurl="@ViewBag.ReturnUrl" method="post" class="form-horizontal" role="form">

For example these:
controller="Home" action="Index"
controller="Account" action="Login" route-returnurl="@ViewBag.ReturnUrl"

could be with a different opacity (like new using... or something) so without even reading your new HTML you could spot in seconds which HTML tags contains server code. Also, if non-coder is working with HTML then he could get instructions to touch only HTML otherwise he might get slap his fingers if he modifies server code.

Don't ask me how to do it :)

Thanks :)

Tag Helpers suggestion, round 2.

I'm pretty sure this is coming too late, it's ok. After playing around I want to suggest minor modifications to the current proposal.

TL;DR
There are two suggestion here: Syntactic sugar & the removal of special attributes that targets existing attributes (like having an action and controller attributes for an existing href [anchor tag example]).
And some crazy things as bonus ;)


So, instead of using asp specific tags, one can use existing tags (when they exist) and apply some char suggesting to be resolved by tag helpers. ($ is used here for demonstration purposes only).

<input value="${Age}" class="form-control" />

this simple input, will render the input with the value of Model.Age and the correct type (number in this case) and name if not specified.
I can still override the html if I provide a type. The idea here is that tag helpers doesn't get in my way of me authoring the html.

<input type="text" value="${Age}" class="form-control" />
<span asp-validation-for="UserName" class="text-danger"></span>

this get no modification, there's no tag for validation so it's ok to go with a span (or any tag) and use asp- specific annotation. but the asp- is not required, more on that later.

<label for="${Password}" class="col-md-2 control-label"></label>

This will of course create the input for the Model.Password property. I can do write text outside the {} like:

<label for="$MyPrefix{Password}AndSuffix" class="col-md-2 control-label"></label>

the benefit of the above is clear on the form tag:

<form action="$~/{controller}/Register" method="post" class="form-horizontal" role="form">

Instead of using controller and action, I more forward using html5 existing types. the $ hints razor that this is generated via a tag helper.

Tag helpers could then be defined with:
tag.attr (example: form.action, a.href, button.type, etc)
attr (example class, value, type, style, etc)
and maybe:
tag.tag.attr (but i dont find a good example).

This definitions will not only help in throwing errors when a tag helper is used where it shouldn't but also for intellisense (usefull when one is authoring tag helpers)

Tag helpers in this way won't need the asp- prefix because if there's a $ at the start, it means it should try to get a tag helper for that attr, so in the case of <span asp-validation-for="UserName" class="text-danger"></span> we can safe write :

<span validation-for="${UserName}" class="text-danger"></span>

still, the asp- can be supported in the sense that you can do asp-tag and you don't need to specify the $ character. so both scenarios apply.

<label asp-for="Password" class="col-md-2 control-label"></label>
<label for="${Password}" class="col-md-2 control-label"></label>

both are valid and should output the same results.

I don't see it as a major difference on how they are implemented now, except maybe for the form tag, but for me it looks like more html, not obscure on when is asp or not processing the data, and less verbose with less asp- strings.

another interesting important technique that can be used is intellisense, lets take a look at the anchor tag.

<a href="$Home/About">Abount</a>
<a href="${controller}/Index">Go back to index</a>

When we write <a href="$ <--- here we can retrieve intellisense for all actions in all controllers and narrowing down as we type, much like project.json autocomplete works.

More crazy or future things we can do

<form  method=$put> ... // this can return method post and an http-override input put.
<div class="$active(false)" ... // receive parameters. this may return a class hide.
<input $disabled({!IsActive}) /> // this can set the input as disabled if the IsActive model property evaluates to false
<img src="$http://cdn.somedomain.com/Images/picture.jpg$header({dpi})" /> // this can append a header to the request with the value of the dpi retrieved by a javascript on the client side, so our cdn can serve a more appropriate image for the requested dpi device.

As I pointed out, I know, kinda late to the party, but maybe someone find something valuable here.

IServiceManifest not registered

Hi Damien,

I've cloned and tried to run this sample project, I'm running KRE 1.0.0-beta1 and have performed an appropriate kpm command to download the packages. Whenever I try to run (k web), I'm getting the following exception:

No service for type 'Microsoft.Framework.DependencyInjection.ServiceLookup.IServiceManifest' has been registered.

On checking a similar issue here, its suggested to perform a kvm upgrade to install the latest KRE. My install is telling me it has the latest KRE and this problem still persists.

Any help would be appreciated.

Environment: Windows 8.1

Where are the differences?

I'm having trouble seeing the differences between this and the regular project. Is the main difference with the Form tag? I thought maybe you had made some custom taghelpers for this project or something...

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.