傑特_資訊手札

利用Identity完成Code First  Migrations 。

1.建立ASP.Net Web Application

2.讓專案包含Web Forms,MVC,Web API。

3.成功建立ASP.Net Web Application

4.Identity的DbContext
Identity預設會將DbContext直接寫在IdentityModels.cs，ApplicationDbContext這個class內。
DefaultConnection為Web.config內設定的DBConnection。


5.開啟Package Manager Console

6.Package Manager Console開啟的畫面

7.Visual Studio 2013已內建EntityFramework，如果未內建EntityFramework則需先安裝EntityFramework。

安裝EntityFramework
PM> Install-Package EntityFramework

8.啟動Migration
PM> Enable-Migrations -EnableAutomaticMigrations

10.更新資料庫
PM> Update-Database


13.檢查Migrations資料夾內的Configuration.cs將AutomaticMigrationsEnabled 是否為True。
AutomaticMigrationsEnabled = true;

14.查看201508100619466_info.cs裡面會包含Up()及Down()的方法，up為Migrations升版，down為Migrations降版。

Up()內新增初次建立Identity的Table



參考資料：
http://www.cnblogs.com/libingql/p/3330880.html
http://www.cnblogs.com/nianming/p/3439260.html
https://msdn.microsoft.com/zh-tw/data/jj193542
http://kevintsengtw.blogspot.tw/2013/10/aspnet-mvc-entity-framework-code-first.html
http://blog.sanc.idv.tw/2012/04/entity-framework-code-firstenabling.html
http://blog.sanc.idv.tw/2013/05/entity-framework-code-first-ver-50.html
http://kirkchen.logdown.com/posts/145581-using-aspnet-mvc-to-create-web-api-5-use-entityframework-code-first-database
http://www.cnblogs.com/kenshincui/p/3286103.html

Visual Studio 2013預設連結的Connection為LocalDb
LocalDb設定的Web.config如下：

<configuration>
  <connectionStrings>
    <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\aspnet-20150807-1029-CodeFirst-20150807102956.mdf;Initial Catalog=aspnet-20150807-1029-CodeFirst-20150807102956;Integrated Security=True"
      providerName="System.Data.SqlClient" />
  </connectionStrings>
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
      <parameters>
        <parameter value="mssqllocaldb" />
      </parameters>
    </defaultConnectionFactory>
    <providers>
      <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
    </providers>
  </entityFramework>
</configuration>

資料庫連結變更為連結SQL Server設定的Web.config如下：

<configuration>
  <connectionStrings>
    <add name="DefaultConnection" providerName="System.Data.SqlClient" connectionString="Data Source=JETER\JETERMSSQLSERVER;Database=BlogDB;Integrated Security=True;"  />
  </connectionStrings>
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlconnectionFactory, EntityFramework">
      <parameters>
        <parameter value="Data Source=JETER\JETERMSSQLSERVER; Integrated Security=True;MultipleActiveResultSets=True" />
      </parameters>
    </defaultConnectionFactory>
    <providers>
      <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
    </providers>
  </entityFramework>
</configuration>

1.建立Console Application

2.在Program.cs 加入System.Data.Entity的References
(1)
開啟Package Manager Console(程式庫封裝管理員)安裝Entity Framework。
Package Manager Console開啟路徑位置：

安裝Entity Framework
PM> Install-Package EntityFramework

4.建立模型(Model)



兩個導覽屬性 (Blog.Posts 和 Post.Blog) 虛擬化。這會啟用 Entity Framework 的「消極式載入」功能。「消極式載入」表示當您嘗試存取屬性的內容時，這些內容會自動從資料庫載入。

5.建立內容(DbContext )

public class BloggingContext : DbContext 
{ 
    public DbSet<Blog> Blogs { get; set; } 
    public DbSet<Post> Posts { get; set; } 
}

6.讀取及寫入資料

class Program 
{ 
    static void Main(string[] args) 
    { 
        using (var db = new BloggingContext()) 
        { 
            // Create and save a new Blog 
            Console.Write("Enter a name for a new Blog: "); 
            var name = Console.ReadLine(); 
 
            var blog = new Blog { Name = name }; 
            db.Blogs.Add(blog); 
            db.SaveChanges(); 
 
            // Display all Blogs from the database 
            var query = from b in db.Blogs 
                        orderby b.Name 
                        select b; 
 
            Console.WriteLine("All blogs in the database:"); 
            foreach (var item in query) 
            { 
                Console.WriteLine(item.Name); 
            } 
 
            Console.WriteLine("Press any key to exit..."); 
            Console.ReadKey(); 
        } 
    } 
}

7.測試應用程式

資料參考 :https://msdn.microsoft.com/zh-tw/data/jj193542

1.Create WebApplication

2.勾選MVC,Web Forms and Web API，點選OK完成建立。

參考資料：http://www.flycan.com/article/css/javascript-jquery-slider-1334.html
依照參考資料的jQuery練習了兩種不同功能顯示方式。

方法一：依頁數隱藏左右滑動箭頭。
<head>
<script language="javascript">
      (function($) {
            $(function(){
                var gNum=0;//組數的初始值
                var dX=0;//水平座標位置
                var OuterBoxWidth=$(".slider").width();//外層寬度
                var TotalPage=Math.floor(($(".slider ul").width()-1)/OuterBoxWidth);//總組數
             
                $(".status li").eq(gNum).addClass("now");  
             
                $(".prev").hide();
             
                if(TotalPage==0){
                    $(".next").hide();
                }
             
                $(".next").click(function(){
               if(gNum<TotalPage){
               gNum++;
               dX = gNum*OuterBoxWidth*-1;

               $(".prev").show();
                             
               if(gNum==TotalPage){
                            $(".next").hide();
               }
               else
               {
                   $(".next").show();
               }  
               }
             
               SS();
                });
           
                $(".prev").click(function(){
                     if(gNum>0){
               gNum--;
               dX = gNum*OuterBoxWidth*-1;
             
               $(".next").show();

               if(gNum==0){
                         $(".prev").hide();
                        }
               }
               else
               {
                   $(".next").show();
               }
               SS();
                });
           
                function SS(){
               $(".slider ul").stop().animate({left:dX}, 700);
               $(".status li").removeClass().eq(gNum).addClass("now");
                }
           
                $(".status li").click(function(){
               gNum=$(this).index();
               dX = gNum*OuterBoxWidth*-1;
               SS();
                });
            });
        })(jQuery);  
</script>
</head>

方法二：首頁點選左箭頭滑動至頁尾，頁尾點選右箭頭滑動至首頁。
<head>
<script language="javascript">
      (function($) {
            $(function(){
                var gNum=0;//組數的初始值
                var dX=0;//水平座標位置
                var OuterBoxWidth=$(".slider").width();//外層寬度
                var TotalPage=Math.floor(($(".slider ul").width()-1)/OuterBoxWidth);//總組數
             
                $(".status li").eq(gNum).addClass("now");  
                             
                $(".next").click(function(){
               if(gNum<TotalPage){
               gNum++;
               dX = gNum*OuterBoxWidth*-1;
               }else{
                gNum=0;
                dX = 0;
                }
             
               SS();
                });
           
                $(".prev").click(function(){
                     if(gNum>0){
               gNum--;
               dX = gNum*OuterBoxWidth*-1;
             
               $(".next").show();
               }
               else
               {                  
                    if (TotalPage>= 1)
                    {
                        dX = TotalPage*OuterBoxWidth*-1;
                        gNum = TotalPage
                    }
               }
               SS();
                });
           
                function SS(){
               $(".slider ul").stop().animate({left:dX}, 700);
               $(".status li").removeClass().eq(gNum).addClass("now");
                }
           
                $(".status li").click(function(){
               gNum=$(this).index();
               dX = gNum*OuterBoxWidth*-1;
               SS();
                });
            });
        })(jQuery);  
</script>
</head>

CSS部份：
    <style type="text/css">
            .list{ list-style:none; margin:0; padding:0;}
            .sliderBox{ background-color :#ede9e8; width:960px;  overflow:hidden; position:relative;padding-bottom:7px; }
            .slider{ width:888px; height:50px; overflow:hidden; margin:auto; position:relative;}
            .slider ul{ overflow:hidden;  position:absolute; left:0;list-style-type:none;}
            .slider li{ float:left;text-align:center;list-style-type:none;}
            .status{ text-align:center; margin-top:0px; position:relative\9; *margin-left:435px;}
            .status li{ cursor:pointer; background:#FFF; display:inline-block; text-indent:-9999px; border:2px solid #CCC; width:8px; height:8px; border-radius:100%; margin:0 5px; *float:left; }
            .status li.now{ background:#09C; border-color:#999;}
            .dIcon{ text-indent:-9999px; position:absolute; top:15px; display:block; width:10px; height:10px; background:url(../slider.png) no-repeat; width:22px; height:30px;}
            .next{ right:5px; background-position:-22px -2px;}
            .prev{ left:5px; background-position:0 -2px;}
            .next:hover{ background-position:-22px -32px;}
            .prev:hover{ background-position:0 -32px;}
    </style>

HTML的部份：

                <div class="sliderBox">
                  <div class="slider">
                    <ul id="ulSlider" class="list" runat="server">
                                <li>
                                    <table border="0" bgcolor="#ede9e8" width="296">
                                        <tr>
                                            <td width="50" rowspan="2" align="left" style= "word-break:break-all;">
                                                    <asp:Image ID="img" runat="server" ImageUrl=''/>
                                            </td>
                                            <td width="246" align="left" valign="bottom">
                                                <div style="width: 236px;text-overflow:ellipsis; white-space:nowrap;overflow:hidden">
                                                    <asp:LinkButton ID="btname" style="text-decoration:none"                ForeColor="Black" runat="server" Text='name'></asp:LinkButton>
                                                </div>
                                            </td>      
                                        </tr>
                                        <tr>
                                            <td width="246" align="left" valign="top" style= "word-break:break-all;">
                                                <asp:LinkButton ID="btDesc" style="text-decoration:none;" ForeColor="Black" runat="server" Text='Desc'></asp:LinkButton>
                                            </td>
                                        </tr>
                                    </table>                                          
                    </ul>
                  </div>
                  <a href="javascript:;" class="dIcon next">Next</a>
                  <a href="javascript:;" class="dIcon prev">Prev</a>
                </div>

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