مشخصات مقاله
-
1084
-
0.0
-
2754
-
0
-
0
تبدیل حروف بزرگ به کوچک در Knockout.js
رمز فایل :tahlildadeh.com
کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.
تبدیل حروف بزرگ به کوچک با کلیک بر روی دکمه با استفاده از Knockout.js
مقدمه
در این مقاله سعی داریم با کلیک بر روی یک دکمه کلمات را به حروف کوچک تبدیل کنیم.
مرحله 1
Visual Studio را باز کنید.
![clip_image001[8]](http://articles.tahlildadeh.com/image.axd?picture=clip_image001%5B8%5D_20.png "clip_image001[8]")
مرحله 2
برای اجرای برنامه در knockout.js باید کتابخانه knockout.js را به وب سایتمان اضافه کنیم. برای انجام این کار بر روی وب سایت راست کلیک کرده و NuGet Package را انتخاب کنید.
![clip_image002[8]](http://articles.tahlildadeh.com/image.axd?picture=clip_image002%5B8%5D_15.png "clip_image002[8]")
مرحله 3
در NuGet packages به دنبال Knockout.js و کتابخانه Knockout.js را نصب می کنیم.
![clip_image003[8]](http://articles.tahlildadeh.com/image.axd?picture=clip_image003%5B8%5D_7.png "clip_image003[8]")
مرحله 4
پس از اضافه کردن کتابخانه، web form را به شکل زیر تغییر می دهیم:
![clip_image004[8]](http://articles.tahlildadeh.com/image.axd?picture=clip_image004%5B8%5D_9.png "clip_image004[8]")
مرحله 5
حالا باید فایل knockout.js را به برنامه مان اضافه کنیم.
<head runat="server">
<title>title>
<script src="Scripts/knockout-3.3.0.js">script>
head>
در اینجا فایل knockout-3.3.0.js را اضافه کرده ایم. چون بدون این فایل نمی توانیم عملیات knockout.js را انجام دهیم.
کد زیر را برای طراحی form می نویسیم:
<div>
<p>First Name<strong data-bind="text: StartName">strong>p>
<p>Middle Name<strong data-bind="text: middlename">strong>p>
<p>LastName<strong data-bind="text: EndName">strong>p>
<input data-bind="value: StartName" />
<input data-bind="value: middlename" ? />
<input data-bind="value: EndName" />
<p>Hiiii!<strong data-bind="text: completeName">strong>p>
<button data-bind="click: capsName">Submitbutton>
div>
در اینجا سه برچسب به ترتیب برای نام کوچک، نام میانی (middle name) و نام خانوادگی و سه textbox برای دریافت ورودی های کاربر درنظر گرفته ام. همچنین یک دکمه برای انجام عملیات اضافه می کنیم.
مرحله 6
در این مرحله کد کامل برای Knockout.js را می نویسیم. یک مقدار هم برای آن در نظر می گیریم.
کد کامل شده
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>title>
<script src="Scripts/knockout-3.3.0.js">script>
head>
<body>
<form id="form1" runat="server">
<div>
<p>First Name<strong data-bind="text: StartName">strong>p>
<p>Middle Name<strong data-bind="text: middlename">strong>p>
<p>LastName<strong data-bind="text: EndName">strong>p>
<input data-bind="value: StartName" />
<input data-bind="value: middlename" ? />
<input data-bind="value: EndName" />
<p>Hiiii!<strong data-bind="text: completeName">strong>p>
<button data-bind="click: capsName">Submitbutton>
div>
form>
<script>
function x() {
this.StartName = ko.observable("Rahul");
this.middlename = ko.observable("Kumar");
this.EndName = ko.observable("Sharma");
this.completeName = ko.computed(function () {
return this.StartName() + " " + this.middlename() + " " + this.EndName();
}, this);
this.capsName = function () {
var firstCaps = this.StartName();
this.StartName(firstCaps.toLowerCase());
var middleCaps = this.middlename();
this.middlename(middleCaps.toLowerCase());
var lastCaps = this.EndName();
this.EndName(lastCaps.toLowerCase());
}
}
ko.applyBindings(new x());
script>
body>
html>
مرحله 7
حالا کد را با استفاده از کلید F5 اجرا می کنیم. پس از اجرا برنامه پنجره زیر ظاهر می شود:
![clip_image005[8]](http://articles.tahlildadeh.com/image.axd?picture=clip_image005%5B8%5D_5.png "clip_image005[8]")
اگر بر روی دکمه submit کلیک کنید، تمام حروف کلمات به حروف کوچک تبدیل می شوند.
![clip_image006[8]](http://articles.tahlildadeh.com/image.axd?picture=clip_image006%5B8%5D_8.png "clip_image006[8]")