Skip to content

Commit 46d54ff

Browse files
jesperhoyjesperhoy
committed
v1.3
1 parent 24cb97b commit 46d54ff

14 files changed

+204
-234
lines changed

‎README.md

Lines changed: 42 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,87 @@
11
# Vue.js ASP.NET Web Forms Helpers
22

3-
This library (.NET Framework 4.5) contains 4 ASP.NET Web Forms controls to simplify integrating Vue.js with ASP.NET Web Forms.
3+
This library (.NET Framework 4.5) contains 3 ASP.NET Web Forms controls to simplify integrating Vue.js with ASP.NET Web Forms.
44

5-
Each control can render for Vue.js or for the [Vue Light .NET Compiler](https://github.com/jesperhoy/VueLight) (no reactivity) by setting the "VueLight" attribute (false/true).
5+
The **Component** and **App** controls can either render for Vue.js or for the [Vue Light .NET Compiler](https://github.com/jesperhoy/VueLight) (no reactivity) by setting the "VueLight" attribute (false/true).
66

77
## How to use
88

99
[Download the "VueJSWebForms.dll" file](https://github.com/jesperhoy/VueJSWebForms/releases) and drop this into your ASP.NET web site's "bin" folder.
1010

1111
You can reference the assembly in a Web Forms page like this:
1212

13-
<%@ Register Assembly="VueJSWebForms" Namespace="VueJSWebForms" TagPrefix="vwf" %>
13+
<%@ Register Assembly="VueJSWebForms" Namespace="VueJSWebForms" TagPrefix="vue" %>
1414

15-
And then instantiate a control (in this case "Component") like this:
15+
And then use the controls like this:
1616

17-
<vwf:Component id="thing" params="year,color" runat="server">
18-
...Vue.js template...
19-
</vwf:/Component>
17+
<vue:Component name="car" props="make,year" runat="server">
18+
<li>This {{make}} is {{(new Date()).getFullYear() - year}} years old.</li>
19+
</vue:Component>
2020

21-
And then use an instance of that component in another Vue.js template:
21+
<vue:App datajs="[{Make:'Buick',Year:2001},{Make:'Pontiac',Year:1998}]" runat="server" >
22+
<ul>
23+
<car v-for="car in cars" :make="car.Make" :year="car.Year" />
24+
</ul>
25+
</vue:App>
2226

23-
<thing year="2018" color="blue" />
2427

2528

2629
## ASP.NET Web Forms controls
2730

28-
- **Render**
31+
- **Component**
2932

30-
Used to render the results of a Vue.js template using global variables.
33+
Makes it easy to render a Vue.js component for re-use in a Vue.js application or in other Vue.js components.
3134

3235
Parameters:
33-
- `DataJS` - The Vue.js "data" property. A string with a JSON data object (or JavaScript) to use for rendering.
34-
- `VueLight` (true/false) - If the template should be compiled and rendered by the Vue Light server side compiler.
36+
- `File` - virtual path of a .vue file (for example "~/components/list1.vue"). If not specified, the content of the control is used as the Vue.js template instead.
37+
- `Name` - the name of the component (tag-name in app/other components). If not specified and `File` is, the file name (without path / suffix) will be used as the component name.
38+
- `Props` - a comma separated list of property names for the component (not used when `File` is specified).
3539
- `RenderTemplate` (true/false) - If the raw template should be rendered (in a `<script type="x-template">` tag). Not technically necessary and makes output larger, but helpful for debugging if template is generated dynamically.
40+
- `VueLight` (true/false) - If the template should be compiled and rendered by the Vue Light server side compiler (no reactivity).
3641

37-
Examples of use in a Web Forms page:
38-
- [Rendered with Vue Light .NET Compiler](sample-web-site/sample-vuelight.aspx)
39-
- [Rendered with Vue.js](sample-web-site/sample-vuejs.aspx)
40-
41-
- **Component**
42+
- **App**
4243

43-
Makes it easy to render a simple Vue.js component for re-use in Vue.js application or in other Vue.js components.
44+
Used to render the results of a Vue.js template.
4445

4546
Parameters:
46-
- `ID` - the name of the component.
47-
- `Props` - a comma separated list of property names for the component.
48-
- `VueLight` (true/false) - If the template should be compiled and rendered by the Vue Light server side compiler.
47+
- `File` - virtual path of a .vue file (for example "~/components/list1.vue"). If not specified, the content of the control is used as the Vue.js template instead.
48+
- `DataJS` - The Vue.js "data" property. A string with a JSON data object (or JavaScript) to use for rendering.
49+
- `Name` - the name of the Vue.js app variable. Defaults to "app".
4950
- `RenderTemplate` (true/false) - If the raw template should be rendered (in a `<script type="x-template">` tag). Not technically necessary and makes output larger, but helpful for debugging if template is generated dynamically.
51+
- `VueLight` (true/false) - If the template should be compiled and rendered by the Vue Light server side compiler (no reactivity).
5052

51-
Examples of use in a Web Forms page:
52-
- [Rendered with Vue Light .NET Compiler](sample-web-site/sample-vuelight.aspx)
53-
- [Rendered with Vue.js](sample-web-site/sample-vuejs.aspx)
53+
54+
- **Template**
5455

55-
- **FileComponent**
56+
Used to render HTML in a `<script type="x-template">` tag.
5657

57-
Use to render a Vus.js component from a .vue file for re-use in Vue.js application or in other Vue.js components.
58+
The only purpose of this is to get HTML syntax highlighting and intellisense in the HTML editor in Visual Studio. This is not really specific to Vue.js in any way, but is convenient when authoring more complex Vue.js applications / components.
5859

5960
Parameters:
60-
- `File` - virtual path of the .vue file (for example "~/components/list1.vue").
61-
- `ID` - the name of the component.
62-
- `VueLight` (true/false) - If the template should be compiled and rendered by the Vue Light server side compiler.
63-
- `RenderTemplate` (true/false) - If the raw template should be rendered (in a `<script type="x-template">` tag). Not technically necessary and makes output larger, but helpful for debugging.
61+
- `ID` - will be rendered as the ID for the script tag.
6462

65-
[Example of use in a Web Forms page](sample-web-site/sample-vue-file.aspx)
6663

67-
Note: Only the most basic .vue file layout is supported. The .vue file must have exactly one `<template>` section, one `<script>` section, and NO `<style>` section.\
68-
The `<script>` section must start with `export default {`\
69-
See [car.vue](sample-web-site/car.vue) as an example.\
70-
For now, the .vue file `<script>` section will only be included in the rendered JavaScript when the control's
71-
`VueLight` attribute set to false (or is not present).
72-
73-
- **ScriptTemplate**
64+
## Examples
7465

75-
Used to render HTML in a `<script type="x-template">` tag.
66+
- [Using Component and App controls with Vue.js](sample-web-site/sample-vuejs.aspx)
67+
- [Using Component and App controls with Vue Light .NET Compiler](sample-web-site/sample-vuelight.aspx)
68+
- [Using Template control](sample-web-site/sample-template.aspx)
69+
- [Using .vue file](sample-web-site/sample-vue-file.aspx)
7670

77-
The only purpose of this is to get HTML syntax highlighting and intellisense in the HTML editor in Visual Studio. This is not really specific to Vue.js in any way, but is convenient when authoring more complex Vue.js applications / components.
7871

79-
Parameters:
80-
- `ID` - will be rendered as the ID for the script tag.
72+
## Note about .vue files
8173

82-
[Example of use in a Web Forms page](sample-web-site/sample-scripttemplate.aspx)
74+
You can specify a .vue file in the `File` parameter of the **Component** and **App** controls
8375

76+
Only the most basic .vue file layout is supported:
77+
- The .vue file must have exactly one `<template>` section, one `<script>` section, and NO `<style>` section.
78+
- The `<script>` section must start with `export default {`
8479

85-
Common for the **Render**, **Component**, and **ScriptTemplate** controls above is that their content is used as the Vue.js template - for example:
80+
See [car.vue](sample-web-site/car.vue) as an example.
8681

87-
<vl:Render runat="server">
88-
<ul v-show="z">
89-
<li v-for="x in y">{{x}}</li>
90-
</ul>
91-
</vl:Renter>
82+
For now, the .vue file `<script>` section will only be included in the rendered JavaScript when the control's
83+
`VueLight` attribute set to false (or is not present).
9284

93-
The **FileComponent** control does not support any content (template is obtained from the .vue file instead).
9485

9586

9687
## License

‎sample-web-site/Bin/VueJSWebForms.dll

0 Bytes
Binary file not shown.

‎sample-web-site/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
<h1>Vue.JS ASP.NET Web Forms Helpers - Examples</h1>
77

88
<ul>
9-
<li><a href="sample-vuelight.aspx"><b>Component</b> and <b>Render</b> controls - Vue Light rendering</a></li>
10-
<li><a href="sample-vuejs.aspx"><b>Component</b> and <b>Render</b> controls - Vue.js rendering</a></li>
11-
<li><a href="sample-vue-file.aspx"><b>FileComponent</b> and <b>Render</b> constrols - Vue.js rendering</a></li>
12-
<li><a href="sample-scripttemplate.aspx"><b>ScriptTemplate</b> control</a></li>
9+
<li><a href="sample-vuejs.aspx"><b>Component</b> and <b>App</b> controls - Vue.js rendering</a></li>
10+
<li><a href="sample-vuelight.aspx"><b>Component</b> and <b>App</b> controls - Vue Light rendering</a></li>
11+
<li><a href="sample-vue-file.aspx"><b>Using .vue file</a></li>
12+
<li><a href="sample-template.aspx"><b>ScriptTemplate</b> control</a></li>
1313
</ul>
1414

1515
</body>

‎sample-web-site/sample-scripttemplate.aspx renamed to ‎sample-web-site/sample-template.aspx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<%@ Page Language="C#" %>
2-
<%@ Register Assembly="VueJSWebForms" Namespace="VueJSWebForms" TagPrefix="vwf" %>
2+
<%@ Register Assembly="VueJSWebForms" Namespace="VueJSWebForms" TagPrefix="vue" %>
33

44
<html>
55
<head>
@@ -10,22 +10,22 @@
1010
<form id="form1" runat="server">
1111

1212

13-
<vwf:ScriptTemplate ID="template1" runat="server">
13+
<vue:Template ID="template1" runat="server">
1414
<div>
1515
{{ message }}
1616
</div>
17-
</vwf:ScriptTemplate>
17+
</vue:Template>
1818

1919
<div id="app"></div>
2020

2121
<script>
22-
new Vue({
23-
el: '#app',
24-
template: '#template1',
25-
data: {
26-
message: 'Hello Vue!'
27-
}
28-
})
22+
new Vue({
23+
el: '#app',
24+
template: '#template1',
25+
data: {
26+
message: 'Hello Vue!'
27+
}
28+
});
2929
</script>
3030

3131
</form>

‎sample-web-site/sample-vue-file.aspx

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
<%@ Page Language="C#" %>
2-
<%@ Register Assembly="VueJSWebForms" Namespace="VueJSWebForms" TagPrefix="vwf" %>
2+
<%@ Register Assembly="VueJSWebForms" Namespace="VueJSWebForms" TagPrefix="vue" %>
33

44
<%
5-
vlRender1.DataJS = @"{
6-
title: 'Age of cars',
7-
cars: [{ Make: 'Buick', Year:2001 },
8-
{ Make: 'Pontiac', Year:1998 },
9-
{ Make: 'BMW', Year:2003 },
10-
{ Make: 'Nissan', Year:2015 }]}";
5+
VueApp1.DataJS = @"{ title: 'Age of cars',
6+
cars: [{ Make: 'Buick', Year:2001 },
7+
{ Make: 'Pontiac', Year:1998 },
8+
{ Make: 'BMW', Year:2003 },
9+
{ Make: 'Nissan', Year:2015 }]}";
1110
%>
1211
<html>
1312
<head>
@@ -17,16 +16,16 @@
1716
<body>
1817
<form id="form1" runat="server">
1918

20-
<vwf:FileComponent File="~/car.vue" ID="car" runat="server" />
19+
<vue:Component File="~/car.vue" runat="server" />
2120

22-
<vwf:Render ID="vlRender1" runat="server">
21+
<vue:App id="VueApp1" runat="server">
2322
<div>
2423
<h1>{{title}}</h1>
2524
<ul>
2625
<car v-for="car in cars" :make="car.Make" :year="car.Year" />
2726
</ul>
2827
</div>
29-
</vwf:Render>
28+
</vue:App>
3029

3130
</form>
3231
</body>

‎sample-web-site/sample-vuejs.aspx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
<%@ Page Language="C#" %>
2-
<%@ Register Assembly="VueJSWebForms" Namespace="VueJSWebForms" TagPrefix="vwf" %>
2+
<%@ Register Assembly="VueJSWebForms" Namespace="VueJSWebForms" TagPrefix="vue" %>
33

44
<%
5-
vlRender1.DataJS = @"{
6-
title: 'Age of cars',
7-
cars: [{ Make: 'Buick', Year:2001 },
8-
{ Make: 'Pontiac', Year:1998 },
9-
{ Make: 'BMW', Year:2003 },
10-
{ Make: 'Nissan', Year:2015 }]}";
5+
VueApp1.DataJS = @"{ title: 'Age of cars',
6+
cars: [{ Make: 'Buick', Year:2001 },
7+
{ Make: 'Pontiac', Year:1998 },
8+
{ Make: 'BMW', Year:2003 },
9+
{ Make: 'Nissan', Year:2015 }]}";
1110
%>
1211
<html>
1312
<head>
@@ -17,18 +16,18 @@
1716
<body>
1817
<form id="form1" runat="server">
1918

20-
<vwf:Component ID="car" props="make,year" runat="server">
19+
<vue:Component Name="car" props="make,year" runat="server">
2120
<li>This {{make}} is {{(new Date()).getFullYear() - year}} years old.</li>
22-
</vwf:Component>
21+
</vue:Component>
2322

24-
<vwf:Render ID="vlRender1" Compile="false" runat="server">
23+
<vue:App ID="VueApp1" Compile="false" runat="server">
2524
<div>
2625
<h1>{{title}}</h1>
2726
<ul>
2827
<car v-for="car in cars" :make="car.Make" :year="car.Year" />
2928
</ul>
3029
</div>
31-
</vwf:Render>
30+
</vue:App>
3231

3332
</form>
3433
</body>

‎sample-web-site/sample-vuelight.aspx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
11
<%@ Page Language="C#" %>
2-
<%@ Register Assembly="VueJSWebForms" Namespace="VueJSWebForms" TagPrefix="vwf" %>
2+
<%@ Register Assembly="VueJSWebForms" Namespace="VueJSWebForms" TagPrefix="vue" %>
33

44
<%
5-
vlRender1.DataJS = @"{
6-
title: 'Age of cars',
7-
cars: [{ Make: 'Buick', Year:2001 },
8-
{ Make: 'Pontiac', Year:1998 },
9-
{ Make: 'BMW', Year:2003 },
10-
{ Make: 'Nissan', Year:2015 }]}";
5+
VueApp1.DataJS = @"{ title: 'Age of cars',
6+
cars: [{ Make: 'Buick', Year:2001 },
7+
{ Make: 'Pontiac', Year:1998 },
8+
{ Make: 'BMW', Year:2003 },
9+
{ Make: 'Nissan', Year:2015 }]}";
1110
%>
1211
<html>
1312
<body>
1413
<form id="form1" runat="server">
1514

16-
<vwf:Component ID="car" props="make,year" VueLight="true" runat="server">
15+
<vue:Component Name="car" props="make,year" VueLight="true" runat="server">
1716
<li>This {{make}} is {{(new Date()).getFullYear() - year}} years old.</li>
18-
</vwf:Component>
17+
</vue:Component>
1918

20-
<vwf:Render ID="vlRender1" VueLight="true" runat="server">
19+
<vue:App ID="VueApp1" VueLight="true" runat="server">
2120
<div>
2221
<h1>{{title}}</h1>
2322
<ul>
2423
<car v-for="car in cars" :make="car.Make" :year="car.Year" />
2524
</ul>
2625
</div>
27-
</vwf:Render>
26+
</vue:App>
2827

2928
</form>
3029
</body>

‎src/My Project/AssemblyInfo.vb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,5 @@ Imports System.Runtime.InteropServices
3131
' by using the '*' as shown below:
3232
' <Assembly: AssemblyVersion("1.0.*")>
3333

34-
<Assembly: AssemblyVersion("1.2.0.0")>
35-
<Assembly: AssemblyFileVersion("1.2.0.0")>
34+
<Assembly: AssemblyVersion("1.3.0.0")>
35+
<Assembly: AssemblyFileVersion("1.3.0.0")>

0 commit comments

Comments
 (0)