How to encapsulate JS and CSS files as server-side controls

How to encapsulate JS and CSS files as server-side controls
We encapsulate a JS date control as a column and combine it with the textbox of the server to form a server control, which can be used directly on top. In fact, it is very easy for everyone to learn together. Let's take a look:

Method:
First, download a JS date component with encapsulation.
Then: Create a date file calendarbox. CS Code as follows:
Using system;
Using system. Collections. Generic;
Using system. componentmodel;
Using system. text;
Using system. Web;
Using system. drawing;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. htmlcontrols;

[Assembly: webresource ("wisesoft. Web. Control. wisesoft. Calendar. Calendar. js", "application/X-JavaScript", required msubstitution = true)]

Namespace wisesoft. Web. Control
{
[Toolboxbitmap (typeof (calenderbox), "wisesoft. Calendar. calendarbox. ICO")]
Public class calenderbox: textbox
{
Protected override void onprerender (eventargs E)
{
String calendar = calendercss. CSS;
Calendar = calendar. Replace ("$ imaginurl $", this. imaginurl );
If (! Page. clientscript. isclientscriptblockregistered ("_ Calendar "))
Page. clientscript. registerclientscriptblock (typeof (string), "_ Calendar", calendar );

This. Page. prerendercomplete + = new eventhandler (page_prerendercomplete );
This. cssclass = "wdate ";
This. Attributes. Add ("onfocus", "setday (this )");
This. Attributes. Add ("onchange", "checkdate (this. Value )");
Base. onprerender (E );
}

Void page_prerendercomplete (Object sender, eventargs E)
{
Page. clientscript. registerclientscriptresource (this. GetType (), "wisesoft. Web. Control. wisesoft. Calendar. Calendar. js ");
}

/** // <Summary> 〉
/// The address of the pop-up date widget small image
/// </Summary> 〉
[Bindable (true)]
[Category ("icon Settings")]
[Defaultvalue ("imagin/calender.gif")]
[Localizable (true)]
Public String imaginurl
{
Get
{
String S = (string) viewstate ["imaginurl"];
Return (S = NULL )? "Imagin/calender.gif": S );
}
Set
{
Viewstate ["imaginurl"] = value;
}
}

/** // <Summary> 〉
/// Set the initial format of the date and time.
/// </Summary> 〉
[Bindable (true)]
[Category ("initialization Settings")]
[Defaultvalue (false)]
[Localizable (true)]
Public bool showtime
{
Get
{
Bool S = (bool) viewstate ["Showtime"];
If (viewstate ["Showtime"]! = NULL)
{
Return S;
}
Return false;
}
Set
{
Viewstate ["Showtime"] = value;
}
}

/** // <Summary> 〉
/// Note the Style File
/// </Summary> 〉
/// <Param name = "path"> </param> 〉
Private void registercssfile (string path)
{
Htmllink link1 = new htmllink ();
Link1.attributes ["type"] = "text/CSS ";
Link1.attributes ["rel"] = "stylesheet ";
Link1.attributes ["href"] = path;
This. Page. header. Controls. Add (link1 );
}
}
}
Note: [Assembly: webresource ("wisesoft. web. control. wisesoft. calendar. calendar. JS "," application/X-JavaScript ", javasmsubstitution = true)] is used to encapsulate your JS file. You need to add your JS file name to your project name, you also need to make some settings for your JS file, click the right part, select properties ---> then select Advanced, select generate operations --> select embedded resources, in this way, JavaScript files can be encapsulated. Of course, the same is true if there are images or CSS files.
Let's look at Void page_prerendercomplete (Object sender, eventargs E)
{
Page. clientscript. registerclientscriptresource (this. GetType (), "wisesoft. Web. Control. wisesoft. Calendar. Calendar. js ");
}
Register Your JS file to the page before rendering the page.
[Bindable (true)]
[Category ("icon Settings")]
[Defaultvalue ("imagin/calender.gif")]
[Localizable (true)]
Uses the reflected metadata to set attributes. You can add a small icon next to your date control to make it an attribute. This allows programmers to customize images and inherit them.
Well, we can encapsulate the JS file. Let's take a look at how the CSS file is encapsulated and written to the client.
We can see that there is a method below,

/** // <Summary> 〉
/// Note the Style File
/// </Summary> 〉
/// <Param name = "path"> </param> 〉
Private void registercssfile (string path)
{
Htmllink link1 = new htmllink ();
Link1.attributes ["type"] = "text/CSS ";
Link1.attributes ["rel"] = "stylesheet ";
Link1.attributes ["href"] = path;
This. Page. header. Controls. Add (link1 );
} It is used to register your CSS file, we all know that in our page code, "link href =" stylesheet.css "rel =" stylesheet "type =" text/CSS "/> introduces an external style file. This method is to achieve this goal. Now we have no style files.
Therefore, we must create a CSS and set it (the same way as JS ). You can call the void page_prerendercomplete (Object sender, eventargs e) method, but there are other methods. Let's introduce the second method (this can also be used for JS files ), create a calendarcss. the code of the CS file is as follows:
Using system;
Using system. Collections. Generic;
Using system. text;

Namespace wisesoft. Web. Control
{
Public class calendercss
{
Public static string CSS = @ "<style type =" "text/CSS" "> ""〉
. Wdate {
Border: #999 1px solid;
Height: 18px;
Background: URL ($ imaginurl $) No-repeat right;
}
. Wdatefmterr {
Font-weight: bold;
Color: red;
}
</Style> 〉";
}
} This class is actually to write our CSS file into a string form, which is then used by the main function to register for the client.
Then let's look at the code in the calendarbox. CS file.
String calendar = calendercss. CSS;
Calendar = calendar. Replace ("$ imaginurl $", this. imaginurl );
If (! Page. clientscript. isclientscriptblockregistered ("_ Calendar "))
Page. clientscript. registerclientscriptblock (typeof (string), "_ Calendar", calendar );
It is to register a string that we have written to the client in a quick way (of course, there are more registration methods, you can refer to the clientscript class on msdn ).