2016年6月28日 星期二

JQuery的基礎應用

在這個號稱 web 2.0 的時代,寫網站,尤其是還用到了大量的 JavaScript,如果與使用者的互動還沒有用到 Ajax 技術的話,似乎是一件很神奇的事,至於 Ajax 是什麼東西?想瞭解的人可以到這裡去看維基百科上的解釋,這篇就專心寫一下 jQuery 中的 Ajax 部份。

程式範例:下載點

這個 PHP 程式很簡單, recive.php它只回應一個index.php傳入的字串,所以我們現在要做的事情便是:按下按鈕後,向 server 端的 index.php向recive.php 發出一個 request,然後把它回應的東西放alert出來。所以我們把 Submit 函式的部份寫成這樣:index.php

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery.js" ></script>
        <script>
         var Submit=function(){
            var URLs="recive.php";
$.ajax({
url: URLs,
data: $('#sentToBack').serialize(),
type:"POST",
dataType:'text',

success: function(msg){
                    alert(msg);
                },

error:function(xhr, ajaxOptions, thrownError){
                    alert(xhr.status);
                    alert(thrownError);
}
            });
        }
        </script>
    </head>
    <body>
        <form id="sentToBack">
            <input type="text" name="Text"/>
            <input type="button"  value="送出" onClick="Submit()"/>
        </form>
    </body>
</html>

ajax當中的參數:

url:指定要進行呼叫的位址。

data:傳送至Server的資料,會自動轉為query string的型式,如果是GET請求還會幫你附加到URL。可用processData選項禁止此自動轉換。物件型式則為一Key/Value pairs。這個範例程式,是使用serialize(),會把name為sentToBack的表單中的資料傳送出去,型態的部分要看type的設定,一般表單都是用POST或是GET。

type:請求方式,POST/GET。

dataType:預期Server傳回的資料類型,如果沒指定,jQuery會根據HTTP MIME Type自動選擇以responseXML或responseText傳入你的success callback。可選的資料類型有:
xml:傳回可用jQuery處理的XML
html:傳回HTML,包含jQuery會自動幫你處理的script tags。
script:傳回可執行的JavaScript。(script不會被自動cache,除非cache設為true)
json:傳回JSON
jsonp:在URL加上?callback=?參數,並在Server端配合送回此jsonp callback。
text:傳回純文字字串。

success:請求成功時執行函式。
function (data, textStatus) {
                       // data 可以是 xmlDoc, jsonObj, html, text, 但還是要參考datatype
                } 

error:請求失敗時執行函式。
           function (xhr, ajaxOptions, thrownError) {
                   //通常ajaxOptions或thrownError只有一個有值
           }
           這個很重要,因為有時候Sever寫好的程式不容易測試,可以透過這個函數把錯誤顯示出來。
其他可能比較會用的參數:

complete:請求完成時執行的函式(不論結果是success或error)。
                 function (XMLHttpRequest, textStatus) {
                   // the options for this ajax request
                 }

beforeSend:發送請求之前可在此修改XMLHttpRequest物件,如添加header等,你可以在此函式中return flase取消Ajax request。
                     function (XMLHttpRequest) {
                          // the options for this ajax request
                     }

其他更多相關的資訊:http://api.jquery.com/jQuery.ajax/

接下來編寫PHP:recive.php

echo $_POST["Text"];

ASP.NET 常規頁生命週期階段(General Page Life-Cycle Stages)

要精準的控制及撰寫程式,首先就是要了解內建程序的執行的順序

https://msdn.microsoft.com/en-us/library/ms178472.aspx

2016年6月18日 星期六

引用WEB USER CONTROL 使用者控制項

靜態引用
<%@ Register TagPrefix="fld" TagName="Field"  Src="~/common/Field.ascx" %>
<fld:Field ID="Field1" runat="server"  />

動態引用
<要注意該控制項的名稱(可能會跟檔名不一致)
例如下方為該控制項程式內容
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Field.ascx.vb" Inherits="common_Field" %>
這裏動態引用就要使用 common_Field 為控件名稱

<%@ Reference Control="~/common/Field.ascx"%>
Dim ct As common_Field = DirectCast(LoadControl("Field.ascx"), common_Field)

 

註解:

@Register是較常用的指令。當你想使用你的聲明或ASPX頁面ASCX用戶控件可以使用此。@Register關聯特定前綴的控件,然後你可以用它在你的標記。

@Reference只是告訴ASP.NET編譯其他的控制,當你的aspx或ascx的編譯頁面。這確保它可在運行時,可以編程方式添加到您的控制層次。這是不常見的,因為在運行時動態變化的用戶控件不COMON。

DirectCast Vs. CType 哪種好?

2016年6月7日 星期二

ASP.NET 使用者控制項

為了可以簡化程式,並且符合物件導向的程式設計方式,所以我們在ASP.NET中會使用ASCX(使用者控制項)

下面的例子為建立使用者控制項的範本:
image

在主頁中使用控制項方式如下:

<%@ Register TagPrefix="uc" TagName="ubtn_Group"  Src="~/admin/controls/btn_Group.ascx" %>

<asp:Panel ID="pnl_control" runat="server" CssClass="BTN_GROUP">
    <uc:ubtn_Group ID="uc1" runat="server" />
</asp:Panel>

呼叫控制項的event方式

Protected Sub lnk_find_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles uc1.bg_lnk_find_Click

End Sub

現在來看看如何撰寫 btn_Group.ascx

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="btn_Group.ascx.vb" Inherits="admin_controls_btn_Group" %>
<asp:Panel ID="pnl_control" runat="server" CssClass="BTN_GROUP">
    <asp:LinkButton ID="lnk_find" runat="server">查詢</asp:LinkButton> |
    <asp:LinkButton ID="lnk_Result" runat="server">結果</asp:LinkButton> |
    <asp:LinkButton ID="lnk_DTL" runat="server">明細</asp:LinkButton>
</asp:Panel>

btn_Group.ascx.vb 內容


Partial Class admin_controls_btn_Group
    Inherits System.Web.UI.UserControl
    Public Event bg_lnk_find_Click As EventHandler
    Public Event bg_lnk_Result_Click As EventHandler
    Public Event bg_lnk_DTL_Click As EventHandler
    Private _set_btn As String = "lnk_find"

    Public Property set_btn() As String
        Get
            set_btn = _set_btn
        End Get
        Set(ByVal value As String)
            _set_btn = value
            '設定
            Set_Lnk_btn(value)
        End Set
    End Property


    Protected Sub lnk_find_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnk_find.Click
        Set_Lnk_btn("lnk_find")
        RaiseEvent bg_lnk_find_Click(New Object(), New EventArgs())
    End Sub

    Protected Sub lnk_Result_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnk_Result.Click
        Set_Lnk_btn("lnk_Result")
        RaiseEvent bg_lnk_Result_Click(New Object(), New EventArgs())
    End Sub

    Protected Sub lnk_DTL_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnk_DTL.Click
        Set_Lnk_btn("lnk_DTL")
        RaiseEvent bg_lnk_DTL_Click(New Object(), New EventArgs())
    End Sub

    Private Sub Set_Lnk_btn(ByVal p_id As String)
        lnk_find.CssClass = ""
        lnk_Result.CssClass = ""
        lnk_DTL.CssClass = ""
        Select Case p_id
            Case "lnk_find"
                lnk_find.CssClass = "active"
            Case "lnk_Result"
                lnk_Result.CssClass = "active"
            Case "lnk_DTL"
                lnk_DTL.CssClass = "active"
        End Select
    End Sub
End Class

 

CSS:

.BTN_GROUP{
    background-color: #eafff7;
    padding-top: 6px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 6px;
    display: block;
    border-radius: 10px;
}
.BTN_GROUP a{
    padding-top: 6px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 6px;
    width:20px
   display: block;
   border-radius: 4px;
}

.BTN_GROUP a:hover{
    background-color: yellow;
}

.BTN_GROUP .active{
    background-color: #2e8b57;
    color: white;
}