articles

Home / DeveloperSection / Articles / Integrating KnockoutJS with other technologies like ASP.NET, Node.js, or RESTful APIs?

Integrating KnockoutJS with other technologies like ASP.NET, Node.js, or RESTful APIs?

Integrating KnockoutJS with other technologies like ASP.NET, Node.js, or RESTful APIs?

Ravi Vishwakarma134 25-Jun-2024

Integrating KnockoutJS with other technologies like ASP.NET, Node.js, or RESTful APIs can significantly enhance the functionality and user experience of your web applications. Here’s a detailed guide on how to achieve this integration:

Integrating KnockoutJS with ASP.NET

Create an ASP.NET Project:

  • Use Visual Studio to create a new ASP.NET Web Application.
  • Choose the appropriate template (e.g., MVC or Web API).

Set Up KnockoutJS: Add KnockoutJS to your project via NuGet Package Manager or include it directly from a CDN in your HTML.

    <!-- Link to Knockout.js library for MVVM pattern support -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"
            integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Creating the ViewModel: Define the ViewModel in JavaScript:

<script type="text/javascript">
    function AppViewModel() {
        var self = this;
        self.items = ko.observableArray([]);

        self.loadItems = function () {
            $.getJSON('/api/Values', function (data) {
                self.items(data);
                console.log(data);
            });
        };

        self.loadItems();
    }

    ko.applyBindings(new AppViewModel());

</script>

Create a Controller: In the Controllers folder, create a new controller that returns data.

using KnockoutJSAPI.Models;
using System;
using System.Collections.Generic;
using System.Web.Http;
using System.Linq;

namespace KnockoutJSAPI.Controllers
{
    public class ValuesController : ApiController
    {
        private ICollection<Student> GetStudents()
        {
            // Create a list of students
            ICollection<Student> students = new List<Student>
            {
                new Student
                {
                    StudentId = 1,
                    FirstName = "John",
                    LastName = "Doe",
                    DOB = new DateTime(2000, 1, 1),
                    Email = "john.doe@example.com",
                    Phone = "123-456-7890",
                    FatherName = "Michael Doe",
                    MotherName = "Anna Doe",
                    Gender = "Male",
                    RollNo = 101,
                    ClassName = 10,
                    Section = 'A',
                    EnrollmentDate = DateTime.Now,
                    PermanentAddress = new Address
                    {
                        Street = "123 Main St",
                        City = "Springfield",
                        State = "IL",
                        PostalCode = "62701",
                        Country = "USA"
                    },
                    Photo = "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
                    LocalAddress = new Address
                    {
                        Street = "456 Elm St",
                        City = "Chicago",
                        State = "IL",
                        PostalCode = "60601",
                        Country = "USA"
                    },
                    Subjects = new List<Subject>
                    {
                        new Subject
                        {
                            SubjectId = 1,
                            SubjectName = "Mathematics",
                            Description = "Study of numbers and operations.",
                            Credits = 4
                        },
                        new Subject
                        {
                            SubjectId = 2,
                            SubjectName = "Science",
                            Description = "Study of the natural world.",
                            Credits = 3
                        }
                    }
                },
                // Add more students here...
                new Student
                {
                    StudentId = 2,
                    FirstName = "Jane",
                    LastName = "Smith",
                    DOB = new DateTime(2001, 3, 15),
                    Email = "jane.smith@example.com",
                    Phone = "987-654-3210",
                    FatherName = "David Smith",
                    MotherName = "Emily Smith",
                    Gender = "Female",
                    RollNo = 102,
                    ClassName = 10,
                    Section = 'B',
                    EnrollmentDate = DateTime.Now,
                    PermanentAddress = new Address
                    {
                        Street = "789 Oak Ave",
                        City = "Springfield",
                        State = "IL",
                        PostalCode = "62702",
                        Country = "USA"
                    },
                    Photo = "https://file.xunruicms.com/admin_html/assets/pages/media/profile/profile_user.jpg",
                    LocalAddress = new Address
                    {
                        Street = "567 Maple Ln",
                        City = "Chicago",
                        State = "IL",
                        PostalCode = "60602",
                        Country = "USA"
                    },
                    Subjects = new List<Subject>
                    {
                        new Subject
                        {
                            SubjectId = 3,
                            SubjectName = "English",
                            Description = "Study of language and literature.",
                            Credits = 3
                        },
                        new Subject
                        {
                            SubjectId = 4,
                            SubjectName = "History",
                            Description = "Study of past events.",
                            Credits = 2
                        }
                    }
                }
                // Add more students as needed...
            };
            return students;
        }


        // GET api/values
        public IHttpActionResult Get()
        {
            return Ok(GetStudents());
        }

        // GET api/values/5
        public IHttpActionResult Get(int StudentId)
        {
            return Ok(GetStudents().FirstOrDefault(x => x.StudentId == StudentId));
        }

        // POST api/values
        public void Post([FromBody] string value)
        {
        }

        // PUT api/values/5
        public void Put(int id, [FromBody] string value)
        {
        }

        // DELETE api/values/5
        public void Delete(int id)
        {
        }
    }
}

The Student model inherited from different models like Person, Address and Subject models.

Person.cs

using System;
namespace KnockoutJSAPI.Models
{
    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        
        public string FullName
        {
            get
            {
                return this.FirstName + " " + this.LastName;
            }
        }
        public string Email { get; set; }
        public string Phone { get; set; }
        public string FatherName { get; set; }
        public string MotherName { get; set; }
        public string Gender { get; set; }
        public Nullable<DateTime> DOB { get; set; } 
        public string Photo { get; set; }
        
        public int Age
        {
            get
            {
                return (int)(!DOB.HasValue ? 0 : DateTime.Now.Subtract(DOB.Value).TotalDays / 365.25);
            }
        }

        public Address PermanentAddress { get; set; }
        public Address LocalAddress { get; set; }
    }
}

Address.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;

namespace KnockoutJSAPI.Models
{
    public class Address
    {
        public string Street { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }

        public string FullAddress
        {
            get
            {
                return string.Join(", ", this.GetType()
                .GetProperties().Except(new List<PropertyInfo>() { this.GetType().GetProperty("FullAddress") }).Select(x => x.GetValue(this)));
            }
        }

    }
}

Subject.cs

using System;


namespace KnockoutJSAPI.Models
{
    public class Subject
    {
        public int SubjectId { get; set; }
        public string SubjectName { get; set; }
        public string Description { get; set; }
        public int Credits { get; set; }

        public string TeacherName { get; set; }
    }
}

Student.cs

using System;
using System.Collections.Generic;

namespace KnockoutJSAPI.Models
{
    public class Student : Person
    {
        public int StudentId { get; set; }
        public int RollNo { get; set; }
        public int ClassName { get; set; }
        public char Section { get; set; }
        public DateTime EnrollmentDate { get; set; }
        public ICollection<Subject> Subjects { get; set; }
    }
}

Set Up Routing: Ensure your Web API routing is correctly configured in WebApiConfig.cs.

using Newtonsoft.Json.Serialization;
using System.Web.Http;

namespace KnockoutJSAPI
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services
            // Configure JSON serialization to use snake_case
            config.Formatters.JsonFormatter.SerializerSettings.ContractResolver =
                new DefaultContractResolver { NamingStrategy = new SnakeCaseNamingStrategy() };

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

Now create index.cshtml and copy and paste this code into this file.

<section>
    <!-- Display data if available -->
    <div class="row g-3 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4"
         data-bind="foreach: items">
        <!-- Column for each item -->
        <div class="col">
            <!-- Card to display item details -->
            <div class="card ">

                <!-- Item Image -->
                <img data-bind="if: (photo), attr: { src: photo }" class="card-img-top" height="250">
                <div class="card-body">
                    <!-- Card title bound to item's title -->
                    <h5 class="card-title text-capitalize" data-bind="text: full_name"></h5>
                    <!-- Card text bound to item's body -->
                    <p class="card-text">
                        <span data-bind="text: father_name"></span>,
                        <span data-bind="text: mother_name"></span>
                    </p> 
                </div>
                <div class="card-footer border-0 pt-0">
                    <!-- Footer with item address -->
                    <p class="m-0 d-flex justify-content-between">
                        <span data-bind="text: permanent_address.full_address"></span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
<script type="text/javascript">
    // Define the ViewModel
    function AppViewModel() {
        var self = this;
        // Observable array to hold items
        self.items = ko.observableArray([]);

        // Function to load items from API
        self.loadItems = function () {
            $.getJSON('/api/Values', function (data) {
                self.items(data); // Update items with data from API
                console.log(data); // Log data to console for debugging
            });
        };

        // Load items when ViewModel is instantiated
        self.loadItems();
    }

    // Apply bindings to the ViewModel
    ko.applyBindings(new AppViewModel());
</script>

And knockout.JS CDN was added to in layout page like that,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- Link to Knockout.js library for MVVM pattern support -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"
            integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

Output -

Integrating KnockoutJS with other technologies like ASP.NET, Node.js, or RESTful APIs?

 


Hi, my self Ravi Vishwakarma. I have completed my studies at SPICBB Varanasi. now I completed MCA with 76% form Veer Bahadur Singh Purvanchal University Jaunpur. SWE @ MindStick | Software Engineer | Web Developer | .Net Developer | Web Developer | Backend Engineer | .NET Core Developer

Leave Comment

Comments

Liked By