{"id":36,"date":"2011-11-08T12:30:00","date_gmt":"2011-11-08T12:30:00","guid":{"rendered":"https:\/\/wdev-blog.azurewebsites.net\/index.php\/2011\/11\/08\/encapsulating-an-ajax-client-control-into-a-custom-server-control-part-3\/"},"modified":"2011-11-08T12:30:00","modified_gmt":"2011-11-08T12:30:00","slug":"encapsulating-an-ajax-client-control-into-a-custom-server-control-part-3","status":"publish","type":"post","link":"http:\/\/panahy.nl\/index.php\/2011\/11\/08\/encapsulating-an-ajax-client-control-into-a-custom-server-control-part-3\/","title":{"rendered":"Encapsulating an AJAX client control into a custom server control (Part 3)"},"content":{"rendered":"
\n
The previous article<\/a> was a step forward but it is still far from reusing as a server side control. What we will do in this part will make us possible to have a custom textbox control that makes al it takes to have this client-side functionality and we will be able to drag the ASP.NET control into our page.<\/span><\/div>\n
<\/div>\n
To start with, we need a new server-side control library project that will compile as a dll and contains the server side code and embeds the client-side script. This project will have two files in it: the PassTextBox.cs which deals with the server-side TextBox and inherits from TextBox <\/span><\/span><\/span>and implements the IScriptControl<\/span><\/span><\/span> which makes it possible to embed the script code.<\/span><\/div>\n
<\/div>\n
Notice in the code that the class needs to register the script with the ScriptManager which is accessible through its static method GetCurrent(Page)<\/span>. This is done in OnPreRender method.<\/span><\/div>\n
<\/div>\n
In the previous article<\/a> we had the css class names inside the javascript. In this example we will assign them through the controls properties. The GetScriptDescriptor method allows us to prototype our class where we define these properties.<\/span><\/div>\n
<\/div>\n
<\/span><\/span><\/span>
namespace<\/span><\/span><\/span> Panahy.Ajax
{
  <\/span><\/span>public<\/span><\/span><\/span> <\/span><\/span>class<\/span><\/span><\/span> <\/span><\/span>PassTextBox<\/span><\/span><\/span> : <\/span><\/span>TextBox<\/span><\/span><\/span>, <\/span><\/span>IScriptControl
<\/span><\/span><\/span>  {<\/span><\/span>
private<\/span><\/span><\/span> <\/span><\/span>ScriptManager<\/span><\/span><\/span> sMgr;
<\/span><\/span>public<\/span><\/span><\/span> <\/span><\/span>string<\/span><\/span><\/span> WeakCssClass;
<\/span><\/span>public<\/span><\/span><\/span> <\/span><\/span>string<\/span><\/span><\/span> MediumCssClass;
<\/span><\/span>public<\/span><\/span><\/span> <\/span><\/span>string<\/span><\/span><\/span> StrongCssClass;<\/span><\/span>
protected<\/span><\/span><\/span> <\/span><\/span>virtual<\/span><\/span><\/span> <\/span><\/span>IEnumerable<\/span><\/span><\/span><<\/span><\/span>ScriptDescriptor<\/span><\/span><\/span>> GetScriptDescriptors()
{
  <\/span><\/span>ScriptControlDescriptor<\/span><\/span><\/span> descriptor =
    <\/span><\/span>new<\/span><\/span><\/span> <\/span><\/span>ScriptControlDescriptor<\/span><\/span><\/span>(<\/span><\/span>“Panahy.Ajax.PassTextBox”<\/span><\/span><\/span>, <\/span><\/span>this<\/span><\/span><\/span>.ClientID);<\/p>\n

  descriptor.AddProperty(<\/span><\/span>“weakCssClass”<\/span><\/span><\/span>, <\/span><\/span>this<\/span><\/span><\/span>.WeakCssClass);
  descriptor.AddProperty(<\/span><\/span>“mediumCssClass”<\/span><\/span><\/span>, <\/span><\/span>this<\/span><\/span><\/span>.MediumCssClass);
  descriptor.AddProperty(<\/span><\/span>“strongCssClass”<\/span><\/span><\/span>, <\/span><\/span>this<\/span><\/span><\/span>.StrongCssClass);<\/span><\/span>
  return<\/span><\/span><\/span> <\/span><\/span>new<\/span><\/span><\/span> <\/span><\/span>ScriptDescriptor<\/span><\/span><\/span>[] { descriptor };
}<\/span><\/span>
protected<\/span><\/span><\/span> <\/span><\/span>virtual<\/span><\/span><\/span> <\/span><\/span>IEnumerable<\/span><\/span><\/span><<\/span><\/span>ScriptReference<\/span><\/span><\/span>> GetScriptReferences()
{
  <\/span><\/span>ScriptReference<\/span><\/span><\/span> reference = <\/span><\/span>new<\/span><\/span><\/span> <\/span><\/span>ScriptReference<\/span><\/span><\/span>();<\/p>\n

  reference.Assembly = <\/span><\/span>“Panahy.Ajax”<\/span><\/span><\/span>;
  reference.Name = <\/span><\/span>“Panahy.Ajax.PassTextBox.js”<\/span><\/span><\/span>;
  <\/span><\/span>return<\/span><\/span><\/span> <\/span><\/span>new<\/span><\/span><\/span> <\/span><\/span>ScriptReference<\/span><\/span><\/span>[] { reference };
}<\/span><\/span>
protected<\/span><\/span><\/span> <\/span><\/span>override<\/span><\/span><\/span> <\/span><\/span>void<\/span><\/span><\/span> OnPreRender<\/strong>(<\/span><\/span>EventArgs<\/span><\/span><\/span> e)
{
  <\/span><\/span>if<\/span><\/span><\/span> (!<\/span><\/span>this<\/span><\/span><\/span>.DesignMode)
  {
    <\/span><\/span>\/\/test for the existence of a ScriptManager
    <\/span><\/span><\/span>sMgr = <\/span><\/span>ScriptManager<\/span><\/span><\/span>.GetCurrent<\/strong>(Page);<\/p>\n

    <\/span><\/span>if<\/span><\/span><\/span> (sMgr == <\/span><\/span>null<\/span><\/span><\/span>)
       <\/span><\/span>throw<\/span><\/span><\/span> <\/span><\/span>new<\/span><\/span><\/span> <\/span><\/span>HttpException<\/span><\/span><\/span>(<\/span><\/span>“A ScriptManager control must exist on the page.”<\/span><\/span><\/span>);<\/span><\/span>
    sMgr.RegisterScriptControl<\/strong>(<\/span><\/span>this<\/span><\/span><\/span>);
  }
  <\/span><\/span>base<\/span><\/span><\/span>.OnPreRender(e);
}<\/span><\/span>
protected<\/span><\/span><\/span> <\/span><\/span>override<\/span><\/span><\/span> <\/span><\/span>void<\/span><\/span><\/span> Render(<\/span><\/span>HtmlTextWriter<\/span><\/span><\/span> writer)
{
  <\/span><\/span>if<\/span><\/span><\/span> (!<\/span><\/span>this<\/span><\/span><\/span>.DesignMode)
    sMgr.RegisterScriptDescriptors<\/strong>(<\/span><\/span>this<\/span><\/span><\/span>);<\/span><\/span>
  base<\/span><\/span><\/span>.Render(writer);
}<\/span><\/span>
IEnumerable<\/span><\/span><\/span><<\/span><\/span>ScriptReference<\/span><\/span><\/span>> <\/span><\/span>IScriptControl<\/span><\/span><\/span>.GetScriptReferences()
{
  <\/span><\/span>return<\/span><\/span><\/span> GetScriptReferences();
}<\/span><\/span>
IEnumerable<\/span><\/span><\/span><<\/span><\/span>ScriptDescriptor<\/span><\/span><\/span>> <\/span><\/span>IScriptControl<\/span><\/span><\/span>.GetScriptDescriptors()
{
  <\/span><\/span>return<\/span><\/span><\/span> GetScriptDescriptors();
}
}
}<\/span><\/span><\/div>\n

<\/div>\n
The javascript file remains as before.
Now we can reuse the control in any project that refers to the dll.
<\/span><\/div>\n
<\/span><\/span><\/span>
<%<\/span><\/span>@<\/span><\/span><\/span> <\/span><\/span>Register<\/span><\/span><\/span> <\/span><\/span>Assembly<\/span><\/span><\/span>=”Panahy.Ajax”<\/span><\/span><\/span> <\/span><\/span>Namespace<\/span><\/span><\/span>=”Panahy.Ajax”<\/span><\/span><\/span> <\/span><\/span>TagPrefix<\/span><\/span><\/span>=”panahyAjax”<\/span><\/span><\/span> %>
<\/span><\/span><\/span><\/span><\/span>
<<\/span><\/span><\/span>panahyAjax<\/span><\/span><\/span>:<\/span><\/span><\/span>PassTextBox<\/span><\/span><\/span> <\/span><\/span>ID<\/span><\/span><\/span>=”textbox1″<\/span><\/span><\/span> <\/span><\/span>runat<\/span><\/span><\/span>=”server”<\/span><\/span><\/span> <\/span><\/span>width<\/span><\/span><\/span>=”200″<\/span><\/span><\/span>
    <\/span><\/span>TextMode<\/span><\/span><\/span>=”Password”<\/span><\/span><\/span> <\/span><\/span>WeakCssClass<\/span><\/span><\/span>=”weak”<\/span><\/span><\/span> <\/span><\/span>MediumCssClass<\/span><\/span><\/span>=”medium”<\/span><\/span><\/span> <\/span><\/span>
    StrongCssClass<\/span><\/span><\/span>=”strong”><\/<\/span><\/span><\/span>panahyAjax<\/span><\/span><\/span>:<\/span><\/span><\/span>PassTextBox<\/span><\/span><\/span>><\/span><\/span><\/span><\/span><\/span><\/span>
<\/span><\/span><\/span><\/span><\/span><\/div>\n

<\/span>
Although this sample can be handy to use as a template for other server controls, the introduced functionality could be done by creating an AJAX Behavior for client controls, which is the topic for the next article.<\/span><\/div>\n
<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

The previous article was a step forward but it is still far from reusing as a server side control. What we will do in this part will make us possible to have a custom textbox control that makes al it takes to have this client-side functionality and we will be able to drag the ASP.NET … Continue reading “Encapsulating an AJAX client control into a custom server control (Part 3)”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,31,18],"tags":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false},"uagb_author_info":{"display_name":"Pouya Panahy","author_link":"http:\/\/panahy.nl\/index.php\/author\/pouya\/"},"uagb_comment_info":0,"uagb_excerpt":"The previous article was a step forward but it is still far from reusing as a server side control. What we will do in this part will make us possible to have a custom textbox control that makes al it takes to have this client-side functionality and we will be able to drag the ASP.NET…","_links":{"self":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/36"}],"collection":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":0,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/36\/revisions"}],"wp:attachment":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/media?parent=36"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/categories?post=36"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/tags?post=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}