2011年6月28日 星期二

ASP.NET自訂控制項 - 固定欄位標題列 ScrollGridView

重要更新:
我們提供了一個更完整的方案,請到以下網址參考: http://gridviewscroll.aspcity.idv.tw/


ASP.NET中GridView是一個非常好用的控制項,但一直以來並無法像Windows Form的控制項一樣可以固定欄位的標題列.其實透過Javascript也是有辦法做到相同的功能,以下是一個展示:


1. 自訂一個ScrollGridView的控制項,使用下列的標記
<Likol:ScrollGridView ID="ScrollGridView1" runat="server" Width="100%">
 <Columns>
  <Likol:TextField HeaderText="ProductID" DataField="ProductID" />
  <Likol:TextField HeaderText="Name" DataField="Name" />
  <Likol:TextField HeaderText="ProductNumber" DataField="ProductNumber" />
  <Likol:TextField HeaderText="Color" DataField="Color" />
  <Likol:TextField HeaderText="Size" DataField="Size" />
  <Likol:TextField HeaderText="ListPrice" DataField="ListPrice" />
  <Likol:TextField HeaderText="Weight" DataField="Weight" />
  <Likol:DateTimeField HeaderText="SellStartDate" DataField="SellStartDate" />
  <Likol:DateTimeField HeaderText="SellEndDate" DataField="SellEndDate" />
  <asp:TemplateField>
   <HeaderTemplate><div> </div></HeaderTemplate>
   <ItemTemplate><div> </div></ItemTemplate>
  </asp:TemplateField>
 </Columns>
 <HeaderStyle CssClass="ScrollGridViewHeader" />
 <RowStyle CssClass="ScrollGridViewItem" />
</Likol:ScrollGridView>


2. 連結資料來源


3. 顯示結果

當顯示範圍超過目前視窗大小會自動顯示出水平與垂直的卷軸


當拉動垂直的卷軸時,GridView的標題列一樣會固定於最上方


當拉動水平的卷軸時,GridView的標題列會跟著內容一起移動


4. 這個控制項的行為一樣可以相容於Google Chrome與Mozilla Firefox




基本上這個控制項是繼承ASP.NET原本的GridView來進行開發,並加入Ajax一些應用來達到這樣的功能.

Updated: Demo - ASP.NET自訂控制項 - 固定欄位標題列 ScrollGridView

2011年6月22日 星期三

Visual Studio 2010與SharePoint 2010 - Send Code To SharePoint

在前幾篇中介紹了Visual Studio的選單功能延伸SharePoint 2010自訂欄位,以下將會展示如何把這兩個功能整合起來:


1. 開啟一個新的專案,並編輯任一的程式碼檔案,選擇要傳到SharePoint的程式碼


2. 點選滑鼠右鍵,並選擇"SharePoint->Send Code To SharePoint"



3. 上傳視窗中的參數分別代表 SharePoint中的SiteUrl,WebID,ListID與傳送到SharePoint上的標題與內容



4. 傳送完成



5. 開啟上傳的SharePoint網頁,就可以看到經由Visual Studio所建立的項目



6. 選擇項目標題瀏覽,可以看到在檢視模式中的程式碼


P.S. 在這裡與SharePoint整合的方式是透過"SharePoint 2010 Managed Client Object Model"來存取相關的資訊

2011年6月21日 星期二

SharePoint 2010 自訂欄位 - Custom Field with SyntaxHighlighter

SharePoint 2010的Custom Field對於擴充性是非常有幫助的,可以藉由自訂欄位提供一些比較實用的功能.

以下的部份是自訂是一個欄位,並結合SyntaxHighlighter來顯示程式碼的範例


1. 於網站中新增一個自訂清單(Custom List).


2. 新增完成後,進到清單設定畫面建立一個新的欄位,選擇SourceCodeField與設定欄位要顯示的Source Code是C#或XML



3. 設定完成後新增一筆資料到清單中,可以在清單顯示頁面上看到附圖




4. 選擇View Code的按鈕,會開啟一個新視窗,並顯示內容




5. 選擇項目名稱進到檢視畫面

2011年6月16日 星期四

自訂Visual Studio專案建置項目 - Target

在Visual Stduio中專案進行建置時會透過MSBuild進行編譯,它的定義檔會是以XML方式呈現,試著打開由Visual Studio所建立的專案檔(*.csproj)可以看到類似以下的內容:
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
  <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
  <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
  <ProductVersion>8.0.30703</ProductVersion>
  <SchemaVersion>2.0</SchemaVersion>
  <ProjectGuid>{B6B8C599-6FA9-4E30-8985-5D50B048FB6B}</ProjectGuid>
  <OutputType>Library</OutputType>
  <AppDesignerFolder>Properties</AppDesignerFolder>
  <RootNamespace>MyBuild</RootNamespace>
  <AssemblyName>MyBuild</AssemblyName>
  <TargetFrameworkVersion>v4.0</TargetFrameworkVersion>
  <FileAlignment>512</FileAlignment>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
  <DebugSymbols>true</DebugSymbols>
  <DebugType>full</DebugType>
  <Optimize>false</Optimize>
  <OutputPath>bin\Debug\</OutputPath>
  <DefineConstants>DEBUG;TRACE</DefineConstants>
  <ErrorReport>prompt</ErrorReport>
  <WarningLevel>4</WarningLevel>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
  <DebugType>pdbonly</DebugType>
  <Optimize>true</Optimize>
  <OutputPath>bin\Release\</OutputPath>
  <DefineConstants>TRACE</DefineConstants>
  <ErrorReport>prompt</ErrorReport>
  <WarningLevel>4</WarningLevel>
</PropertyGroup>
<ItemGroup>
  <Reference Include="System" />
  <Reference Include="System.Core" />
  <Reference Include="System.Xml.Linq" />
  <Reference Include="System.Data.DataSetExtensions" />
  <Reference Include="Microsoft.CSharp" />
  <Reference Include="System.Data" />
  <Reference Include="System.Xml" />
</ItemGroup>
<ItemGroup>
  <Compile Include="Class1.cs" />
  <Compile Include="Properties\AssemblyInfo.cs" />
</ItemGroup>
<Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
<!-- To modify your build process, add your task inside one of the targets below and uncomment it.
     Other similar extension points exist, see Microsoft.Common.targets.
<Target Name="BeforeBuild">
</Target>
<Target Name="AfterBuild">
</Target>
-->
</Project>

在最後可以看到Visual Studio本身就提供了兩個Target(BeforeBuild,AfterBuild)給使用者進行自定,但是如果不用這兩個該如何處理?

1. 複寫BuildDependsOn屬性(位於C:\Windows\Microsoft.NET\Framework\'vVersion'\Microsoft.Common.targets)
<PropertyGroup>
<BuildDependsOn>
  MyCustomTarget1;
  $(BuildDependsOn);
  MyCustomTarget2
</BuildDependsOn>


2. 新增上述加入的新Target
<Target Name="MyCustomTarget1">
<Message Importance="High" Text="Running MyCustomTarget1..."/>
</Target>
<Target Name="MyCustomTarget2">
<Message Importance="High" Text="Running MyCustomTarget2..."/>
</Target>
</PropertyGroup>


完成後,就可以在Visual Stduio進行編譯,並可以在Output的視窗看到以下結果:

如何延伸Visual Studio 2010功能 - Menu

Visual Studio 2010是一個非常好的程式開發工具,不過它也具備了很不錯的延展性,你可以透過一些Add-In的方式,或Integration Package來將自己需要用的功能加到Visual Studio中.


先介紹一下如何在Menu上加上自己的項目.


1. 開啟Visual Studio選擇新增一個專案,並選擇Extensibility->Visual Studio Package,命名為"MyVSPackage"



2. 接下來會出先專案的精靈畫面,基本上都先以預設值方式進行,除了選擇VSPackage Options,你必須勾選Menu Command.


3.專案建立完成後,可以直接使用F5建置,並看到在Tools選單中多了一個My Command name的選項.


當然如果想要直接到主選單上也是可以做到,你可以參考以下的步驟:


1. 開啟專案中的MyVSPackage.vsct檔案.

2. 找到<GuidSymbol name="guidMyVSPackageCmdSet"...>區段,加上以下的XML元素:
<IDSymbol name="MyMenu" value="0x3000"/>
<IDSymbol name="MyMenuGroup2" value="0x3001"/>
<IDSymbol name="MyMenuCommand" value="0x3002" />



3. 找到<Groups>區段,加上以下的XML元素:
<Group id="MyMenuGroup2" guid="guidMyVSPackageCmdSet" priority="0x0000">
  <Parent id="MyMenu" guid="guidMyVSPackageCmdSet"/>
</Group>



4. 在<Commands package="guidMyVSPackagePkg">區段中,多加一個<Menus>的新區段,並加入以下內容:
<Menu id="MyMenu" guid="guidMyVSPackageCmdSet"
  priority="0x0200" type="Menu">
  <Parent guid="guidSHLMainMenu" id="IDG_VS_MM_TOOLSADDINS" />
  <Strings>
    <ButtonText>MyMenu</ButtonText>
    <CommandName>My Menu</CommandName>
  </Strings>
</Menu>



5. 重新使用F5編譯專案,就可以在主選單上看到定義的Menu.