March 03 2019 by
Admin
In this article, we have described how to dynamic bind table and list using Vue js with example code. Vue js start from an object and HTML element id and data.
In this article,we have described how to dynamic bind table and list using vue js with example code .
vue js start from a object and html element id and data . In vue js uses double braces {{ }} and also uses prefix v- which is represent the vue js symbol.
You can have a look at it and learn below.
Required Namespaces:
We must use the following namespaces.
using Newtonsoft.Json;
using System.Web.Services;
Script
we have described below about script you can have a look at it and learn below.
<script>
var app = new Vue({
el: '#app',
data: {
UsersData: []
},
created: function () {
let cobject = this; // here stored currect instance
$.ajax({
type: "POST",
url: "vuejs.aspx/getData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
cobject.UsersData = JSON.parse(data.d);
}
});
}
})
</script>
The most basic form of data binding in table and list of items using double curly braces.
vue.js is a progressive framework for building user interfaces which are used for two way bind.
Vue.js is a lightweight alternative to other Javascript frameworks like AngularJS.
You can have a look at it and learn.
HTML
<html>
<head runat="server">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form2" runat="server">
<div>
<div id="app">
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>role</th>
</tr>
</thead>
<tbody>
<tr v-for="users in UsersData">
<td>{{users.id }}</td>
<td>{{users.Name }}</td>
<td>{{users.role }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</body>
</html>
C#
We have explained below C# code and added the examples of some user information in this article .You can have a look at it and learn.
[WebMethod]
public static string getData()
{
List<Users> Users = new List<Users>();
Users.Add(new Users
{
id = 1,
Name = "Rjboy",
role = "Admin"
});
Users.Add(new Users
{
id = 2,
Name = "Peter",
role = "View-Admin"
});
Users.Add(new Users
{
id = 3,
Name = "John",
role = "Member"
});
return JsonConvert.SerializeObject(Users);
}
public class Users
{
public int id { get; set; }
public string Name { get; set; }
public string role { get; set; }
}
Note: All contents are copyright of their authors.