ตอนที่ 6 : การทำ Validate และ Modify data in Mobile Services บน HTML และ JavaScript
ตอนที่ 6 : การทำ Validate และ Modify data in Mobile Services บน HTML และ JavaScript การเขียน Script เป็นความสามารถของ Mobile Services ที่จะช่วยให้เราเขียนรูปแบบการทำงานและคำสั่งต่าง ๆ ได้ (คล้ายกับการเขียน Stored Procedure บน SQL Server) เช่น เราสามารถตรวจสอบความถูกต้องของข้อมูลก่อนการ Insert ลงใน Table และในกรณีที่ข้อมูลผิดพลาดก็สามารถที่จะแจ้งสถานะกลับไปยัง Client ที่เป็น HTML และ JavaScript ได้ หรือจะเขียนพวกเหตุการณ์อื่น ๆ บน Script ก็ได้เช่นเดียวกัน เช่นการ Query ข้อมูลมาตรวจสอบก่อนการ Insert และการตรวจสอบข้อมูลอื่น ๆ ที่เกี่ยวข้อง
ในตัวอย่างนี้เราจะออกแบบ Mobile Services เพื่อรับ Input Data จาก HTML/JavaScript โดยมีเงื่อนไขว่า HTML จะส่งข้อมูลที่เป็น name และ email โดย name จะต้องมีความยาวไม่เกิน 5 ตัวอักษร ถ้าเกินนี้จะส่งค่า Error แจ้งกลับไปยัง HTML และ JavaScript
ในตอนนี้เรามี Mobile Services อยู่แล้ว 1 รายการ
Table ตารางชื่อว่า MyMember ซึ่งอยู่รายการอยู่ 4 record
ในส่วนของ Script ที่เป็นคำสั่ง insert()
ให้เราเพิ่มเงื่อนไขนี้ลงไป โดยจะเป็นการตรวจสอบ name จะต้องไม่เกิน 5 ตัวอักษร
function insert(item, user, request) {
if (item.name.length > 10) {
request.respond(statusCodes.BAD_REQUEST, {
error: "Text length must be under 5"
});
} else {
request.execute();
}
}
ถ้าเกิน 5 ตัวอักษรจะให้ return คำว่า "Text length must be under 5" กลับไป
JSON.parse(error.request.responseText).error
เป็นคำสั่ง สำหรับการอ่านค่า Error ที่ส่งมาจาก Script บน HTML และ JavaScript
Code ทั้งหมด
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>ThaiCreate.Com</title>
<link rel='stylesheet' href='styles.css' />
<meta name='viewport' content='width=device-width' />
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script><![endif]-->
<script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
<script src='https://thaicreate.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js'></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var client = new WindowsAzure.MobileServiceClient('https://thaicreate.azure-mobile.net/', 'uJPAhkAkcTBuTyCNxaOSnDKFzkoYqB49'),
myMemberTable = client.getTable('MyMember');
function refreshMyMember() {
var query = myMemberTable.orderBy("id")
query.read().then(function(mymemberItems) {
var listItems = $.map(mymemberItems, function(item) {
return $('<li>')
.attr('data-todoitem-id', item.id)
.append($('<div>name : '+item.name+' email : '+item.email+'</div>')
);
});
$('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
$('#summary').html('<strong>' + mymemberItems.length + '</strong> item(s)');
}, handleError);
}
function handleError(error) {
var text = error + (error.request ? ' - ' + error.request.status : '');
$('#errorlog').append($('<li>').text(text));
}
// Handle insert
$('#add-item').submit(function(evt) {
var tname = $('#txtName');
var temail = $('#txtEmail');
sname = tname.val();
semail = temail.val();
if (sname !== '') {
myMemberTable.insert({ name: sname, email: semail })
.then(refreshMyMember, function(error){
alert(JSON.parse(error.request.responseText).error);
});
}
tname.val('').focus();
temail.val('').focus();
evt.preventDefault();
});
// On initial load, start by fetching the current data
refreshMyMember();
});
</script>
<div id='wrapper'>
<article>
<header>
<h2>Windows Azure</h2>
<h1>Mobile Services</h1>
<form id='add-item'>
<button type='submit'>Add</button>
<div>
Name : <input type='text' id='txtName' placeholder='Enter your name' style='width:200px' />
Email : <input type='text' id='txtEmail' placeholder='Enter your email' style='width:300px' /></div>
</form>
</header>
<ul id='todo-items'></ul>
<p id='summary'>Loading...</p>
</article>
<footer>
<a href='http://www.windowsazure.com/en-us/develop/mobile/'>
Learn more about Windows Azure Mobile Services
</a>
<ul id='errorlog'></ul>
</footer>
</div>
</body>
</html>
Screenshot
ทำการ Input ข้อมูล name ที่มี Length มากกว่า 5
แสดง Error กลับมา
ลองเปลี่ยนเป็นข้อมูลที่ถูกต้อง
จะ Insert ผ่าน
เมื่อกลับไปดูที่ Mobile Serveries บน Portal Management ข้อมูลก็จะถูก Insert เข้าเรียบร้อยแล้ว
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
Load balance : Server 00
