Implement .vue single-file component with server-side ViewModel. Use all power of VueJS with simple C# server side data access.
Login.vue.cs
namespace ServerViewModel { public class Login : ViewModel { public Username { get; set; } public Password { get; set; } public Message { get; set; } public void Login() { this.Message = AuthServie.Login(Username, Password); } } }Login.vue
@viewmodel ServerViewModel.Login <template> <div class="login-box"> <p> <label>Username</label> <input type="text" v-model="Username" /> </p> <p> <label>Password</label> <input type="password" v-model="Password" /> </p> <p> <button @click="Login()">Login</button> <a @click="Clear()">Clear</a> </p> <div v-show="Message" class="alert">{{ Message }}</div> </div> </template> <style> .login-box { border: 1px solid silver; button { display: block; } } .alert { color: red; } </style> <script> // Optional: add Vue mixin (client only) return { methods: { Clear: function() { this.Username = ""; this.Password = ""; this.Message = ""; } } } </script>public void Configure(IApplicationBuilder app, IHostingEnvironment env) { app.UseDefaultFiles(); app.UseStaticFiles(); app.UseDotVue(c => { c.AddAssembly(typeof(Startup).Assembly); }); }-
ASP.NET Core 2
-
Server based ViewModel with attributes decorations: methods, watchs and props
-
Deploy
.vuefile as embedded resource (deploy only.dllfile) -
Support file upload
-
Support any external vue plugin
-
See
WebAppfor examples