Ideamarket

在Part1文章已成功的在DNN4.x使用jQuery，已可以使用jQuery的語法，再來我們要用WebServices的方式實踐ClientAPI。

首先我們得先確認web.config內是否設定下列項目(DNN4.x因為有使用MS的ClientAPI，皆已設定下列數值)

<httpHandlers>
   <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=********************" />
   <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=********************"  />
   <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=********************"  validate="false" />
</httpHandlers>

以上確認完畢後，撰寫WebServices部分，需使用 System.Web.Script.Services，並宣告class為ScriptService(可讓javascript呼叫此函式)，webservice程式碼如下:

// WebServices/CrabWS.asmx
...
using System.Web.Script.Services;
...
namespace Crab.WS
{
   [WebService(Namespace = "Crab.WS")]
   [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
   [ScriptService]
   public class UserService
   {
      [WebMethod]
      public string getName()
      {
         return "Crab Lin";
      }
      [WebMethod]
      public bool NameEquals(string nameA, string nameB)
      {
          return nameA.Equals(nameB);
      }
   }
}

在PageLoad的部分透過DotNetNuke.Framework.AJAX的函式，新增Webservices ClientAPI(也可在Part1時已建立的 SiteModuleBase.cs裡新增AjaxRegisterServices的函式，方便其他模組使用時重覆宣告)

//OnPageLoad
protected void Page_Load(System.Object sender, System.EventArgs e)
{
   ...
   if (DotNetNuke.Framework.AJAX.IsInstalled())
   {
      DotNetNuke.Framework.AJAX.RegisterScriptManager();
   }
   // Create a reference to the Script Manager
   ScriptManager objScriptManager = ScriptManager.GetCurrent(this.Page);
   objScriptManager.EnablePageMethods = true;
   ServiceReference objServiceReference = new ServiceReference();
   objServiceReference.Path = @"WebService/CrabWS.asmx";
   objServiceReference.InlineScript = true;
   objScriptManager.Services.Add(objServiceReference);
}

在模組載入時，會同時register webservices funcation，即可在javascript用namespace的方式取用webservices function，如下列方式使用:

<script language="javascript">
   jQuery(document).ready(function(){
      //無參數
      Crab.WS.UserService.getName(function(userName){
         alert(userName);
      });
      //兩個參數
      Crab.WS.UserService.NameEquals("Crab", "Max", funcation(IsEqual){
         alert(IsEqual);
      });
   });
});
</script>

重點: 呼叫WS function最後一個參數值為AjaxSuccessFunction，將回傳結果交給一個javascript function接值處理。

同系列文章:
Part.1 成功使用jQuery
Part.3 完成AJAX功能

DotNetNuke 5.x 版本已可以在Host Setting使用jQuery，但是4.x的website還是無法使用jQuery。

因為習慣使用jQuery方便的javascript取用元件方式，及強大的opensource 社群的支援，並且website某些模組尚未測試5.x的版本，無法使用5.x的版本，暫時須用4.x的版本重新設計新的模組使用jQuery時，就必須改寫部分程式碼實踐。

基於並非整個website使用jQuery，但又需在DNN模組啟用時選擇性載入jQuery.js，所以必須新建一個class(筆者此處新建class名稱為SiteModuleBase)參照PortalModuleBase，新建立的模組原本參照PortalModuleBase改為參照SiteModuleBase，則如以下程式:

using DotNetNuke.Entities.Modules;
// use jQuery ModuleBase
public class SiteModuleBase : PortalModuleBase
{
   public SiteModuleBase()
   {}
   override void OnLoad(EventArgs e)
   {
      this.registerjQuery();
   }
   private void registerjQuery(){...}
}

首先須了解 DNN 有自己核心的ClientAPI(如 dnn.js, dnncore.js…之類)，所以要用jquery.js又不想要更改DNN核心javascript，須使用jQuery內建的function「noConflict()」啟用jQuery，registerjQuery Function 如下:

public registerjQuery()
{
   string jQueryPath = "js/jQuery.js";
   if (!Page.ClientScript.IsClientScriptIncludeRegistered("jQuery"))
   {
      Page.ClientScript.RegisterClientScriptInclude(
         "jQuery",
         jQueryPath);
      Page.ClientScript.RegisterClientScriptBlock(
         this.GetType(),
         "jQuerynoConflict",
         "<script type=\"text/javascript\" language=\"javascript\">jQuery.noConflict();</script>");
   }
}

建立class後，將新建的DNN模組參照此class(如下列程式)，在啟動時即可使用jQuery的函式及jQuery Plugins。

//原先Module參照設定
partial class ViewDNNModule : PortalModuleBase, IActionable
{...}

//修改為以下參照設定
partial class ViewDNNModule : SiteModuleBase, IActionable
{...}

ps.1:因為DNN底層也有使用微軟的ClientAPI，須避免使用「$(…)」取用參數，需使用「jQuery(…)」。
ps.2:若要加入其他的jQuery Plugins建置至模組內，為了避免重覆加入*.js，建議在SiteModuleBase裡撰寫register Javascript(如下列)。

public class SiteModuleBase : PortalModuleBase
{
   …
   registerjQuery(){…}
   registerjQueryUI(){…}
   registerjQueryGrid(){…}
   registerjQueryTextArea(){…}
}

同系列文章:
Part.2 使用WebServices實踐ClientAPI
Part.3 完成AJAX功能