Click here to Skip to main content
15,894,410 members

Welcome to the Lounge

   

For discussing anything related to a software developer's life but is not for programming questions. Got a programming question?

The Lounge is rated Safe For Work. If you're about to post something inappropriate for a shared office environment, then don't post it. No ads, no abuse, and no programming questions. Trolling, (political, climate, religious or whatever) will result in your account being removed.

 
GeneralThought of the Day Pin
OriginalGriff1-Jun-20 4:51
mveOriginalGriff1-Jun-20 4:51 
GeneralRe: Thought of the Day Pin
Daniel Pfeffer1-Jun-20 5:06
professionalDaniel Pfeffer1-Jun-20 5:06 
GeneralRe: Thought of the Day Pin
Sander Rossel1-Jun-20 5:09
professionalSander Rossel1-Jun-20 5:09 
GeneralRe: Thought of the Day Pin
Kris Lantz1-Jun-20 5:13
professionalKris Lantz1-Jun-20 5:13 
GeneralRe: Thought of the Day Pin
Mike Hankey1-Jun-20 5:35
mveMike Hankey1-Jun-20 5:35 
GeneralRe: Thought of the Day Pin
W Balboos, GHB1-Jun-20 5:53
W Balboos, GHB1-Jun-20 5:53 
GeneralRe: Thought of the Day Pin
jeron11-Jun-20 6:08
jeron11-Jun-20 6:08 
QuestionRazor vs. Vue, why not both? Pin
Sander Rossel1-Jun-20 3:47
professionalSander Rossel1-Jun-20 3:47 
(Actual (non-programming) question at the bottom)

There's this thing that's been bothering me for a while now.
We've got Razor Pages in .NET Core, which has some really cool features (if you're happy with good old forms rather than SPAs).
For example, having a property such as the following:
C#
[Required]
[StringLength(64, MinimumLength = 1, ErrorMessageResourceType = typeof(Texts), ErrorMessageResourceName = nameof(Texts.StringLengthError))]
public string Name { get; set; }
And some Razor syntax like this:
HTML
<input asp-for-vue="Name" class="form-control" />
Generates the following HTML:
HTML
<input type="text" data-val="true" data-val-length="The Name must be at least 1 and at max 64 characters long." data-val-length-max="64" data-val-length-min="1" data-val-required="The Name field is required." id="Name" maxlength="64" name="Name" class="form-control">
By using resource files, the error messages get translated depending on the language of the user requesting the page.
There's binding between the front-end and back-end (I think through the "name" attribute, but may be the "id" attribute as well).
Pretty sweet!

However, it does absolutely nothing in terms of front-end logic.
If you have a collection, for example, and you need to add an item, Razor Pages is not doing anything for you.
So that's where I wanted to use Vue and that's where the problems start...
Using Razor, you'd do something like this to render the initial list:
HTML
@for (int i = 0; i < MyItems.Count; i += 1)
{
    <input asp-for-vue="MyItems[i].Name" class="form-control" />
}
That renders the complete list in the back-end and you can't use v-for (from Vue) because that will render the whole list again in the front-end!

However, using purely Vue, you'd get something like the following:
HTML
<div v-for="myItem in myItems">
    <input v-model="myItem.name" class="form-control" />
</div>
Now you're missing the data-val attributes as well as the id and name attributes (and thus your binding).
Adding them manually is just a pain and kind of defeats the whole point of using Razor!

Now I've spend my weekend building something that does both.
HTML
<div asp-list-for-vue="MyItems">
    <input asp-for-vue="MyItems[0].Name" class="form-control" />
</div>
Or, if you like your Vue syntax:
HTML
<div v-for="(myItem, index) in myItems">
    <input asp-for-vue="MyItems[0].Name" class="form-control" />
</div>
The generated HTML will be:
HTML
<div v-for="(myItem, index) in myItems">
    <input type="text" data-val="true" data-val-length="The Name must be at least 1 and at max 64 characters long." data-val-length-max="64" data-val-length-min="1" data-val-required="The Name field is required." :id="'MyItems_' + index + '__Name'" maxlength="64" name="'MyItems[' + index + '].Name'" v-model="myItem.name" class="form-control">
</div>
Now, adding an extra item to your list, like so:
JavaScript
myModel.myItems.push({name: ''});
Will automatically trigger some Vue magic and add a new item with id and name set so it will be correctly submitted to the back end.
It even works with nested lists.

Am I the only one who has this problem/wish?
I'm thinking of submitting the code to GitHub (it's not a lot although currently pretty limited) so other people may use it.
Is there any interest for such a solution?

AnswerRe: Razor vs. Vue, why not both? Pin
Jörgen Andersson1-Jun-20 4:44
professionalJörgen Andersson1-Jun-20 4:44 
GeneralRe: Razor vs. Vue, why not both? Pin
Sander Rossel1-Jun-20 5:08
professionalSander Rossel1-Jun-20 5:08 
GeneralRe: Razor vs. Vue, why not both? Pin
Jörgen Andersson1-Jun-20 5:29
professionalJörgen Andersson1-Jun-20 5:29 
GeneralRe: Razor vs. Vue, why not both? Pin
Sander Rossel1-Jun-20 8:44
professionalSander Rossel1-Jun-20 8:44 
AnswerRe: Razor vs. Vue, why not both? Pin
BillWoodruff1-Jun-20 9:46
professionalBillWoodruff1-Jun-20 9:46 
AnswerRe: Razor vs. Vue, why not both? Pin
Super Lloyd2-Jun-20 2:49
Super Lloyd2-Jun-20 2:49 
GeneralRe: Razor vs. Vue, why not both? Pin
Sander Rossel2-Jun-20 2:58
professionalSander Rossel2-Jun-20 2:58 
GeneralThere is generally a lot of truth in jokes Pin
ZurdoDev1-Jun-20 2:06
professionalZurdoDev1-Jun-20 2:06 
GeneralRe: There is generally a lot of truth in jokes Pin
Slacker0071-Jun-20 2:12
professionalSlacker0071-Jun-20 2:12 
GeneralRe: There is generally a lot of truth in jokes PinPopular
Mircea Neacsu1-Jun-20 2:20
Mircea Neacsu1-Jun-20 2:20 
GeneralRe: There is generally a lot of truth in jokes Pin
Greg Utas1-Jun-20 2:22
professionalGreg Utas1-Jun-20 2:22 
GeneralRe: There is generally a lot of truth in jokes Pin
Greg Utas1-Jun-20 2:21
professionalGreg Utas1-Jun-20 2:21 
GeneralRe: There is generally a lot of truth in jokes Pin
Sander Rossel1-Jun-20 4:06
professionalSander Rossel1-Jun-20 4:06 
GeneralRe: There is generally a lot of truth in jokes Pin
Greg Utas1-Jun-20 4:08
professionalGreg Utas1-Jun-20 4:08 
GeneralRe: There is generally a lot of truth in jokes PinPopular
ZurdoDev1-Jun-20 2:33
professionalZurdoDev1-Jun-20 2:33 
GeneralRe: There is generally a lot of truth in jokes Pin
Sander Rossel1-Jun-20 4:07
professionalSander Rossel1-Jun-20 4:07 
GeneralRe: There is generally a lot of truth in jokes Pin
ZurdoDev1-Jun-20 4:16
professionalZurdoDev1-Jun-20 4:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.