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