Создание приложения Knockout вместе с настройкой среды в Visual Studio

Опубликовано: 5 Января, 2022

Настройка среды -
Шаг 1. Откройте Visual Studio и создайте приложение ASP.Net (Интернет -> Visual Studio [версия]), назовите его KOSetup.

Шаг 2. Установите файл jQuery и knockout.jsfile, создайте папку с именем Scripts и перетащите эти два файла (jQuery и knockout.js) в папку Scripts.

Шаг 3 : Создайте страницу .aspx, назовите ее LearnKO.aspx

Шаг 4. Создайте страницу .js и назовите ее LearnKO.js.

Шаг 5. Откройте файл «LearnKO.js» и перетащите файл jQuery и файл библиотеки knockout.js в «LearKO.js».

Шаг 6 : Напишите $ (document) .ready (function () {}); в файле LearnKO.js. Функция document.ready запускается, когда наша объектная модель HTML-документа загружается в браузер.

Создание приложения Knockout -

Шаг 7 : Создайте в ней базу данных и таблицу (с именем «Студент»).

Шаг 8 : Создайте модель данных сущности ADO.NET (Visual C # -> Data), назвав ее LearningKO.edmx,
Нажмите «Добавить» -> «Создать из базы данных» -> «Выбрать таблицу, созданную в базе данных» -> снимите флажок с последней опции, т.е. «Импортировать выбранные хранимые процедуры и функции в модель сущности» -> «Назовите пространство имен модели как LearningKOModel», мы получим определенные файлы в нашем решении. в файлах context и tt.




Шаг 9 : Напишите методы (код) на странице .aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace Setup
{
public partial class LearnKO : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static Student[] FetchStudents()
{
Entities dbEntities = new Entities();
var data = (from item in dbEntities.Students orderby
item.StudentId select item).Take(5);
return data.ToArray();
}
[WebMethod]
public static string SaveStudent(Student[] data)
{
try
{
var dbContext = new Entities();
var studentList = from dbStududent in dbContext.Students
select dbStududent;
foreach (Student userDetails in data)
{
var student = new Student();
if (userDetails != null)
{
student.StudentId = userDetails.StudentId;
student.FirstName = userDetails.FirstName;
student.LastName = userDetails.LastName;
student.Address = userDetails.Address;
student.Age = userDetails.Age;
student.Gender = userDetails.Gender;
student.Batch = userDetails.Batch;
student.Class = userDetails.Class;
student.School = userDetails.School;
student.Domicile = userDetails.Domicile;
}
Student stud = (from st in studentList where
st.StudentId == student.StudentId select st).FirstOrDefault();
if (stud == null)
dbContext.Students.Add(student);
dbContext.SaveChanges();
}
return "Data saved to database!";
}
catch (Exception ex)
{
return "Error: " + ex.Message;
}
}
[WebMethod]
public static string DeleteStudent(Student data)
{
try
{
var dbContext = new Entities();
var student = dbContext.Students.FirstOrDefault
(userId => userId.StudentId == data.StudentId);
if (student != null)
{
dbContext.Students.Remove(student);
dbContext.SaveChanges();
}
return "Data deleted from database!";
}
catch (Exception ex)
{
return "Error: " + ex.Message;
}
}
[WebMethod]
public static string UpdateStudent(Student data)
{
try
{
var dbContext = new Entities();
var student = dbContext.Students.FirstOrDefault
(userId => userId.StudentId == data.StudentId);
if (student != null)
{
student.FirstName = data.FirstName;
student.LastName = data.LastName;
student.Address = data.Address;
student.Age = data.Age;
student.Gender = data.Gender;
student.Batch = data.Batch;
student.Class = data.Class;
student.School = data.School;
student.Domicile = data.Domicile;
dbContext.SaveChanges();
}
return "Data updated in database!";
}
catch (Exception ex)
{
return "Error: " + ex.Message;
}
}
}
}

Шаг 10. Напишите код на странице .aspx

<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="LearnKO.aspx.cs" Inherits="Setup.LearnKO" %>
<!DOCTYPE html>
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head id = "Head1" runat = "server" >
< title >Learning Knockout.js</ title >
< script src = "Scripts/jquery-3.4.0.min.js" ></ script >
< script src = "Scripts/knockout-3.5.0.js" ></ script >
< script src = "Scripts/LearnKO.js" ></ script >
< link href = "Styles/Style.css" rel = "stylesheet" />
</ head >
< body >
< form id = "form1" runat = "server" >
< h2 >Add Student</ h2 >
< table style = "width:100%;" >
< tr >
< td >Student ID (int):</ td >
< td >
< input data-bind = "value: StudentId" /></ td >
<!--, valueUpdate:'keypress'-->
< td >< span data-bind = "text: StudentId" /></ td >
</ tr >
< tr >
< td >First Name :</ td >
< td >
< input data-bind = "value: FirstName" /></ td >
< td >< span data-bind = "text: FirstName" /></ td >
</ tr >
< tr >
< td >Last Name :</ td >
< td >
< input data-bind = "value: LastName" /></ td >
< td >< span data-bind = "text: LastName" /></ td >
</ tr >
< tr >
< td >Student Age (int) :</ td >
< td >
< input data-bind = "value: Age" /></ td >
< td >< span data-bind = "text: Age" /></ td >
</ tr >
< tr >
< td >Gender :</ td >
< td >
< select data-bind="options: Genders, value: Gender,
optionsCaption: 'Select Gender...'"></ select ></ td >
< td >< span data-bind = "text: Gender" /></ td >
</ tr >
< tr >
< td >Batch :</ td >
< td >
< input data-bind = "value: Batch" /></ td >
< td >< span data-bind = "text: Batch" /></ td >
</ tr >
< tr >
< td >Address :</ td >
< td >
< input data-bind = "value: Address" /></ td >
< td >< span data-bind = "text: Address" /></ td >
</ tr >
< tr >
< td >Class :</ td >
< td >
< input data-bind = "value: Class" /></ td >
< td >< span data-bind = "text: Class" /></ td >
</ tr >
< tr >
< td >School :</ td >
< td >
< input data-bind = "value: School" /></ td >
< td >< span data-bind = "text: School" /></ td >
</ tr >
< tr >
< td >Domicile :</ td >
< td >
< select data-bind="options: Domiciles, value: Domicile,
optionsCaption: 'Select Domicile...'"></ select >
</ td >
< td >< span data-bind = "text: Domicile" /></ td >
</ tr >
< tr >
< td colspan = "3" >
< button type = "button" data-bind = "click: AddStudent" >
Add Student
</ button >
< button type = "button" data-bind = "click: SaveStudent" >
Save Student To Database
</ button >
</ td >
</ tr >
</ table >
< br />
< h2 >List of Students</ h2 >
< table style = "width:100%;" data-bind="visible: Students().length >
0" border="0" >
< tr >
< th >Student Id</ th >
< th >First Name</ th >
< th >Last Name</ th >
< th >Age</ th >
< th >Gender</ th >
< th >Batch</ th >
< th >Address</ th >
< th >Class</ th >
< th >School</ th >
< th >Domicile</ th >
</ tr >
< tbody data-bind = "foreach: Students" >
< tr >
< td >< span data-bind = "text: StudentId" /></ td >
< td >
< input data-bind = "value: FirstName" /></ td >
< td >
< input data-bind = "value: LastName" /></ td >
< td >
< input data-bind = "value: Age" /></ td >
< td >
< select data-bind = "options: $root.Genders, value: Gender" >
</ select ></ td >
< td >
< input data-bind = "value: Batch" /></ td >
< td >
< input data-bind = "value: Address" /></ td >
< td >
< input data-bind = "value: Class" /></ td >
< td >
< input data-bind = "value: School" /></ td >
< td >
< select data-bind="options: $root.Domiciles,
value: Domicile">
</ select ></ td >
< td >< a href = "#" data-bind = "click: $root.DeleteStudent" >
Delete</ a ></ td >
< td >< a href = "#" data-bind = "click: $root.UpdateStudent" >
Update</ a ></ td >
</ tr >
</ tbody >
</ table >
</ form >
</ body >
</ html >

Шаг 11. Напишите код на странице LearnKO.js

/// < reference path = "Scripts/jquery-3.4.0.min.js" />
/// < reference path = "Scripts/knockout-3.5.0.js" />
function Student(data) {
this.StudentId = ko.observable(data.StudentId);
this.FirstName = ko.observable(dat
Статьи

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Онлайн-обменники: быстрый и удобный способ конвертации активов в современном мире
17 Апреля, 2024
Лучшие онлайн-курсы по WordPress: рейтинг 2024
29 Марта, 2024
Для кого буду полезны услуги SMS-центра
24 Марта, 2024
Что такое экспертиза исходного кода и как ее проводят?
3 Марта, 2024
Как добавить деньги на счет аккаунта Steam через криптовалюту
20 Февраля, 2024
Заказать докторскую диссертацию на заказ
30 Января, 2024
Купить лайки в ВК: зачем, сколько и где
19 Января, 2024
Как добавить деньги на свой аккаунт в Steam и начать покупать игры и контент
12 Января, 2024