• Trang chủ
  • Du lịch – Khám phá
  • Game HOT
  • Góc giải đáp
  • Office
  • Blog Tài chính
  • Công nghệ
  • Ứng dụng
  • Xe cộ
  • Blog Đời sống
Menu
  • Trang chủ
  • Du lịch – Khám phá
  • Game HOT
  • Góc giải đáp
  • Office
  • Blog Tài chính
  • Công nghệ
  • Ứng dụng
  • Xe cộ
  • Blog Đời sống
Home»Công nghệ»Hướng dẫn lập trình web API Service (MVC5) mới nhất 
Công nghệ

Hướng dẫn lập trình web API Service (MVC5) mới nhất 

f331@By f331@Tháng Tám 17, 2021Không có phản hồi6 Mins Read
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte Email
Hướng dẫn lập trình web API Service (MVC5) mới nhất 
Share
Facebook Twitter LinkedIn Pinterest Email

Ngay từ khi ra đời có thể nói ASP.NET MVC là một mô hình lập trình web chiến lược của Microsoft. Đối với những ai ưa thích và có niềm đam mê với “.NET”, phát triển website thông qua ASP.NET MVC là kĩ năng không thể thiếu. Bài viết này sẽ hướng dẫn lập trình web API Service (MVC5) mới nhất để giúp bạn hình dung rõ hơn.

Table of Contents

  • Website API là gì
  • Cấu trúc của một MVC
  • Hướng dẫn lập trình web API Service (MVC5) mới nhất
    • Tạo project
    • Tạo Data Model
    • Tạo controller
    • Thao tác với Entity framework
    • Thiết lập Client với Knockout js

Website API là gì

Asp.net web API (Application Programming Interface) là một framework giúp việc xây dựng HTTP service một cách dễ dàng hơn. Chúng đủ sức làm phát triển cho nhiều clients khác nhau như trình duyệt, mobile app. Web API là một hệ thống góp phần phát triển các ứng dụng dựa trên Restfull service trong “.Net”. Bạn có thể hình dung rõ hơn qua hình dưới đây:

Hướng dẫn lập trình web API Service (MVC5) mới nhất 

Hoặc bạn cũng có thể tìm hiểu rõ hơn tại đường link: http://www.asp.net/web-api

Máy tính các bạn cần cài đặt Visual Studio 2013 (hoặc là Visual Studio 2012) để mở mẫu Project cũng như phát triển ứng dụng web API.

Cấu trúc của một MVC

Hướng dẫn lập trình web API Service (MVC5) mới nhất 

MVC thiết thế gồm ba phần cơ bản là Model,View và Controller. Trong đó:

  • Model: đóng vai trò chứa và thể hiện các đặc tính, logic ứng dụng. Hoặc cũng có thể hiểu Model là sự thay mặt cho dữ liệu và logic cốt lõi. Nó chính là những lớp (class) mang thông tin về đối tượng ta cần thao tác, làm việc. Ví dụ: “Sách” chứa các thông tin trên nó như “Tên”, “Tác giả”, “Ngày phát hành”, “Giá”, “Nhà sản xuất”, …
  • View: có nhiệm vụ thể hiện một hay nhiều Model một cách trực quan. Hay  nó nhận thông tin  từ một hay nhiều Model sau đó biểu diễn lên các trang web.
  • Controller: nằm giữa tầng View và Model; có nhiệm vụ tìm kiếm, xử lý một hoặc nhiều Model, sau đó gửi Model đó qua View để View hiển thị.

Hướng dẫn lập trình web API Service (MVC5) mới nhất

Tạo project

Các bước để tạo một project mới được thực hiện như sau:

Bước 1: Mở  File/ New Project 

Hướng dẫn lập trình web API Service (MVC5) mới nhất

Bước 2: Tại danh sách mới hiện ra, chọn “ASP.NET Web Application (.NET Framework)” ở góc trái màn hình. Đặt tên và chọn nơi lưu Project, sau đó nhấn “OK”.

Hướng dẫn lập trình web API Service (MVC5) mới nhất

Bước 3: Tại màn hình “New ASP.NET Web Application”, chọn “MVC” và OK

Hướng dẫn lập trình web API Service (MVC5) mới nhất

Bước 4: Nhấn F5 để khởi động Visual Studio

Tạo Data Model

Trong phần tiếp theo hướng dẫn lập trình web API Service (MVC5) mới nhất, chúng tôi sẽ hướng dẫn bạn thao tác thực hiện là nhấn chuột phải tại mục Models/ New/ Class.

Hướng dẫn lập trình web API Service (MVC5) mới nhất

Tạo controller

Để tạo Controller, các bước thực hiện như sau:

Bước 1: Nhấp chuột phải tại mục Controller/ “Add”/ “Controller”

Bước 2: Tại cửa sổ “Add Scaffold”, chọn “Web API 2 Controller with actions, using Entity Framework”.

Hướng dẫn lập trình web API Service (MVC5) mới nhất

Sau đó màn hình sẽ hiển thị cửa sổ Add controller

Bước 3: 

  • Tại Model class, chọn Category class.
  • Tích vào ô “Use async controller actions”.
  • Trong mục “Controller Name”, controller auto được điền vào.

Hướng dẫn lập trình web API Service (MVC5) mới nhất

Tiếp đến nhấn (+) ở mục “Data context Class”, gõ tên Data context class trên cửa sổ “New Data Context” theo mong muốn.Chẳng hạn ở đây class có tên : WebAPIDemoContext. ProductsController được tạo tương tự trên.

Thao tác với Entity framework

Demo này sử dụng Code First Migrations để thực hiện init data và thao tác với Sql server.

 Chọn “Tool”/ “Nuget Package Manager”/ “Package Manage Console”. Trong cửa sổ Package Manage Console gõ lệnh sau

Enable-Migrations

Một thư mục Migrations được xây dựng cùng file  “Configuration”. Tiếp theo chúng ta sẽ init data bằng method Seed trong class. Đây là method xây dựng sẵn trong class DbContext của Entity Framework và chúng ta hoàn toàn đủ sức ghi đè tùy theo trường hợp sử dụng. Chúng được minh họa như sau:

protectedoverridevoidSeed(WebAPIDemoContext context)

        

            context.Categories.AddOrUpdate(x => x.Id,newCategory  Id =1, Name =”Mobile” ,newCategory  Id =2, Name =”Tablet” ,newCategory  Id =3, Name =”Smart watch” 

               );

            context.Products.AddOrUpdate(x => x.Id,newProduct

                    Id =1,

                    Name =”Product 1″,

                    CategoryId =1,

                    Price =9.99M,

                ,newProduct

                    Id =2,

                    Name =”Product 2″,

                    CategoryId =1,

                    Price =12.95M,

                ,newProduct

                    Id =3,

                    Name =”Product 3″,

                    CategoryId =2,

                    Price =15,

                ,newProduct

                    Id =4,

                    Name =”Product 4″,

                    CategoryId =3,

                    Price =10,

                

                );

     

 

Chúng ta đang có một số data check cho demo, sau đó ta cần tới một class để tạo table và insert những bản ghi trên vào sql server, để thực hiện điều đó ta gõ lệnh:

Add-Migration Initial

Update-Database

File migration được tạo ra như sau:

namespace WebAPIDemo.Migrations

using System;using System.Data.Entity.Migrations;publicpartialclassInitial : DbMigrationpublicoverridevoidUp()

        CreateTable(“dbo.Categories”,

                c =>new

                        Id = c.Int(nullable: false, identity: true),

                        Name = c.String(nullable: false),

                    )

                .PrimaryKey(t => t.Id);CreateTable(“dbo.Products”,

                c =>new

                        Id = c.Int(nullable: false, identity: true),

                        Name = c.String(nullable: false),

                        Price = c.Decimal(nullable: false, precision: 18, scale: 2),

                        CategoryId = c.Int(nullable: false),

                    )

                .PrimaryKey(t => t.Id)

                .ForeignKey(“dbo.Categories”, t => t.CategoryId, cascadeDelete: true)

                .Index(t => t.CategoryId);

        publicoverridevoiddownload()

        DropForeignKey(“dbo.Products”, “CategoryId”, “dbo.Categories”);DropIndex(“dbo.Products”, new[]  “CategoryId” );DropTable(“dbo.Products”);DropTable(“dbo.Categories”);

Với đoạn code trên, Code First tự động liên kết, tạo database, table và insert data tới sql server trong lần khởi chạy đầu tiên, những lần sau đó nếu có thay đổi thì migration DB sẽ được update ngược lại. Sau đó chúng ta nhấn F5 để chạy web, kiểm tra database trong Server Explorer của Visual studio. Việc hoàn tất khởi tạo phải có giao diện như sau:

Hướng dẫn lập trình web API Service (MVC5) mới nhất

Hướng dẫn lập trình web API Service (MVC5) mới nhất

Thiết lập Client với Knockout js

Hướng dẫn lập trình web API Service (MVC5) mới nhất sẽ bao gồm các bước để thiết lập Client. Knockout js là một thư viện Javascript,trong đó sử dụng mô ảnh Model-View-ViewModel (MVVM). Mô hình hoạt động của nó được thể hiện như hình sau:

Hướng dẫn lập trình web API Service (MVC5) mới nhất

Các thao tác để thiết lập Client:

  • Add “knockout js”. Trong Package manager console gõ lệnh sau:
Install-Package knockoutjs
  • Tạo lượt xem Model:
varViewModel=function () var self =this;

    self.products = không.observableArray();

    self.error = ko.observable();var productsUri =’/api/products/’;functionajaxHelper(uri, method, data) 

        self.error(”); // Clear error messagereturn $.ajax(

            type: method,

            url: uri,

            dataType: ‘json’,

            contentType: ‘application/json’,

            data: data ? JSON.stringify(data) : null).thất bại(function (jqXHR, textStatus, errorThrown) 

            self.error(errorThrown);

        );

    functiongetAllProducts() ajaxHelper(productsUri, ‘GET’).done(function (data) 

            self.products(data);

        );

    // Fetch the initial data.getAllProducts();

    self.detail = ko.observable();

    self.getProductDetail=function (item) ajaxHelper(productsUri + item.Id, ‘GET’).done(function (data) 

            self.detail(data);

        );

    self.categories = không.observableArray();

    self.newProduct= 

        Category: không.observable(),

        Name: không.observable(),

        Price: ko.observable(),

    var categoriesUri =’/api/categories/’;functiongetCategories() ajaxHelper(categoriesUri, ‘GET’).done(function (data) 

            self.categories(data);

        );

    self.addProduct=function (formElement) var product = 

            CategoryId: self.newProduct.Category().Id,

            Name: self.newProduct.Name(),

            Price: self.newProduct.Price(),

        ;ajaxHelper(productsUri, ‘POST’, product).done(function (item) 

            self.products.push(item);

        );

    getCategories();

;

ko.applyBindings(newViewModel());

  • Binding trên view
class=”panel panel-default”>

class=”panel-heading”>

class=”panel-title”>Products

class=”panel-body”>

  • class=”list-unstyled”data-bind=”foreach: products”>
    • data-bind=”text: CategoryName”>: data-bind=”text: Name”>href=”#”data-bind=”click: $parent.getProductDetail”>Details

Trên đây chúng tôi đã hướng dẫn lập trình web API Service (MVC5) mới nhất. Hy vọng rằng những kiến thức này sẽ phần nào hỗ trợ bạn trong quá trình thực hiện lập trình trên nền tảng C++. Chúc bạn thành công!

Share. Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp Email
Previous ArticleObject reference not set to an instance of an object là lỗi gì? Cách Fix lỗi
Next Article Hướng dẫn cách tạo menu ngang đa cấp bằng Css
f331@
  • Website

Related Posts

iPhone 15 liệu có khắc phục hoàn toàn nhược điểm của iPhone 14?

Tháng Chín 8, 2023

Cập nhật thông tin mới nhất về iPhone 15 Pro Max trước thềm ra mắt

Tháng Chín 8, 2023

Máy Bay Phun Thuốc Đa Năng: Ứng Dụng Trong Kiểm Soát Sâu Bệnh

Tháng Chín 6, 2023

MacBook có Touch Bar – Lựa chọn hoàn hảo hay chỉ là làm màu?

Tháng Sáu 10, 2023

Leave A Reply Cancel Reply

Recent Posts

  • Lời khuyên về quản lý tài chính cho cặp đôi trước khi kết hôn
  • Kem dưỡng ẩm Valentine: Bí quyết cho làn da mềm mại và quyến rũ
  • 3 ưu điểm của Mobile Banking đối với sinh viên trong thời kỳ 4.0
  • Top 6+ sữa tắm trị rôm sảy cho bé tốt NHẤT
  • Sạch gàu hết ngứa thì nên chọn dầu gội Thái Dương 7 hay Thái Dương 7 Plus?
Không có bình luận nào để hiển thị.
Our Picks
  • Facebook
  • Twitter
  • Pinterest
  • Instagram
  • YouTube
  • Vimeo
Đừng bỏ lỡ

Lời khuyên về quản lý tài chính cho cặp đôi trước khi kết hôn

By f331@Tháng Mười Một 30, 20230

Trước khi kết hôn, các cặp đôi nên cùng nhau bàn bạc về việc quản…

Kem dưỡng ẩm Valentine: Bí quyết cho làn da mềm mại và quyến rũ

Tháng Mười Một 29, 2023

3 ưu điểm của Mobile Banking đối với sinh viên trong thời kỳ 4.0

Tháng Mười Một 28, 2023

Top 6+ sữa tắm trị rôm sảy cho bé tốt NHẤT

Tháng Mười Một 27, 2023
Giới thiệu
Liên hệ
Chính sách bảo mật
Điều khoản sử dụng
Trang chủ
Du lịch - Khám phá
Game hot
Góc giải đáp
Office
Facebook Twitter Youtube Tumblr Spotify
Tài chính
Tin công nghệ
Ứng dụng
Xe cộ
Đời sống
All rights reserved. Powered by https://f33.vn/.

Sign In or Register

Welcome Back!

Login to your account below.

Lost password?