webpart開發(fā)基礎(chǔ)可視化開發(fā)圖文教程

1、添加新項(xiàng)目,選擇SharePoint 2013空項(xiàng)目 ,如下圖:
當(dāng)然,你也可以直接選擇可視化web部件,這樣會(huì)在項(xiàng)目里自動(dòng)創(chuàng)建一個(gè)可視化WebPart(如下圖),不過我不喜歡它默認(rèn)的命名方式,還要重命名或刪除重建,所以我就創(chuàng)建空項(xiàng)目,而后自己添加。
2、選擇部署為場解決方案,如下圖:
3、添加新項(xiàng),選擇可視化WebPart,如下圖:
如上圖,我們可以看到有兩個(gè)可視化WebPart,第一個(gè)可以使用沙盒部署方式,第二個(gè)僅能使用場解決方案。
4、修改Feature文件,如下圖:
5、修改CustomVisualWebPart.webpart文件,如下圖:
6、為可視化WebPart添加控件,如下圖:
如上圖,一般選擇拆分視圖,直接在工具箱拖動(dòng)控件即可;
7、為可視化WebPart編寫代碼,如下圖:
因?yàn)闇y試,所以沒寫太復(fù)雜的代碼,當(dāng)然,可視化WebPart可以添加復(fù)制的邏輯,但是更善于的是展示,方便我們對前臺進(jìn)行控制,仿佛寫.net頁面一樣;
8、添加WebPart,如下圖:
9、可視化WebPart效果,如下圖:
當(dāng)然,服務(wù)器控件交互的友好性,并不在本文討論范圍,只是舉個(gè)簡單的例子。
10、同樣,我們可以參考上一篇WebPart的方式,擴(kuò)展右側(cè)屬性面板,如下圖:
擴(kuò)展的方式,和普通WebPart是一樣的,如下圖:
特別的,可視化WebPart同樣可以使用和WebPart相同的配置文件,將配置文件寫在相關(guān)應(yīng)用程序下的web.config,然后使用.net方式調(diào)用即可。
強(qiáng)烈建議把普通WebPart和可視化WebPart對比學(xué)習(xí),測試開發(fā),因?yàn)閮烧咧g是息息相關(guān)的,只是前者更注重邏輯,后者更方便展示罷了。
相關(guān)文章
WebStorm如何調(diào)試Vue項(xiàng)目? webstorm配置vue開發(fā)環(huán)境指南
WebStorm 支持多種調(diào)試工具,包括瀏覽器的開發(fā)者工具,但本文主要講解的是使用 WebStorm 自帶的調(diào)試功能2025-04-15VSCode和webstorm怎么設(shè)置綠色護(hù)眼背景? 綠豆沙背景色的設(shè)置方法
護(hù)眼色一定程度能保護(hù)眼睛,緩解疲勞,VSCode和webstorm這兩款常用的軟件怎么設(shè)置護(hù)眼色呢?詳細(xì)請看下文介紹2025-04-15WebStorm常用插件以及實(shí)用設(shè)置分享
WebStorm本身已經(jīng)足夠強(qiáng)大,但一些優(yōu)秀的插件能錦上添花,顯著提升開發(fā)效率,詳細(xì)請看下文介紹2025-04-15如何安裝配置WebStorm? WebStorm安裝與使用全方位指南
WebStorm軟件在前端和后端開發(fā)領(lǐng)域都備受青睞,很多朋友不知道該怎么下載安裝,下面我們就來看看詳細(xì)的安裝配置教程2025-04-15Webstorm怎么配置? Webstorm入門之軟件配置教程
WebStorm是一款功能強(qiáng)大的集成開發(fā)環(huán)境(IDE),支持各種前端開發(fā)技術(shù),今天我們就來看看Webstorm的配置教程2025-04-15Webstorm怎么設(shè)置字體大小/背景顏色/背景圖片?
WebStorm 允許您自定義界面顏色,以創(chuàng)建更個(gè)性化和美觀的工作空間,今天我們就來看看Webstorm改變字體大小、背景顏色、設(shè)置背景圖片的方法2025-04-15- VScode上安裝PlatformIO插件能成功安裝,嘗試卸載VScode并刪除插件,這些錯(cuò)誤仍然存在,下面我們就來看看這個(gè)問題的解決辦法2025-04-03
提升代碼搜索效率! VSCode里DeepSeek插件安裝與配置指南
今天我們將向大家介紹如何在Visual Studio Code中安裝并配置 DeepSeek 插件,幫助你更高效地進(jìn)行代碼搜索2025-04-07提升你的編程效率! VSCode的初級使用教程超詳細(xì)版
VSCode是一款免費(fèi)且開源的代碼編輯器,因其強(qiáng)大的功能和良好的用戶體驗(yàn)而廣受歡迎,本文將詳細(xì)介紹 VSCode 的基本使用方法,并通過插圖幫助你更好地理解2025-04-03- 今天我們來聊聊如何安裝和配置VS Code,讓它成為你編程路上的得力助手,這個(gè)過程其實(shí)很簡單,只要跟著我的步驟走,你絕對能搞定2025-04-03