Tuesday, January 27, 2009

Accessing ASP.Net Controls in JavaScript

Hey again,
Many times in our developement, we need some code to clear a form, or setting all the drop down lists to its zeroth indexes, or something related to that. At that time, writing a server side code using ajax is not a good practice, and doing it right away without ajax is the worst idea to deal with the situation.
Keeping that in mind, following code will help a lot, for example if we want to clear all the text boxes of the form we can write something like:


var inputElements = document.getElementsByTagName("input");
for (var count=0; count < inputElements.length; count++){
if(inputElements[count].type === "text"){
inputElements[count].value="";
}
}


Here is a list of input types that you can deal with like i have done in line 3 (inputElements[count].type)
  • For TextBox we have text
  • For DropDownList or html select, we have select
  • For RadioButton or RadioButton list, we have radio
  • For CheckBox or Checkboxlist, we have checkbox
  • For File Input, we have file

Note that all the types are in lower case. Regardless of they are asp.net controls or html controls, they will all became inputs at the clients end, so we can easily deal with them like above javascript. The only difference between them will be their ids. If any control is marked with runat=server attribute, its id will be generated by asp.net and that id can be accessible using control's ClientID property.

Hope this will help. Happy coding with js :)

Free DotNetNuke Skin : Cash

Hey friends,
Here is a cool new oswd html template converted into DotNetNuke Skin. The original template can be found here. I've just converted that cool template into DotNetNuke skin. Now its ready to use for all of you under Creative common licence, so you can use the skin for free but you have to place the credit links for hosting columbia and my blog as it is.
Please note that this skin is part of my excersice of how to create a DotNetNuke skin from xhtml template. so its not ready for the production purpose.
You can donwload the skin here

Here is a quick summary:
  • CSS and XHTML 1.0 Transitional Validation.
  • Tested in DNN 4.5.8 and works well.
  • Tested in IE6 and Mozilla 2,3 and works well.
  • submenus are not looking as per skins root level menu its, its still to be fixed
  • You can do whatever you want with this template, just keep the Hosting Colombia link at the bottom as well as my blog's link for credits. Enjoy!

I'm preparing the tutorial for converting the template into a dnn skin and will publish soon, stay tuned...

Hope this will help...thanks

Wednesday, January 21, 2009

How to create a simple SEO Module in ASP.NET

Hey friends,
In the development life, we often develop asp.net pages that shows various category listings and product listings. Creating a page somewhat like http://yourDomain.Com/Categories.aspx?cid=123. As we all know, this kinda urls are not search engine friendly urls. The simplest way to make these urls search engine friendly is to use url rewrites.

There are lots and lots of url rewrites available across the web which converts above url to something like: http://yourDomain.com/cid/123/Categories.aspx or may be http://yourDomain.com/Categories123.htm. So that would make the url search engine friendly.

The next thing comes in SEO is to make proper entries for page's title, Description and keywords. We can set these things using meta tags. which looks something like



<meta content="Description of the content in the page" name="description"/>
<meta content="keywords related to the content" name="keywords"/>

So next thing comes is, how to make title, description and keywords different according to the querystring value of category in our above example. Well my approach to deal with this is:

  1. Create an Xml file which stores category id, title, description and keywords. Here is a sample xml that looks like:

    <?xml version="1.0" encoding="utf-8" ?>
    <category>
    <entry id="29" keywords="keywords for category 29" title="category name and some most relevant keywords" description="description about category"/>
    <entry id="31" keywords="keywords for category 31" title="category name and some most relevant keywords" description="description about category"/>
    <entry id="32" keywords="keywords for category 32" title="category name and some most relevant keywords" description="description about category"/>
    </category>


  2. Add asp.net literal control to header of the page. Please note that if you are using the master page, you should add this control to header tag of master page, otherwise you should add it to page's header. Another thing is, you should mark the header tag with runat=server to get this working

    <asp:literal runat="server" id="lMetaContainer"></asp:literal>


  3. Read the xml in page load event and find the relative category in xml node. Here a c# code for that is having a literal control in master page. As i know its very easy to work with the normal page.

    //using System.Xml;
    if (!IsPostBack)
    {
    if(Request.QueryString["cat"] !=null)
    {
    string cat = Request.QueryString["cat"].ToString();
    XmlDocument xmlDoc = new XmlDocument();
    xmlDoc.Load(Server.MapPath("~/CategoryData.xml"));
    //Use appropriate path in Server.MapPath
    XmlElement currentCat = null;
    XmlElement root = xmlDoc.DocumentElement;
    // i know this can be optimized by using
    // root.SelectSingleNode method, :) try it yourself
    foreach (XmlElement ele in root.ChildNodes)
    {
    if (ele.Attributes["id"].Value == cat)
    {
    currentCat = ele;
    break;
    }
    }
    if (currentCat != null)
    {
    string catTitle = currentCat.Attributes["title"].Value.ToString();
    string catMetaDesc = currentCat.Attributes["description"].Value.ToString();
    string catMetaKeywords = currentCat.Attributes["keywords"].Value.ToString();

    this.Page.Title = catTitle ;
    Literal lMeta = (Literal)this.Page.Header.FindControl("lMetaContainer");
    //tip:comment out above line if you are not using master page and replace lMeta with
    //your literal control"s id in the below code
    System.Text.StringBuilder meta = new System.Text.StringBuilder();
    meta.Append("<meta name=\"description\" content=\"" + catMetaDesc + "\" />");
    meta.Append("<meta name=\"keywords\" content=\"" + catMetaKeywords + "\" />");
    lMeta.Text = meta.ToString();
    }
    }
    }


Using xml in the module will make the implementation of the SEO separate. So the guy who writes SEO keywords, descriptions, and titles will get only xml to modify. If its not convinient to do so for an SEO guy, we can write a simple window base tool that will read and write the xml accordingly.

Also, we can extend this for multiple items, or make savaral xmls for each listings as required. Tell me what you think about this module so that we can improve this...

You can easily modify the code in whatever the way you want and implement the SEO friendly web pages in your website. Feel free to ask for more details or modifications.

Happy coding :)

Monday, January 12, 2009

How to create Web Gallery with LightBox WebGallery Generator in ASP.NET

Dear Friends,
While i was looking for a javascript slide show options across the web, i come across the LightBox WebGallery Creator . This is a simple exe file that allows you to generate html slide show from your images. I was looking to implement the same gallery in my asp.net page. I was having images in some folder of my website and the file names are coming from database table. so i was looking how can i use the light box to show a gallery with slide show.
The integration was quite simple as i required my own look and feel and i just have to get the slide show functionality working. so i copy pasted the supported files and added a simple attribute to my image tag rel='lightbox[gallery]' and it worked. :) I was expecting atleast 4-5 hours work and that makes me smile.

Hope this would also help you make the slide show plugin easily.

How to create link list with javascript

Dear Friends,
I found data structures as one of the most interesting subjects in the academic i learned. Before some day i was learning object oriented features of javascript. I tried my hand on implementing a Link List algorithm in javascript and here is what i get.

Let's start building a Link List using JavaScript:

  1. Declaring The basic data structures


    function LinkListNode()
    {
    this.Data = 0;
    this.Next = null;
    }
    function List()
    {
    var First = new LinkListNode();
    }


  2. Adding an Insert method


    List.prototype.addNode=function(_node)
    {
    if(this.First == null)
    {
    this.First = _node;
    }
    else
    {
    var temp = this.First;
    while(temp.Next != null)
    temp=temp.Next;
    temp.Next = _node;

    }
    }


  3. Adding Search Method


    List.prototype.search=function(intData)
    {
    var temp = this.First;
    var node = null;
    while(temp !=null)
    {
    if(temp.Data == intData)
    {
    node= temp;
    break;
    }
    else
    temp = temp.Next;
    }
    return node;
    }


  4. Adding Display Method


    List.prototype.show=function()
    {
    var temp = this.First;
    while(temp != null)
    {
    alert(temp.Data);
    temp=temp.Next;
    }
    }


  5. Adding Edit Method


    List.prototype.edit=function(oldValue,newValue)
    {
    var node = this.search(oldValue);
    if(node !=null)
    node.Data =newValue;
    }


  6. Adding Delete Method


    List.prototype.remove=function(value)
    {
    debugger;
    //if first
    if(this.First.Data == value)
    {
    this.First = this.First.Next
    return value;
    }
    //else
    var temp = this.First.Next;
    var prev = this.First.Next;
    while(temp!=null)
    {
    if(temp.Data == value)
    {
    if(prev.Data == temp.Data)
    this.First.Next = temp.Next;
    else
    prev.Next=temp.Next;
    return;
    }
    else
    {
    prev = temp;
    temp = temp.Next;
    }
    }
    }


  7. Let's test the stuff



    //create data structure object
    var _list= new List();
    //add nodes
    var node = new LinkListNode();
    node.Data = 11;
    _list.addNode(node);

    node = new LinkListNode();
    node.Data = 33;
    _list.addNode(node);

    node = new LinkListNode();
    node.Data = 44;
    _list.addNode(node);

    node = new LinkListNode();
    node.Data = 22;
    _list.addNode(node);

    node = new LinkListNode();
    node.Data = 55;
    _list.addNode(node);

    _list.show();
    //test edit
    _list.edit(11,99);
    _list.show();
    //test remove
    _list.remove(22);
    _list.show();


Monday, January 5, 2009

DotNetNuke Code Snippet: Update user email


//update DNN User Email
string oldEmail = UserInfo.Email;
this.UserInfo.Email = txtEmail.Text;
UserController.UpdateUser(PortalId,this.UserInfo);
// Update User Email
MembershipUser oUser = Membership.GetUser(UserInfo.Username);
oUser.Email = txtEmail.Text;
Membership.UpdateUser(oUser);

//note: please assume you have a textbox with id txtEmail in your front end. you can
//take a static string email in place of txtEmail.Text

DotNetNuke Code Snippet: Get All Portal Tabs

//add following using derectives to your code file
//using DotNetNuke.Entities.Tabs;
//using System.Collections.Generic;
TabController tController = new TabController();
Dictionary<int,TabInfo> tabs = tController.GetTabsByPortal(PortalId);
IDictionaryEnumerator hs = tabs.GetEnumerator();
while (hs.MoveNext())
{
TabInfo tInfo = (TabInfo)hs.Value;
if (!tInfo.IsAdminTab && tInfo.IsVisible)
{
//TODO process tab operation from here
}
}

Popular Posts