UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Linking CSS into Routed URL page

Demo and Code for how to add CSS into routed URL with URL param

by Athil


Posted on 18 Jun 2017 Category: Asp.net Views: 341

Edited on 11 Jul 2017



DEMO 

Hi, Here I am going to show how to add CSS and Javascript into routed URL with URL params with ResolveUrl() method.

 

<link rel ="stylesheet" href="<%=  ResolveUrl("~/") %> css/font-awesome.css"/>
<script type="text/javascript" src="<%= ResolveUrl("~/") %>js/jquery.min.js" ></script>

In the Demo, I added Bootstrap CSS and jquery script. When clicking on the button a jQuery method will execute to change the text of h4 heading

Full Demo Code

On Client Side
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo for adding CSS and javascript to Routed URL</title>

    <link rel ="stylesheet" href="<%=  ResolveUrl("~/") %>css/bootstrap.min.css"/> 
     <script type="text/javascript" src="<%= ResolveUrl("~/") %>js/jquery.min.js" ></script>

</head>
<body>
   
    <div>
    <h1> Demo for how to add CSS and javascript to Routed URL </h1>
      <h4 id="h4">Bootstrap Button Click The button to change the text of h4</h4> 
        <button class="btn btn-primary" onclick="jQueryEvent();">Click Here </button>

    </div>
 
</body>
    <script>
        function jQueryEvent()
        {
            $("#h4").html("Text Changed");
        }
        </script>
</html>


In Global.asax

 protected void Application_Start(object sender, EventArgs e)
        {
            RegisterCustomRoutes(RouteTable.Routes);
        }

        void RegisterCustomRoutes(RouteCollection routes)
        {
            routes.MapPageRoute("cssjavascriptroutedurl", "css-javascript-routed-url/{Name}", "~/css-javascript-routed-url.aspx");

        }


Leave a Comment:


Advertisement