Load usercontrol i webpart asynkron

by Jess Lassen 11. December 2009 09:36

Siden sidste blog indlæg i oktober, har vi fået et indblik i hvordan næste version af Sharepoint (2010) kommer til at se ud. Blandt mange forbedringer, er specielt integrationen til Visual Studio blevet forbedret markant. Jeg har tidligere snakket om muligheden for at bruge usercontrols i webparts og det ser ud til, at Microsoft også syntes det er en glimrende ide, i det de har introduceret Visual Web Parts i Sharepoint 2010. Der er ikke noget hokus pokus i Visual Web Parts måde at loade usercontrols på, den loader såmænd bare usercontrollen i webpartens CreateChildControls() metode og skubber dermed ansvaret videre til usercontrollen.


Load usercontrols asynkront.

Herunder vil jeg vise en metode jeg har brugt til at hente usercontrols ind i webparts asynkront. Dette kan forbedre sidens loadtid og give slutbrugeren en bedre oplevelse af løsningen.

Webpartens opgave er stadig at loade usercontrol, men bare asynkront istedet. Dette gøres ved at implementere ICallBackEventHandler.
CreateChildContols() opgave er nu at registrere scripts og rendere en placeholder div til usercontrollen. Dette kan gøres således.


protected override void CreateChildControls()
{
  string strScript = string.Format(@"
  function ServerRequest(arg,ctx) {{ {0}; }}
  function GetResult(result, context) {{ document.getElementById('divResult').innerHTML = result }}
  function GetError(result, context) {{ alert(result); }}"
,
  Page.ClientScript.GetCallbackEventReference(this, "arg", "GetResult", "ctx", "GetError", false));
  Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallbackFunctions", strScript, true);
  Page.ClientScript.RegisterStartupScript(this.GetType(), "ExecuteCallback", "ServerRequest('1','');", true);
}

protected override void Render(HtmlTextWriter writer)
{
  writer.Write(@"<div id=""divResult""><br /><img src=""/_layouts/images/CRPERSPC.GIF"" /></div>");
}

string callBackString = string.Empty;
public string GetCallbackResult()
{
  return callBackString;
}

public void RaiseCallbackEvent(string eventArgument)
{
  StringBuilder sb = new StringBuilder();
  UserControl.xxx ctrl = this.Page.LoadControl("/_controltemplates/xxx/xxx.ascx") as UserControl.xxx;
  if (ctrl != null)
  {
    this.Controls.Add(ctrl);
    using (StringWriter tw = new StringWriter(sb))
    {
      using (HtmlTextWriter hw = new HtmlTextWriter(tw))
      {
        ctrl.RenderControl(hw);
      }
    }
  }
  callBackString = sb.ToString();
}

Som resulterer i følgende mens usercontrollen ("Nyheder") loades:

Og resultatet viser når usercontrollen er loadet færdig.

Tags: , ,

Webpart – hvor blev seperation af logik og markup af ?

by Jess Lassen 30. July 2009 05:37

En af de fedeste ting ved asp.net er usercontrols. Disse byggeklodser gør det nemt at dele sine sider op i mindre logiske bidder og nemt at genbruge logik flere steder i projektet. Usercontrols er endvidere delt op i 2 filer. En præsentations fil og en kode fil. Dette gør det super nemt at arbejde med design mockups og giver mulighed for at opdele arbejdet mellem flere mennesker.

Første gang man laver en webpart (Sharepoint eller bare en standard asp.net webpart) vil man sikkert sidder og klø sig i nakken og undre sig over hvor denne separation blev af. Den anbefalede måde at lave webparts på er at tilføje de kontroller man skal bruge i CreateChildControls metoden og derefter ændre layoutet i Render metoden. Hvis det er en kompleks webpart ender man ofte med en fuldstændig uoverskuelig Render metode. Små designændringer vil tage længere tid at rette, da logik og markup er blandet sammen og webparten skal re-kompileres og deployes igen.

3 måder du kan gøre dette nemmere på.

1. Lav din egen template motor.
Eksponer en egenskab på den webpart hvor du kan taste en template ind. Fastlæg nogle mønstre som parses i Render metoden.


<h1>__[Title]__</h1><table><tr><td>Firstname:</td><td>__[FirstNameTextBox]__</td>


I renderingen laves string replace på disse mønstre (de kan være så komplekse som du selv ønsker det) og derved vil du have en delvis opdeling af logik og markup og du kan nemt lave små design ændringen ved blot at ændre webpartens template egenskab.

2. Udnyt nuværende standarder som XML og XSLT.
Bestem dig for at din logik sender xml til webparten og brug xsl til transformere xml’en til html. Denne metode bruges i en del af Sharepoints egne webparts og hvis man er skrap til xslt er dette en super god løsning der giver ægte deling mellem data og præsentation.


Xml xmlControl = new Xml();
xmlControl.DocumentContent = Database.GetXML();
xmlControl.TransformSource = "/Style Library/XSLTStyleSheet.xslt";
this.Controls.Add(xmlControl);

3. Load en usercontrol ind i webparten.
Den sidste måde at gøre det på vil være den mest naturlige for de fleste. Usercontrols kender man fra almindelig asp.net udvikling, og de gode egenskaber med separation mellem logik og markup er kærkommen. Det eneste der kan være lidt irriterende ved denne løsning er at du selv skal binde egenskaberne mellem webparten og usercontrol'en sammen.


UserControlCode.Search ctrl = this.Page.LoadControl("/_controltemplates/Webtop/Search.ascx") as UserControlCode.Search;
if(ctrl != null)
  this.Controls.Add(ctrl);

Tags: , ,

Powered by BlogEngine.NET 1.5.0.7
Theme by Mads Kristensen

RecentPosts