How to add javascript file and css stylesheet dynamically to the header of the page in asp.net using c#?

In this tutorial you will learn how to add the javascript files and css stylesheets dynamically to the header of asp.net page inheriting masterpage using c#. Let's Suppose you have added a new module in your website inside a new folder, the folder name is NewModule. This module has its own css stylesheet and javascript files that will be attached to the more than 100 aspx webpages in it.

Now we have to add the javascript file and stylesheet to all these webpages of NewModule Dynamically. It’s not better approach to add these javascript file and css stylesheet to the masterpage and when these webpages of NewModule will be rendered then these javascript files and stylesheet will be automatically attached to the webpages located inside the NewModule folder. The reason why this approach is not good because the javascript file and stylesheet will be automatically attached to all those webpages other than NewModule folder that inherits from masterpage.

So let’s have a look example below that will cover the scenario that i discuss above.

How to add javascript file and css stylesheet dynamically to the header of the page in asp.net using c#?

Yourmasterpage.master.cs
protected override void OnPreRender(EventArgs e)
{
if (Request.RawUrl.ToLower().Contains("/newmodule /"))
{
LinkCss(); //It will Add CSS to Header
LinkJs(); //It will Add javascript to header
}
base.OnPreRender(e);
}
protected void LinkJs()
{
HtmlHead head = (HtmlHead)Page.Header;
HtmlGenericControl js = new HtmlGenericControl("script");
js.Attributes.Add("type", "text/javascript");
js.Attributes.Add("language", "javascript");
js.Attributes.Add("src", Page.ResolveUrl("~/js/yourjsfile.js"));
head.Controls.Add(js);
}
protected void LinkCss()
{
HtmlHead head = (HtmlHead)Page.Header;
HtmlLink css = new HtmlLink();
css.Attributes.Add("href", Page.ResolveUrl("~/styles/yourstylesheet.css"));
css.Attributes.Add("type","text/css");
css.Attributes.Add("rel","stylesheet");
head.Controls.Add(css);
}

Now let’s understand the code.

First of all in OnPreRender(EventArgs e) event of masterpage, I am checking whether the url in the address bar contains the NewModule flder name(the folder containing all the new developed webpages in which I want to add the javascript and stylesheet dynamically) using Request.RawUrl, if it contains the NewModule folder name then the LinkCss() and LinkJs() functions will get call and javascript file and css stylesheet will be attached to the aspx webpages dynamically. You can call LinkJs() and LinkCss functions in the page_load() function of your masterpage too.

So that's it. I hope you will find this tutorial very informative.

I love your feedback.
Read more...

Labels:

0 comments

How to Specify Multiple Actions from Single Form Using Javascript?


In this programming tutorial we will learn how to specify multiple actions from single form using javascript. As we all know that there is always one submit button available in one form, so if you want to submit your form to multiple Web Pages then you have to use input buttons instead of submit button and javascript code for this purpose.
How to Specify Multiple Actions from Single Form Using Javascript?

Lets have a look over the example given below.
yourpage.php

<html>
<head>
<title>Specify Multiple Actions From Single Form</title>
<script language="javascript" type="text/javascript">
function FuncButton1()
{
document.form1.action = "Page1.php" //Sets the action attribute of the form
document.form1.submit(); // Submit the page
return true;
}

function FuncButton2()
{
document.form1.action = "Page2.php" //Sets the action attribute of the form
document.form1.submit(); // Submit the page
return true;
}

</script>
</head>

<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<form name="form1" method="post">
<tr>
<td>First Name</td><td><input type="text" id="txt_Firstname" name="txt_Firstname"/></td>
</tr>
<tr>
<td>Last Name</td><td><input type="text" id="txt_Lastname" name="txt_Lastname"/></td>
</tr>
<tr>
<td>Email</td><td><input type="text" id="txt_Email" name="txt_Email"/></td>
</tr>
<tr>
<td>Username</td><td><input type="text" id="txt_Username" name="txt_Username"/></td>
</tr>
<tr>
<td><input type="button" value="Button1" onClick="return FuncButton1();" /></td><td><input type="button" value="Button2" onClick="return FuncButton2();"/></td>
</tr>
</form>
</tr>
</table>
</body>
</html>
Now lets understand.

First of all I have created a simple html form with two noticeable things. First noticeable thing is that there is no submit (type="submit") button in the form and secondly I have not set any action attribute of the form.

To post the data to two different web pages I have created two input buttons and using onClick event of these buttons I am setting the "action" of the form dynamically and then submit the form. So whenever user clicks the Button1 then the Page1.php will be called and whenever user clicks the Button2 then the Page2.php will be called.

So that's it. I love your feedback
Read more...

Labels:

0 comments

Getting file extension in php

In this php tutorial you will learn how to get the file extension from a string in php. Sometimes during web development you may need to get the file extension, so let's have a look over how to do this.

There are different ways to do this. Let's have a look over each of them


1) Using explode()

The simplest and easiest way of getting file extension is to use the php built-in function explode.

The explode() function breaks a string into an array.

It takes three parameters in which two of them are required and one is optional.

a) The first required parameter is separator that specifies where to break the string.
b) The second required parameter is string that specifies the string to split.
c) The optional parameter is limit that specifies the maximum number of array elements to return.

So let's have a look over how to get the file extension using explode() method.

<?php
$filename="picture.jpg";
$fileArray=array();
$fileArray =explode('.',$filename);
$file_extension=$fileArray[1];
echo $file_extension;
?>

or you can made a custom php function and call explode() method in it and in the end return the value

<?php
function get_file_extension($file_name)
{
return end(explode('.',$file_name));
}

$filename="picture.jpg";
$file_extension=get_file_extension($filename);
echo $file_extension;
?>

2) Using PATHINFO_EXTENSION

Another way to get the file extension is to use the pathinfo which is an array that contains dirname, basename, extension and file name. Right now we are only interested in the file extension so I am going to call it directly.

<?php
$filename="picture.jpg";
$file_extension = pathinfo($filename,PATHINFO_EXTENSION);
echo $file_extension;
?>

Or you can do like this

<?php
function get_file_extension($file_name)
{
return pathinfo($file_name, PATHINFO_EXTENSION);
}

$filename="picture.jpg";
$file_extension =get_file_extension($filename);
echo $file_extension;
?>

3) Using substring and string char

You can use substring and string char to determine the file name length and position to get the file extension. Let’s have a look over how to do this

<?php
function get_file_extension($file_name)
{
return substr(strrchr($file_name,'.'),1);
}

$filename="picture.jpg";
$file_extension =get_file_extension($filename);
echo $file_extension;
?>

So these are the different ways to get the file extension in php.
Read more...

Labels:

0 comments

Redirection in javascript after some time delay

In this programming tutorial we will learn how to redirect the user to another web page or website after some time delay. Its quite easy in javascript as you have to write just single line of code. Lets have a look over the example given below.
Redirection in javascript after some time delay
For this purpose there is a built-in javascript method setTimeout().
setTimeout() method is used to repeatedly call some function after a specified amount of time.

Syntax of setTimeout() Method
setTimeout("Javascript Statement",Milliseconds);

Note: - The setTimeout() is the method of the HTML DOM Window object.

setTimeout() method takes two parameters. The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('2 seconds!')" or a call to a function, like "helloMsg()".

The second parameter indicates how many milliseconds from now you want to execute the first parameter.

Note: - There are 1000 milliseconds in one second.

So lets have a look over the code
<html>
<head>
<title>Redirection in javascript after some time delay</title>
<script language="javascript" type="text/javascript">
function Delayer()
{
setTimeout('Redirection()', 5000);
}
function Redirection()
{
window.location="http://www.google.com";
}
</script>
</head>
<body>
<form>
<input type="button" value="Redirect after 5 secs" onclick="Delayer();" /></form>
</body>
</html>
The above mentioned code will redirect user to the google.com after 5 seconds of clicking the button. When user will click the button, the function Delayer() will be get call and in this function I am calling Redirection() function after every 5 seconds. So when focus will move to the Redirection() function after every 5 seconds then the user will be immediately redirected to the google.com

So that's it.
I love your feedback.
Read more...

Labels:

2 comments

How to disable the browser back button

In this javascript tutorial you will learn how to disable the back button on FireFox's browser or how to prevent the user to go back in FireFox’s browser. Although I am giving force to FireFox's browser yet this code works for all web browsers such as Google Chrome, Opera, Safari, Internet Explorer etc. The reason why I am giving force over FireFox because it is even hard in FireFox to disable the back button or to prevent user to go back.

For example, the below mentioned code will work in other web browsers such as Internet Explorer, Google Chrome but will not perform his responsibility incase of FireFox.


<script language="javascript" type="text/javascript">
window.history.forward(1);
</script>

Also this code will work in other browsers but in case of FireFox it will not work
<script language="javascript" type="text/javascript">
if(history.back)
{
history.go(+1)
}
</script>

So now let's have a look over javascript code that will disable the back button and prevent user to go back in Firefox and in all other browsers

<script language="javascript" type="text/javascript">
function noBack()
{
window.history.forward()
}
noBack();
window.inhibited_load=noBack;
window.onpageshow=function(evt){if(evt.persisted)noBack()}
window.inhibited_unload=function(){void(0)}
</script>

So this is the way to disable the back button on firefox and prevent user to go back.
Read more...

Labels:

0 comments

Subscribe to: Posts (Atom)