Home > Vue.Js > how to dynamic bind table and list from database in Vue js



how to dynamic bind table and list from database in Vue js

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="form1" 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()

{

    string config = Convert.ToString(ConfigurationManager.ConnectionStrings["myconnection"]);

    List<Users> Users = new List<Users>();

    SqlConnection con = new SqlConnection(config);

    con.Open();

    using (SqlCommand cmd = new SqlCommand("Select * from Users", con))

    {

        SqlDataReader idr = cmd.ExecuteReader();

        if (idr.HasRows)

        {

            Users = populateLisst(idr, con);

        }

    }

 

    con.Close();

    return JsonConvert.SerializeObject(Users);

 

}

 

public static List<Users> populateLisst(SqlDataReader idr, SqlConnection con)

{

    List<Users> usersI = new List<Users>();

    while (idr.Read())

    {

        usersI.Add(new Users

 

                    {

                        id = Convert.ToInt32(idr["userId"]),

                        Name = Convert.ToString(idr["name"]),

                        role = Convert.ToString(idr["role"])

                    });

    }

    return usersI;

}

 

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.



Comments



Leave a Reply

Comment:*
Email ID:*


Name:*