Friday, March 2, 2012

Lesson 03: ASP.NET user control and resource in webPart

6:24 PM    No comments


Exercise: hiểu cơ bản về resource của SharePoint WebPart

·        Exercise 1: Cách trình bày custom image trong webpart
o       Tạo 1 folder tên ResourceAndUserControls
o       Copy hình vào folder ResourceAndUserControls
o       Tiếp tục với ResourceAndUserControls project
o       Thêm mới Class tên là CustomImage
§        Khai báo using SharePoint namespace
§        Khai báo kế thừa từ class webpart
o       Mở Class CustomImage,khai báo code trong phương thức CreateChildControls
§        Tạo mới 1 Image Control tên customImage
§        Gán đường dẫn tới Image cho thuộc tính ImageUrl
§        Thêm customImage đến webpart
namespace ResourceAndUserCT
{
    public class CustomImage:WebPart
    {
        protected override void CreateChildControls()
        {
            Image customImage = new Image();
            customImage.ImageUrl = @"/wpresources/ResourceAndUserControls/logo.gif";
            this.Controls.Add(customImage);
            //base.CreateChildControls();
        }
    }
}
o       Thêm CustomImage.dwp
<?xml version="1.0" encoding="utf-8"?>
<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2" >
      <Title>CustomImage</Title>
      <Description>CustomImage</Description>
     <Assembly>ResourceAndUserCT, Version=1.0.0.0, Culture=neutral, PublicKeyToken=ec47e7d9465cc36e</Assembly>
      <TypeName>ResourceAndUserCT.CustomImage</TypeName>
      <!-- Specify initial values for any additional base class or custom properties here. -->
            </WebPart>
o       Build project ở chế độ Release sau đó Deploy webpart này
§        Copy ResourceAndUserControls.dll đến thư mục bin
§        Copy CustomImage.dwp đến thư mục wpcatalog
§        Thêm thẻ <SafeControl>
§        SafeControl Assembly="ResourceAndUserCT, Version=1.0.0.0, Culture=neutral, PublicKeyToken=ec47e7d9465cc36e"Namespace="ResourceAndUserCT" TypeName="*" Safe="True" />
o       Quay lại sharepoint site
§        Thêm webpart này đến webpart page
§        Thấy hình ảnh hiển thị lên site của sharepoint

·        Exercise 2: Cách thêm internal java script vào trong webpart
o       Tiếp tục với ResourceAndUserControls project
o       Thêm mới Class tên là BasicOfJavaScript
§        Khai báo using SharePoint namespace
§        Khai báo kế thừa từ class webpart
o       Mở Class BasicOfJavaScript,khai báo code trong phương thức CreateChildControls
§        Khai báo chuỗi javascript tên là ShowMessage để hiện thị lên màn hình
§        Đăng ký chuỗi  javascript đến webpart page bằng cách sử dụng RegisterClientScriptBlock
§        Tạo mới 1 Button Control tên btnInternalJavaScript
§        Gán chuỗi “Internal Java Script” cho thuộc tính text của btnInternalJavaScript
§        Gán hàm ShowMessage cho nút btnInternalJavaScript  bằng thuộc tính Attribute
§        Thêm btnInternalJavaScript đến webpart
·         namespace ResourceAndUserCT
·         {
·             public class BasicOfJavaScript:WebPart
·             {
·                 protected override void CreateChildControls()
·                 {
·                     string javaScript = "function ShowMessage(msg){alert(msg);}";
·                     Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ABC", javaScript, true);
·                     Button button = new Button();
·                     button.Text = "Internal JavaScript";
·                     button.OnClientClick = "ShowMessage('Hello Internal JavaScript')";
·                     this.Controls.Add(button);
·                     //base.CreateChildControls();
·                 }
·             }
·        }
o       Thêm BasicOfJavaScript.dwp
<?xml version="1.0" encoding="utf-8"?>
<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2" >
      <Title>BasicOfJavaScript</Title>
      <Description>BasicOfJavaScript</Description>
     <Assembly>ResourceAndUserCT, Version=1.0.0.0, Culture=neutral, PublicKeyToken=ec47e7d9465cc36e</Assembly>
      <TypeName>ResourceAndUserCT.BasicOfJavaScript</TypeName>
      <!-- Specify initial values for any additional base class or custom properties here. -->
</WebPart>
o       Build project ở chế độ Release sau đó Deploy webpart này
§        Copy ResourceAndUserControls.dll đến thư mục bin
§        Copy BasicOfJavaScript.dwp đến thư mục wpcatalog
o       Quay lại sharepoint site
§        Thêm webpart này đến webpart page
§        Thấy chuỗi  “Internal Java Script”  hiển thị lên site của sharepoint
§        Nhấp vào button thấy hộp thoại xuất hiện với chuỗi “Internal Java Script” 
·        Exercise 3: Cách gọi file javascript vào trong webpart
o       Tiếp tục với ResourceAndUserControls project
o       Thêm mới Class tên là MoreOfJavaScript
§        Khai báo using SharePoint namespace
§        Khai báo kế thừa từ class webpart
o       Thêm mới 1 file javascript
§        Khai báo chuỗi javascript tên là ShowMessage để hiện thị lên màn hình
§        Chép file JavaScript vừa tạo vào folder wpresource\ResourceAndUserControls
§       

o       Mở Class MoreOfJavaScript,khai báo code trong phương thức CreateChildControls
§        Khai báo chuỗi javascript tên là javaScriptFile
§        Đăng ký chuỗi  javascript đến webpart page bằng cách sử dụng ResgisterClientScriptInclude
§        Tạo mới 1 Button Control tên btnExternalJavaScript
§        Gán chuỗi “External Java Script” cho thuộc tính text của btnExternalJavaScript
§        Gán hàm ShowMessage cho nút btnInternalJavaScript  bằng thuộc tính Attribute
§        Thêm btnInternalJavaScript đến webpart
·         namespace ResourceAndUserCT
·         {
·             public class MoreOfJavaScript:WebPart
·             {
·                 protected override void CreateChildControls()
·                 {
·                     string javaScriptFile = "wpresources/ResourceAndUserControls/ExternalJavaScript.js";
·                     Page.ClientScript.RegisterClientScriptInclude("XYZ", javaScriptFile);
·                     Button btnExternalJavaScript = new Button();
·                     btnExternalJavaScript.Text = "External Java Script";
·                     btnExternalJavaScript.Attributes.Add("onclick", "ShowMessage();");
·                     this.Controls.Add(btnExternalJavaScript);
·        

·                     //base.CreateChildControls();
·                 }
·             }
}
o       Thêm MoreOfJavaScript.dwp
<?xml version="1.0" encoding="utf-8"?>
<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2" >
      <Title>MoreOfJavaScript</Title>
      <Description>MoreOfJavaScript</Description>
     <Assembly>ResourceAndUserCT, Version=1.0.0.0, Culture=neutral, PublicKeyToken=ec47e7d9465cc36e</Assembly>
      <TypeName>ResourceAndUserCT.MoreOfJavaScript</TypeName>
      <!-- Specify initial values for any additional base class or custom properties here. -->
   </WebPart>
o       Build project ở chế độ Release sau đó Deploy webpart này
§        Copy ResourceAndUserControls.dll đến thư mục bin
§        Copy MoreOfJavaScript.dwp đến thư mục wpcatalog
o       Quay lại sharepoint site
§        Thêm webpart này đến webpart page
§        Thấy chuỗi  “External Java Script”  hiển thị lên site của sharepoint
§        Nhấp vào button thấy hộp thoại xuất hiện với chuỗi “External Java Script” 
·        Exercise 4: Cách tạo user control trong ASP.NET
o       Tạo Project HKGUserControls
o       Tạo website tên là HKGUserControls đặt trong folder HKGUserControls
o       Thêm mới item chọn user control (.ascx) tên là HKGUserControl.ascx không chứa code behind
§        Thêm 1 TextBox tên TextBox1
§        Thêm DropDownList tên DropDownList1
§        Chép  HKGUserControl.ascx vào thư mục "/wpresources/ResourceAndUserControls/
o       Thêm mới item chọn user control (.ascx) tên là WebUserControlCodeBehind.ascx chứa code behind
§        Thêm 1 TextBox tên TextBox1
§        Thêm DropDownList tên DropDownList1
§        Page load khai báo
protected void Page_Load(object sender, EventArgs e)
        {
            TextBox1.Text = "Hello Code Behind";
            DropDownList1.Items.Add(new ListItem("Bac Giang", "BG"));
            DropDownList1.Items.Add(new ListItem("Bac Can", "BC"));
  }
o       Publish website HKGUserControls
§        Copy HKGUserControls.dll đến thư mục bin
§        Copy WebUserControlCodeBehind.ascx đến thư mục "/wpresources/ResourceAndUserControls/

·        Exercise 5: Cách hiển thị user control vào webpart
o       Tiếp tục với ResourceAndUserControls project
o       Thêm mới Class tên là ASPNETUserControl
§        Khai báo using SharePoint namespace
§        Khai báo kế thừa từ class webpart
o       Mở Class ASPNETUserControl,khai báo code trong phương thức CreateChildControls
§        Khai báo biến url mặc định chỉ tới đường dẫn chứa file ascx (string url ="/wpresources/ResourceAndUserControls/HKGUserControl.ascx"; )
§        Tạo mới 1 Panel control tên panelControl
·        Load HKGUserControl.ascx vào trong panelControl
·        Thêm panelControl vào trong webpart
  • private void LoadUserControlNoCodeBehind()
  •         {
  •             string url = "/wpresources/ResourceAndUserControls/HKGUserControl.ascx";
  •             Control control = Page.LoadControl(url);
  •             control.ID = "HKG";
  •             Panel pannelControl = new Panel();
  •             pannelControl.Controls.Add(control);
  •             this.Controls.Add(pannelControl);
}
o       Thêm ASPNETUserControl.dwp
o       Build project ở chế độ Release sau đó Deploy webpart này
§        Copy ResourceAndUserControls.dll đến thư mục bin
§        Copy ASPNETUserControl.dwp đến thư mục wpcatalog
o       Quay lại sharepoint site
§        Thêm webpart này đến webpart page
§        Thấy TextBox và DropDownList
·        Exercise 6: Cách hiển thị dữ liệu của webpart vào ASP.NET user control
o       Tiếp tục với ResourceAndUserControls project
o       Mở Class ASPNETUserControl,khai báo code trong phương thức CreateChildControls
§        Sau khi đã load HKGUserControl.ascx vào panelControl
·        Tìm TextBox1 = phương thức FindControl và gán chuỗi “HKG ”cho thuộc tính Text của TextBox1
·        Tìm DropDownList1 = phương thức FindControl và gán chuỗi “HKG ”,”HKG1”cho DropDownList
    • private void LoadUserControlNoCodeBehind()
    •         {
    •             string url = "/wpresources/ResourceAndUserControls/HKGUserControl.ascx";
    •             Control control = Page.LoadControl(url);
    •             control.ID = "HKG";
    •             Panel pannelControl = new Panel();
    •             pannelControl.Controls.Add(control);
    •             this.Controls.Add(pannelControl);
    •             Literal literal = (Literal)control.FindControl("Literal1");
    •             literal.Text = "HKG Informatics Solution";
    •             DropDownList dropDownList = (DropDownList)control.FindControl("DropDownList2");
    •             dropDownList.Items.Add(new ListItem("Dong Nai", "DN"));
    •             dropDownList.Items.Add(new ListItem("Dong Thap", "DT"));
    •             dropDownList.SelectedValue = "DT";
    •         }
o       Build project ở chế độ Release sau đó Deploy webpart này
§        Copy ResourceAndUserControls.dll đến thư mục bin
§        Copy ASPNETUserControl.dwp đến thư mục wpcatalog
o       Quay lại sharepoint site
§        Làm tươi webpart này đến webpart page
·        Exercise 7: Cách hiển thị dữ liệu của webpart vào ASP.NET user control với code behind
o       Thêm mới user control tên WebUserControlCodeBehind.ascx và load dữ liệu lên control trong user control bằng code behind
o       Tiếp tục với ResourceAndUserControls project
o       Mở Class ASPNETUserControl,khai báo code trong phương thức CreateChildControls
§        Tạo mới 1 Literal tên literalControl
§        Thêm literalControl đến webpart trước hoặc sau khi load ASP.NET user control
·        Lấy dữ liệu từ TextBox và DropDownList
·        Hiển thị dữ liệu lên literalControl
      • private void LoadUserControlWithCodeBehind()
      •         {
      •             string url1 = @"/wpresources/ResourceAndUserControls/WebUserControlCodeBehind.ascx";
      •             Control control1 = Page.LoadControl(url1);
      •             this.Controls.Add(control1);
      •         }
o       Build project ở chế độ Release sau đó Deploy webpart này
§        Copy ResourceAndUserControls.dll đến thư mục bin
§        Copy ASPNETUserControl.dwp đến thư mục wpcatalog
o       Quay lại sharepoint site
§        Làm tươi webpart này đến webpart page

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)