How to use custom Javascript and css styles in WebPart (SharePoint)

I have been working on Share Point and Workflow projects recently. finally, the boss gave me a try. the style is too ugly and the performance is too low. in fact, it is not intended to modify the Share point Webpart interface. but I really don't know how to do it ., I don't know how to use custom Js methods and css styles. but they were all pointed out by the boss. no. do it. so I searched a bunch of documents online and finally found a satisfactory method. share it with you. (You can skip this expert)

Because SharePoint WebPart is not like asp.net, you can drag controls without front-end code. you can only publish to sharepoint for browsing. because there is no front-end HTML, only the backend cs files are available. therefore, it cannot be referenced in html. however, when you view the source code through a browser

<Link rel.../> or <script src.../>. The key question is how you can achieve this purpose.

1: first, let's check the page source code of sharepoint:

Through the source code, we can see that many basic sharepoint things are stored in: C: \ Program Files \ Common Files \ Microsoft Shared \ Web Server Extensions \ 12 \ template \ LAYOUTS. directory. including many js, css, html, etc,

2: If you do not know how to find this directory, check the directory (email _ layouts-> open)

 

Okay. Now that we know many of the js files referenced by sharepoint and the css files are in _ layouts, we can do it right away. Just register your own separate js files in the background.

3: defining javascript and css files. The definition is very simple.

Jsfile. js

Code

  function showMe(obj)
{

alert("Johnny zhang");

}

Mycss.css is simpler.

Code

 .MyCSS{background-color:red;font-size:36px}

4: Create a folder in _ layouts and copy your js and css files.
 

5: register in the webpart of sharepoint. The method is also very simple, there is nothing to say (simple code comment)

Code

  protected override void OnPreRender(EventArgs e)
        {
//Register external Javascript code 
            Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "js0001", "/_layouts/JSfiles/JsFile.js");
//Regiser custom css style
            CssRegistration cssControls = new CssRegistration();
            cssControls.Name = "/_layouts/JSfiles/myStyle.css";
            Page.Header.Controls.Add(cssControls);            
        }
//Test js and css style
        protected override void Render(HtmlTextWriter writer)
        {
            writer.Write("<input type='button' class='MyCSS' id='dd' onclick='showMe(this)' value='Click Me'/>");
//userName.RenderControl(writer);
//saveButton.RenderControl(writer);
        }

5: effect:

Haha. The key to the problem is that we found the sharepoint file directory.
I am planning to write a series on how to develop sharepoint webpart, even if I record my learning process.