<\/p>\nASP.NET is great at separating design and code elements on the server side. This extends to a powerful yet simple way of adding your own custom controls to your ASP.NET websites.<\/p>\n
<\/p>\n
It provides a great method to connect HTML elements in an .ascx and back end server code in a .cs file. This approach is quick to get going and has long term scalability too. However, on the web today, developers will want to have the option of client side dynamic code too, in the form of JavaScript elements to add to the control.<\/p>\n
Microsoft’s suggestions<\/a> are useful but only suitable for simple applications such as mouseover effects. This is because they tell you how to add isolated fragments of JavaScript to DOM elements. I wanted a single JavaScript class that had permanent links to DOM elements.<\/p>\n Lately they also provide Ajax tools for ASP.NET<\/a>, and a framework of Ajax controls. There are some nice controls with these tools. However even with everything installed, what you don’t get is an way of adding your own JavaScript enabled custom controls which is as easy as adding a Web User Control from the Add New Item wizard. I was expecting to see a pattern that simply provided a client side .js file to complement the server side .cs and .ascx files. The AJAX tools seem rather over-complex compared to vanilla ASP.NET 2.0, and worse still, this approach requires .dlls to be installed on the server side. I had to telephone my host to ask them to add the components.<\/p>\n \nI’ll explain the simpler system I have developed. My aims were:<\/p>\n My method enables links not only between server and client sides of a user control, but between controls and their parent elements on the client side (just as could be done on the server side). Think of it as “client-side code behind”.\n<\/p>\n This contains a single class wrapped with a single function of the same name, and taking as parameters the client ID of the the control, and any properties that the JavaScript object requires to receive from the server-side part. e.g:<\/p>\n \nThe ClientID allows the JavaScript to have access to the DOM relating to its specific instance using the getElementById() function. This is because is possible to predict client IDs of child DOM elements by using the control’s own parent ID. For instance a div declared with <div runat=”server” id=”content”> in a control with client ID “myControl1” will have the client ID “myControl1_content”. In code this could be obtained with getElementByID(clientID + “_content”);\n<\/p>\n The use of runat=”server” is necessary because although a static client ID could be provided, this would not have a name unique to the page, and would therefore not allow more than one control of that type per form or parent control.<\/p>\n Below that, a script to create a new instance of the JavaScript object with the expected parameters detailed in the previous step.<\/p>\n The “<%=ID%> =” before the ‘new’ creates JavaScript code that sets a variable that contains the JavaScript object associated with the control that is named the same as the server side ID for the control. This could allow JavaScript in the parent page to interact with the control object of the child control.\n<\/li>\n<\/ol>\n<\/p>\n An example with an online demo<\/a> and full source<\/a> is presented here. I’ve developed a TrackBar control for ASP.NET similar to the control in Windows Forms. This control is for number entry by a user viewing a web page. It presents a number as a text box, but if the user has JavaScript enabled it also shows a visual slider that can be manipulated with the mouse. The effect on the value can be seen in real time.<\/p>\n The control changes the text in the TextBox which gives a return path of data to the server side. An example of this can be seen in the code in the Default.aspx.cs file.<\/p>\n In addition, a callback can be added to an instance of a TrackBar control on the client (JavaScript) side. An example of this can be seen in the code in Default.ascx.js, where the position and content of a text fragment is changed in real time as the slider is altered.<\/p>\n","protected":false},"excerpt":{"rendered":" ASP.NET is great at separating design and code elements on the server side. This extends to a powerful yet simple way of adding your own custom controls to your ASP.NET websites. It provides a great method to connect HTML elements in an .ascx and back end server code in a .cs file. This approach is […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-23","post","type-post","status-publish","format-standard","hentry","category-web-development"],"_links":{"self":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/posts\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=23"}],"version-history":[{"count":0,"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/posts\/23\/revisions"}],"wp:attachment":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=23"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=23"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
How it works<\/h1>\n
\n
\n\n\t\n\t\n\t\tfunction TrackBar(clientID, minimum, maximum, smallChange, barPixelWidth)<\/div><\/li>\n{<\/div><\/li>\n\/\/....<\/div><\/li>\n}<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n\n\n\t\n\t\n\t\t<script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> src<\/span>=<\/span>"TrackBar.ascx.js"<\/span>><\/<\/span>script<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n\n\n\t\n\t\n\t\t<script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span><\/div><\/li>\n <%=<\/span>ID%><\/span>= new TrackBar('<%=<\/span>ClientID%><\/span>', <%=<\/span>Minimum%><\/span>, <%=<\/span>Maximum%><\/span>, <%=<\/span>SmallChange%><\/span>, <%=<\/span>BarPixelWidth%><\/span>);<\/div><\/li>\n<\/<\/span>script<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\nExample<\/h1>\n
<\/p>\n