สร้างคำสั่ง JavaScript ด้วย PHP และ ASP.NET MVC Application (dynamic JavaScript code)

เมื่อ : 1-Jan-12 16:07 อ่าน : 288 ครั้ง
Tag : php asp-net-mvc javascript

โดยปกติแล้วการนำไฟล์ เช่น JavaScript, CSS หรือรูปภาพ เข้ามาใช้ใน HTML ไฟล์
จะต้องเขียนคำสั่งที่ระบุถึงที่อยู่ของไฟล์ (path) พร้อมทั้งระบุนามสกุลของไฟล์นั้นๆ ด้วย เช่น .js, .css หรือ .png

จึงมีคำถามเกิดขึ้นว่า จำเป็นไหมที่่ path ของไฟล์ต้องมีนามสกุล?

คำตอบคือ ไม่จำเป็น ขอเพียงให้ path ที่ระบุสามารถส่งข้อมูลและประเภทของข้อมูล (content type) กลับมาที่ web browser ให้สามารถแสดงผลได้อย่างถูกต้องก็พอ

โดยปกติ web server จะทำหน้าที่ส่งค่า content type กลับมาที่ browser โดย web server จะส่งตรวจดูว่าไฟล์ที่ web browser เรียกใช้มีนามสกุลใด แล้วก็ส่ง content type กลับมา ด้วยวิธีการนี้จึงต้องมีการกำหนดค่าที่ web server ว่าไฟล์นามสกุลเป็นแบบนี้ จะให้ส่งค่า content type ใดกลับมา

แต่หากเราต้องการเรียกใช้ไฟล์ที่ไม่ระบุไฟล์นามสกุล เราก็ต้องเขียนคำสั่งเพื่อระบุ content type ที่จะส่งกลับมาให้ browser เอง
ซึ่งสามารถทำได้ดังนี้

ตัวอย่างคำสั่ง JavaScript (ใช้ร่วมกับ jQuery)

PHP application

คำสั่งสร้าง dynamic JavaScript ทำงานฝั่ง server

DynamicJs.php

<?php

//set content type as JavaScript
header("Content-Type: application/x-javascript; charset=utf-8");

//get random color
$colors = array("Red","CornflowerBlue","SpringGreen ","Yellow","Pink");
$index = rand(0, count($colors)-1 );
$color = $colors[$index];

//heredoc syntax
$js = <<<JS

function setBackgroundColor(){
    //change body backgroud color
    $("body").css({backgroundColor: "$color"});
}

JS;

echo $js;//output JavaScript to response as JavaScript Content

?>

นำไปใช้ใน HTML ไฟล์

TestPage.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="Scripts/jquery-1.5.1.min"></script>
        <!-- include dynamic JavaScript -->
        <script type="text/javascript" src="DynamicJs.php"></script>
        <script type="text/javascript">
           
           //short hand jQuery document ready
            $(function(){
                
                 //call method created by DynamicJs.php
                 setBackgroundColor();
                
            });
           
        </script>
    </head>
    <body>
        
    </body>
</html>

ASP.NET MVC application

คำสั่งสร้าง dynamic JavaScript ทำงานฝั่ง server

HomeController.cs

using System;
using System.Web.Mvc;

namespace DynamicContent.Controllers
{
    public class HomeController : Controller
    {

        /// <summary>
        /// render Test Page
        /// </summary>
        /// <returns>Test Page</returns>
        public ActionResult Test()
        {
            return View();
        }

        /// <summary>
        /// generate JavaScript code
        /// </summary>
        /// <returns>JavaScript code</returns>
        public ActionResult DynamicJs()
        {
            //var for Implicit type variable C# 3.0
            var colors = new string[] {"Red", "CornflowerBlue", 
                "SpringGreen ", "Yellow", "Pink"};

            //random color
            var random = new Random();
            var index = random.Next(0, colors.Length - 1);
            var color = colors[index];

            //create JavaScript method 
            //use @ for not to escape special character
            var script =
                @"function setBackgroundColor(){
                
                //change body backgroud color
                    $('body').css({backgroundColor: '" + color +

                "'}); }";

            //use built-in JavaScript ActionResult 
            //which add application/x-javascript as Content Type
            return JavaScript(script);
        }

    }
}

นำไปใช้ใน HTML ไฟล์

Test.cshtml (Razor)

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" 
        src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
        <!-- include dynamic JavaScript -->
        <script type="text/javascript" src="/Home/DynamicJs"></script>
            <script type="text/javascript">

                //short hand jQuery document ready
                $(function () {

                    //call function created by DynamicJs Action Method
                    setBackgroundColor();

                });
           
        </script>
    </head>
    <body>
        
    </body>
</html>

ทดสอบการทำงาน

PHP Application เปิดไฟล์ TestPage.html ผ่าน web server ที่มี PHP interpreter

ASP.NET MVC Application run ด้วย Visual Studio 2010

ผลลัพธ์ที่แสดงใน browser

ทดลองกดปุ่ม F5 (refresh) ไปเรื่อยๆ พื้นหลังหน้าเว็บที่แสดงใน browser จะเปลี่ยนเป็นสีต่างๆ ที่สุ่มได้สลับไปมา

download source code ในตัวอย่างไปทดลองเล่นกันดูได้นะครับ

DynamicContent.zip

credit

ภาพประกอบจาก http://www.webtutorials.tk

ASP.NET MVC, C#, MonoTouch, Entity Framework, Unit Test ...

สร้างคำสั่ง JavaScript ด้วย PHP และ ASP.NET MVC Application (dynamic JavaScript code)

ความเห็น

Friends