【Web API】 建立一個讀取 Web API 的頁面

1. 練習寫一頁 Web ，從 Web API 讀取 Json 格式的資料，並顯示在當前的頁面上

2. 在 View 資料夾中，建立一個 View，取名「ReadWebAPI.cshtml」

3. 因為我的 View 是建在 Views\Home\ReadWebAPI.cshtml 下，所以 Controller\HomeController.cs 也要建一個對應的 method，View才能正常顯示

4.先試跑一下網頁，確定網頁可以正常執行

5.  因為是用 MVC4 ，預設就有 jQuery 可以使用了

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

@section Scripts { <script type="text/javascript"> $(document).ready(function () { $.getJSON("/api/Products", function (result) { var strHtml = ""; strHtml += "<table>"; for (var i = 0; i < result.length; i++) { strHtml += "<tr>"; strHtml += "<td>"; strHtml += result[i].Id; strHtml += "</td>"; strHtml += "<td>"; strHtml += result[i].Name; strHtml += "</td>"; strHtml += "<td>"; strHtml += result[i].Category; strHtml += "</td>"; strHtml += "<td>"; strHtml += result[i].Price; strHtml += "</td>"; strHtml += "</tr>"; } strHtml += "</table>"; $("#Content").html(strHtml); }) .error(function (res, textStatus, errorThrown) { alert("error ==> " + res.responseText); }); }); </script> } <p/> <div id="Content"></div>

6. 結果顯示如下

自訂 SharePoint Web Part 功能表

1. WebPart 的下拉功能表也能自訂功能

2. 撰寫以下程式碼

public override WebPartVerbCollection Verbs
{
get
{
WebPartVerb v1 = new WebPartVerb("verb1",
new WebPartEventHandler(Verb1Event));
v1.Text = "自訂功能";
v1.Description = "do something";

return new WebPartVerbCollection(new WebPartVerb[] { v1 });
}
}


void Verb1Event(object sender, WebPartEventArgs e)
{
EnsureChildControls();
txt.Text = "Click 自訂功能!!";
}

客製化 SharePoint Web Part 屬性

1. WebPart 的 Edit Zone 有許多預設的屬性，我們也可以自訂自己想要的屬性

2. 撰寫以下的程式碼，在 Web Part 的屬性上加上 Personalizable 和 WebBrowsable 兩個屬性

[Personalizable(PersonalizationScope.Shared)]

[WebBrowsable(true)]

[Category("自訂屬性")]

[WebDisplayName("顯示文字")]

[Description("")]

public string DisplayText { get; set; }

開發 SharePoint WebPart 連線

1. 建立一個空的 SharePoint 專案

2. 選擇陣列式方案

3. 新增一個 WebPart

4. 在畫面上放上一個TextBox跟一個Button，撰寫以下的程式碼

[ToolboxItemAttribute(false)]
    public class WebPart1 : WebPart
    {
        TextBox txt;
        Button btn;
        protected override void CreateChildControls()
        {
            txt = new TextBox();
            btn = new Button();

            btn.Text = "Click";

            this.Controls.Add(txt);
            this.Controls.Add(btn);
        }
    }

5. 建立另一個 WebPart2 ，來接收 WebPart1 的資料

6. 在 WebPart2 放入一個 Label ，準備接收 WebPart1 的 TextBox傳過來的值

Label lbl;
        protected override void CreateChildControls()
        {
            lbl = new Label();

            this.Controls.Add(lbl);
        }


7. 接下來要讓兩個 WebPart 可以做 Connection，主要是要建立一個 Interface ，兩者透過這個 Inteface 來傳送資料

8. 首先新增一個介面

9. 在 Interface 中撰寫以下程式碼

public interface IData
{
    string Data { get; }
}

10. 定義提供者( WebPart1 )，將提供者實作 IData 這個 Interface，並且要實作 IData 的屬性

將 WebPart 的程式碼修改如下

[ToolboxItemAttribute(false)]

    public class WebPart1 : WebPart,IData

    {

        TextBox txt;

        Button btn;

        protected override void CreateChildControls()

        {

            txt = new TextBox();

            btn = new Button();

            btn.Text = "Click";

            this.Controls.Add(txt);

            this.Controls.Add(btn);

        }

        public string Data

        {

            get

            {

                EnsureChildControls();

                return txt.Text;

            }

        }

    }

11. 提供者( WebPart1 )要加入 ProviderInterface的方法回傳介面，並且加上 ConnectionProvider的屬性

在 WebPart1 加上以下程式碼

[ConnectionProvider("文字資料")]

public IData ProvideInterface()

{

return this;

}

12. 最後再消費者( WebPart2 )加上屬性來接收資料

[ConnectionConsumer("文字資料")]

public void GetInterface(IData myInterface)

{

EnsureChildControls();

lbl.Text = myInterface.Data;

}

13. 將專案佈署到網頁上

14. 設定 WebPart 之間的連線

15. 結果