Technology Curiosity: February 2013

Monday 25 February 2013

How to flip text or image vertical on mouse over in CSS ?

This tutorial is about flip any text or image verticaly by using CSS class.
In .aspx page , write a <div> container in <body> tag which contains text which need to be flip.
Like -

<div>

<h3> Hello There!</h3>
<p> Here is some text</p>
</div>

after that , create CSS class which will do the magic of flip

<style type="text/css">

.flip-vertical :hover
{
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv;
filter: flipv;
}

</style>

and use this class in <div> tag , so that text written in it will start flip on mouse over.
The complete code would be like :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<style type="text/css">

.flip-vertical :hover
{
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv;
filter: flipv;
}

</style>

<body>

<h3>

Hello There!</h3>

<p>

Here is some text</p>

</div>

</form>

</body>

</html>

That's it !!! Copy this code and see the magic.

For flipping image, just change text part with any image and this CSS will do the same magic.

Note : This CSS is tested on Crome,Mozilla and IE 10.It's not supported by IE 9 or less version.
Output will be -

on mouse over text will be like -

Happy Coding ..

Monday 4 February 2013

How to get and set textbox value in jquery with asp.net

In this tutorial , I will explain how to get and set textbox value in jquery.
Firstly , add a latest reference of jquery library file in your page which you can either download from
http://www.jquery.com
or you can add CDN link like :
//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js.

Now, define one textbox control on page like :

<asp:TextBox ID="txtName" runat="server"></asp:TextBox>

For getting value of textbox in jquery, simply write :
$('#<textbox ID>').val();

like in above example :
$('#txtName').val();

For setting value of textbox control :
$('#txtName').val('Test');

That's it. Isn't it so simple !!! :-)

But one point I want to mention here that if you are using page in Master page, then it's possible that you will not be able to get and set control value like this because after rendering page, control id gets change like something 'ctl00$MainContent$Pending$txtName'.
So, by using $('#txtName') you will not get or set any thing.
For getting id of textbox used in master page, you have to change code like :
$('[id$=txtName]').val();
here '$=' is basically used as one of attributes filter and syntax is :
[attribute$=value]
it matches elements that have the specified attribute and it ends with a certain value.

Friday 1 February 2013

How to create database driven role base menu in asp.net with c#

For my new task, I wanted to create role based menu where menu options will be change as per user role.
The only condition was the first menu option 'Home' will remain same for all users with different page url. Like if user is admin then 'Home' link contain default admin page but if user is normal user then on the same 'Home' link default page will be show as per user need.

I have google and found many links but didn't get any role base menu link. So finally, with little trick and twist, I have created this menu which I wanted to share with you guys.

Firstly, create a method GetRolebaseMenuDetail(int UserID) to read data from database to dataset.For reading data , I have used stored procedure which return menu data.Pass User ID as parameter in stored procedure.

public DataSet GetRolebaseMenuDetail(int UserID)
{

DataSet dsTemp = new DataSet();
DataRelation relation;
using (SqlConnection conn = new SqlConnection(connectionString))
{
using (SqlCommand comm = new SqlCommand())
{
comm.Connection = conn;
comm.CommandText = "spMenuDetailsRoleWise";
comm.CommandType = CommandType.StoredProcedure;
comm.Parameters.AddWithValue("@UserID", UserID.ToString());
SqlDataAdapter da = new SqlDataAdapter(comm);
da.Fill(dsTemp);
da.Dispose();
}
}

dsTemp.DataSetName = "Menus";
dsTemp.Tables[0].TableName = "Menu";
dsTemp.Tables[1].TableName = "RoleDetail";

//set parent and child relationship between menu data
relation = new DataRelation("ParentChild", dsTemp.Tables["Menu"].Columns["MenuID"], dsTemp.Tables["Menu"].Columns["ParentID"], false);
relation.Nested = true;

dsTemp.Relations.Add(relation);
return dsTemp;
}

After reading data in dataset , now bind Menu control

public void PopulateRolebaseMenu(int UserID,string HomePageURL)
{
DataSet dsMenu = GetRolebaseMenuDetail(UserID);

foreach (DataRow masterRow in dsMenu.Tables["Menu"].Rows)
{
MenuItem masterItem = null;
if (Convert.ToInt32(masterRow["ParentID"]) == 0)
{
masterItem = new MenuItem((string)masterRow["Menu_Name"]);
masterItem.ToolTip = masterRow["Tooltip"].ToString();
if (masterRow["Menu_Name"].ToString() == "Home")
{
masterItem.NavigateUrl = HomePageURL;
}
else
masterItem.NavigateUrl = masterRow["URL"].ToString();
Menu1.Items.Add(masterItem);
}

foreach (DataRow childRow in masterRow.GetChildRows("ParentChild"))
{
MenuItem childItem = new MenuItem((string)childRow["Menu_Name"]);
childItem.NavigateUrl = childRow["URL"].ToString();
childItem.ToolTip = childRow["Tooltip"].ToString();
masterItem.ChildItems.Add(childItem);
}
}
}

Here , first parameter is the User's Id who just login and second is the default page url which should be open on default 'Home' option , as per User role.
Happy Coding !!!! :-)