米米貓學開發

2013年6月4日星期二

knockout

使用 knockout 可以很容易地建立網頁的UI介面，並設定HTML項目的資料繫結

在VS2012 ASP.NET 網站中，可以使用NuGet下載

順便下載jQuery

加入HTML網頁

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-2.0.1.js"></script>
    <script src="Scripts/knockout-2.2.1.js"></script>
    <script>
        $(document).ready(function () {
            var emp = {
                id: 1,
                name: "mary",
                age: 30
            };
            ko.applyBindings(emp);
        });
    </script>
</head>
<body>
    員工編號:
    <div data-bind="text: id"></div>
    <div>名稱:</div>
    <input data-bind="value: name" />
    <div>年齡:</div>
    <input data-bind="value: age" />
</body>
</html>

網頁呈現的效果

Disable Validation Check - ASP.NET 4.5 Web Forms

注意，Disable Validation Check會有安全性的問題，若非必要，不要disable

若ASPX網頁包含以下control

Button Click後會印出文字方塊內容

protected void Button1_Click( object sender , EventArgs e ) {
Response.Write( TextBox1.Text );
}

若執行時輸入JavaScript程式:

ASP.NET會有錯誤訊息:

若想要JavaScript能夠執行

作法1:

設定ASPX Page ValidateRequest為false:

則JS程式可執行

作法2，使用ASP.NET 4.5 新功能defer (lazy) validation

requestValidationMode設4.5

TextBox設定ValidateRequestMode="Disabled"，不驗證:

在server side可以使用Request.Unvalidated.Form取得未驗證的資料，若使用Request.Form會產生驗證例外錯誤：

測試，JS可以執行

2013年5月29日星期三

jQuery Cycle plugin

要在網頁做圖片輪撥的效果可以使用 jQuery Cycle Plugin，官網在http://jquery.malsup.com/cycle/

在Visual Studio 2012 可以使用NuGet下載

按安裝之後，自動下載相關js檔案：

在網頁中，引用js檔案，並加入想要輪撥的圖片，利用javascript叫用cycle plugin就OK了

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.5.2.min.js"></script>
    <script src="Scripts/jquery.cycle.all.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.slideshow').cycle({
                fx: 'fade'
            });
        });
    </script>
</head>
<body>
    <div class="slideshow">
        <img src="Images/oIMG_5060.jpg" />
        <img src="Images/oIMG_5665.jpg" />
        <img src="Images/oIMG_5783.jpg" />
        <img src="Images/oIMG_5829.jpg" />
    </div>
</body>
</html>

網頁一執行，就會自動輪流撥放圖片，並有淡入淡出的換場效果