傑特_資訊手札

1.Dynamic add control LinkButton

'Generate Name Link Button
Dim btnName As New LinkButton AddHandler btnName.Click, AddressOf btnDownload_Click
btnName.ID = "123"
btnName.CommandName = "name"
btnName.Attributes.Add("runat", "server")
btnName.Style.Add("text-decoration", "none")

2.Dynamic add control  table and insert Link Button to TD

'Generate  table
Dim table As New Table()
Dim tRow As New TableRow()
Dim tCell As New TableCell()

'Insert link button to table
tCell.Controls.Add(btnName)
tRow.Cells.Add(tCell)
table.Rows.Add(tRow)

3.Dynamic add control  DIV and insert Table to DIV
'Generate div
    Dim div As New HtmlGenericControl("div")

'Insert table to Div
    div.Controls.Add(table)

參考資料：
http://www.allenkuo.com/EBook5/view.aspx?TreeNodeID=31&id=58
http://www.blueshop.com.tw/board/show.asp?subcde=BRD20071105235713OLJ&fumcde=
www.blueshop.com.tw/board/FUM20041006161839LRJ/BRD20060910192120K3P.html
http://www.blueshop.com.tw/board/FUM20041006161839LRJ/BRD20120828093044OHM.html
http://www.aspsnippets.com/Articles/ASPNet-Persist-Dynamic-Controls-Dynamic-Controls-disappear-after-PostBack-in-ASPNet.aspx
http://jayhsunote.blogspot.tw/2011/06/aspnet-controlusercontrolpostback.html
http://w3937.pixnet.net/blog/post/75882652-%5Bc%23%5Dasp.net-%E5%8B%95%E6%85%8B%E7%94%A2%E7%94%9F%E6%8E%A7%E5%88%B6%E9%A0%85%E7%AD%86%E8%A8%98
http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1727.aspx
http://zongnansieprogram.blogspot.tw/2013/09/c-vb-pageload-pageinit.html?spref=fb
http://www.aspsnippets.com/Articles/ASPNet-Dynamic-Controls-ViewState-Retain-state-for-dynamically-created-controls-on-PostBack.aspx

<html>
<head>
　<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
       .left {
          float:left;
       }
    </style>

<script language="javascript">
  $(document).ready(function(){
  alert($(document).width());
var docw = $(document).width() - 599;
$("#SliderRight").click(function(){
$("#main").animate({
scrollLeft: $("#main").scrollLeft() + docw
}, 700,function(){});
});
$("#SliderLeft").click(function(){
$("#main").animate({
scrollLeft: $("#main").scrollLeft() - docw
}, 700,function(){});
});

  });
</script>
</head>

<body>

<input type="button" id="left" value="左" />
<input type="button" id="right" value="右" />
<div id="main" style="margin: 50px auto; overflow: hidden; width: 100%; height: 600px;">
<div style="width: 4200px;">
<div class="left">1<br /><img src="1.jpg" alt="" width="300px" /></div>
<div class="left">2<br /><img src="2.jpg" alt="" width="300px" /></div>
<div class="left">3<br /><img src="3.jpg" alt="" width="300px" /></div>
<div class="left">4<br /><img src="4.jpg" alt="" width="300px" /></div>
<div class="left">5<br /><img src="5.jpg" alt="" width="300px" /></div>
</div>
</div>

</body>
</html>

參考資料：
http://sweeteason.pixnet.net/blog/post/37793032-%E7%B7%B4%E7%BF%92%E7%94%A8jquery-%E8%AE%93%E9%A0%81%E9%9D%A2%E5%B7%A6%E5%8F%B3%E6%BB%91%E5%8B%95

新增Chart Control

Visual Studio 2008 web.config加入MSChart的元件 (.Net Framework 3.5)

<configuration>
  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;url=~\images\chartTemporary\;" />
  </appSettings>

  <system.webServer>
    <handlers>
      <remove name="ChartImageHandler" />
      <add name="ChartImageHandler" preCondition="integratedMode" verb="POST,GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </handlers>
  </system.webServer>

  <system.web>
    <httpHandlers>
       <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
    </httpHandlers>
  </system.web>

  <pages validateRequest="false" enableEventValidation="false" enableViewStateMac="true">
    <controls>
      <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </controls>
  </pages>

  <compilation debug="true">
    <assemblies>
       <add assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </assemblies>
  </compilation>
</configuration>

參考來源：http://www.dotblogs.com.tw/shunnien/archive/2013/04/15/101651.aspx

前台

<asp:Chart ID="Chart1" runat="server" ImageStorageMode="UseImageLocation" Visible="false" Width="720px" ImageLocation="~/images/chartTemporary/ChartPic_#SEQ(300,3)">
       <Series>
            <asp:Series Name="Series1">
            </asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1">
            </asp:ChartArea>
        </ChartAreas>
</asp:Chart>

ImageLocation :暫存圖檔位置及檔案名稱設定。
ChartPic_#SEQ(300,3)的規則為300張圖片為一個循環。

參考來源：
http://www.4guysfromrolla.com/articles/081909-1.aspx
http://www.dotblogs.com.tw/shadow/archive/2011/03/10/21762.aspx

後台


Private Sub CreateChart(ByVal dt As DataTable)
        '資料來源為DataTable(欄位名稱MyDateTime及Count)
        ' xValues:MyDateTime , yValues:Count
        For Each row As DataRow In dt.Rows
            Dim intPointidx As Integer
            '新增該筆資料的XY值，並取得該值的idx
            intPointidx = Chart1.Series("Series1").Points.AddXY(row("DateTime").ToString(), row("Count"))
            '利用idx顯示該值的ToolTip
            Chart1.Series("Series1").Points(intPointidx).ToolTip = row("MyDateTime") & "\n" & row("Count")
            '設定Marker
            Chart1.Series("Series1").Points(intPointidx).MarkerColor = Color.FromArgb(62, 151, 201)
            Chart1.Series("Series1").Points(intPointidx).MarkerStyle = MarkerStyle.Circle
            Chart1.Series("Series1").Points(intPointidx).MarkerSize = 10
        Next
     
         '增加圖示
        Chart1.Legends.Add("Legends1")
        Chart1.Legends("Legends1").BackHatchStyle = DataVisualization.Charting.ChartHatchStyle.DarkDownwardDiagonal
        Chart1.Legends("Legends1").BorderWidth = 1
        Chart1.Legends("Legends1").BorderColor = Color.FromArgb(200, 200, 200)
        Chart1.Legends("Legends1").Docking = Docking.Top
     
        '設定X軸及Y軸
        Chart1.ChartAreas("ChartArea1").AxisY.ScaleBreakStyle.CollapsibleSpaceThreshold = 20
        Chart1.ChartAreas("ChartArea1").AxisY.ScaleBreakStyle.LineColor = Color.Red
        Chart1.ChartAreas("ChartArea1").AxisY.LabelStyle.Font = New System.Drawing.Font("Arial", 9, System.Drawing.FontStyle.Regular)
        Chart1.ChartAreas("ChartArea1").BackGradientStyle = DataVisualization.Charting.GradientStyle.VerticalCenter
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = False
        Chart1.ChartAreas("ChartArea1").AxisX.LabelStyle.Font = New System.Drawing.Font("Arial", 9, System.Drawing.FontStyle.Regular)
        Chart1.ChartAreas("ChartArea1").AxisX.Enabled = DataVisualization.Charting.AxisEnabled.True
        Chart1.ChartAreas("ChartArea1").AxisY.Minimum = 0
        Chart1.ChartAreas("ChartArea1").AxisX.MajorGrid.Enabled = False
        Chart1.ChartAreas("ChartArea1").AxisY.MajorGrid.Enabled = True
        Chart1.ChartAreas("ChartArea1").AxisY.MajorGrid.LineColor = Color.FromArgb(150, 150, 150)
        Chart1.ChartAreas("ChartArea1").AxisX.MajorGrid.LineColor = Color.FromArgb(150, 150, 150)
        Chart1.ChartAreas("ChartArea1").AxisX.IntervalAutoMode = DataVisualization.Charting.IntervalAutoMode.VariableCount
        Chart1.ChartAreas("ChartArea1").AxisX.IsLabelAutoFit = True
        Chart1.ChartAreas("ChartArea1").AxisX.LabelStyle.IsStaggered = True
        '把圖表的左右兩邊空白去除
        Chart1.ChartAreas("ChartArea1").AxisX.IsMarginVisible = False
        '設定X軸間距
        Chart1.ChartAreas("ChartArea1").AxisX.Interval = 1
        '設定Y軸間距
         Chart1.ChartAreas("ChartArea1").AxisY.Interval = 1
        Chart1.Series("Series1").IsValueShownAsLabel = False
        Chart1.Series("Series1").LegendText = "DateTime"
        Chart1.Series("Series1").Font = New System.Drawing.Font("Arial", 9, System.Drawing.FontStyle.Regular)
        Chart1.Series("Series1").ChartType = SeriesChartType.Line
        Chart1.Series("Series1").BorderWidth = 3
        Chart1.Series("Series1").BorderColor = Color.FromArgb(62, 151, 201)
    End Sub


參考資料：
1.http://www.dotblogs.com.tw/suehilary/archive/2011/10/22/45430.aspx
2.http://www.dotblogs.com.tw/shunnien/archive/2013/04/22/102049.aspx
3.http://www.dotblogs.com.tw/mrkt/archive/2008/11/28/6116.aspx
4.http://blog.xuite.net/fenctang/twblog/137597590-asp.net+c%23+MSChart+
http://nickmason.lionfree.net/blog/117/%E5%A5%BD%E7%94%A8%E7%9A%84%E5%9C%96%E8%A1%A8%E5%B7%A5%E5%85%B7-microsoft-chart-control/
5.http://fecbob.pixnet.net/blog/post/38851855-asp.net%E8%B3%87%E6%96%99%E6%8E%A7%E5%88%B6%E9%A0%85%E4%B9%8Bchart%E7%9A%84%E7%94%A8%E6%B3%95
6.http://xpower2888.pixnet.net/blog/post/149675162-ms-chart-%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E6%96%B9%E6%B3%95
7.http://www.dotblogs.com.tw/nobel12/archive/2009/10/22/11206.aspx
8.http://www.blueshop.com.tw/board/FUM20041006161839LRJ/BRD20110304093353IHH.html

重點：一定要寫在Page_Init

        protected void Page_Init(object sender, EventArgs e)
        {
            //動態新增
            DataTable dt = new DataTable();
            dt.Load(GetZipCity());

            if (dt.Rows.Count > 0)
            {
                LinkButton[] btnZipCity = new LinkButton[dt.Rows.Count];

                for (int i = 0; i < btnZipCity.Length; i++)
                {
                    btnZipCity[i] = new LinkButton();
                    btnZipCity[i].ID = "btnZipCity" + i.ToString();
                    btnZipCity[i].Text = dt.Rows[i]["CityName"].ToString();
                    btnZipCity[i].CommandName = dt.Rows[i]["CityID"].ToString();
                    btnZipCity[i].Click += new System.EventHandler(btnZipCity_Click);
                    btnZipCity[i].Command += new CommandEventHandler(btnZipCity_Click);
                    this.PlaceHolder.Controls.Add(btnZipCity[i]);

                    Label olab = new Label();
                    olab.Text = " | ";
                    PlaceHolder.Controls.Add(olab);
                }
            }
          }

        // ZipCity Button 的 Click 事件導向函數
        protected void btnZipCity_Click(object sender, EventArgs e)
        {
            LinkButton ZipCity = (LinkButton)sender;
            QueryZipCity = ZipCity.CommandName;
        }

參考資料：http://careychen.pixnet.net/blog/post/22622126-%5Basp.net%5D-%E5%9C%A8-web-form-%E5%8B%95%E6%85%8B%E5%BB%BA%E7%AB%8B%E6%8E%A7%E5%88%B6%E9%A0%85%E7%9A%84%E6%AD%A3%E7%A2%BA%E6%96%B9%E6%B3%95

<head>
  <script>
      $(function() {          
        $("input[id*=tbStartTime]").datepicker({ showOn: "both", buttonImage: "../images/gesplus/calendar.gif", buttonImageOnly: true, dateFormat: "yy/mm/dd" });
      });
  </script>

  <style>
//調整圖片位置
    .ui-datepicker-trigger { margin-left:5px; margin-top: 5px; margin-bottom: -6px; }
  </style>
</head>


<asp:TextBox ID="tbStartTime" runat="server" Columns="10"></asp:TextBox>

參考資料：
http://blog.xuite.net/tolarku/blog/213867131-%5BAsp.net%5D+%E9%81%B8%E6%93%87%E6%97%A5%E6%9C%9F+Calendar+%E4%BD%BF%E7%94%A8+jQueryUI+%E7%9A%84+DatePicker

http://www.fbloggs.com/2009/04/16/how-to-style-the-button-image-in-jquery-datehandler-ui/

http://jqueryui.com/datepicker/#localization

http://blog.wu-boy.com/2008/04/jquery%E7%AD%86%E8%A8%98-%E5%A5%BD%E7%94%A8%E7%9A%84%E6%97%A5%E6%9C%9F%E5%87%BD%E5%BC%8F/


script取得ID的方式
一、　
$(".date-picker").datepicker()

二、

$("#<%= txtEventDate.ClientID %>").datepicker()

三、

$("input[id*=txtEventDate]").datepicker()

參考資料：
http://stackoverflow.com/questions/5115067/jquery-datepicker-not-working-in-asp-net-page

使用者需求：在Repeater內使用CheckBox並且勾選時立即變更資料庫狀態。
<table>
     <asp:repeater id="ContentRepeater" runat="server">
           <ItemTemplate>
                   <tr>
                        <td>
                               <asp:Literal ID="ltContentId" runat="server"
                               Text='<%# DataBinder.Eval(Container, "DataItem.ContentId") %>'>
                               </asp:Literal>
                        </td>
                       <TD>
                              <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true"                                                  OnCheckedChanged='cbCoaching_OnCheckedChanged'/>
                       </td>
                   </tr>
           </ItemTemplate>
      </asp:repeater>
</table>


    Protected Sub cbCoaching_OnCheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
         '取得在repeater內的那一欄資料。
        Dim chk As CheckBox = DirectCast(sender, CheckBox)
        Dim item As RepeaterItem = DirectCast(chk.NamingContainer, RepeaterItem)
        Dim ltContentId As Literal = DirectCast(item.FindControl("ltContentId"), Literal)
         response.write ("ltContentId =" &ltContentId  & "<BR>")
    End Sub

參考資料：
http://stackoverflow.com/questions/6997948/handling-the-checkedchanged-event-of-inner-repeater-checkbox-control-in-asp-net
http://stackoverflow.com/questions/25308247/how-to-get-the-repeater-item-in-a-checkbox-checkedchanged-event

Dim regx As New Regex("http(s)?://([\w+?\.\w+])+([a-zA-Z0-9\~\!\@\#\$\%\^\&amp;\*\(\)_\-\=\+\\\/\?\.\:\;\'\,]*)?", RegexOptions.IgnoreCase)

            Dim mactches As MatchCollection = regx.Matches(MyString)

            For Each match As Match In mactches
                MyString= MyString.ToString.Replace(match.Value, "<a href='" & match.Value & "' target='_blank' >" & match.Value & "</a>")
            Next

參考文章：
http://weblogs.asp.net/farazshahkhan/regex-to-find-url-within-text-and-make-them-as-link

http://www.dotblogs.com.tw/jameswu/archive/2008/04/22/3009.aspx

http://www.allenkuo.com/EBook5/view.aspx?TreeNodeID=67&id=209

http://blog.xuite.net/xiaolian/blog/59321149-%E3%80%90C%23%E3%80%91%E5%AD%97%E4%B8%B2%E6%9C%89%E6%95%88%E8%BD%89%E6%88%90%E8%B6%85%E9%80%A3%E7%B5%90

http://smallpoint-program.blogspot.tw/2012/08/phpemail.html