Assuming FCK Editor Plugin is installed in your application.

In controller we need to write the following code to make it work:

Considering the category we have this as usual

active_scaffold :category do |config|

config.label = “Category” # Display page name

config.columns = [:name, :rank, :description] # all fields are taken

list.columns.exclude :description #exclude description column in list

end

In Category_Helper.rb we need to add the following code

#description field is shown in FCK editor format

def description_form_column(record, input_name)

fckeditor_textarea( :record, :description, :toolbarSet => ‘Simple’, :name=> input_name, :width => “800px”, :height => “200px” )

end

#description text is displayed in rich format

def description_column(record)

sanitize(record.description)

end

and we need to copy the “_create_form.rhtml” & “_update_form.rhtml” from ..\vendor\plugins\active_scaffold\frontends\default\views to Views/Category and edit _create_form.rhtml by adding following code to it

Instead of <%= submit_tag as_(‘Create’), :class => “submit” %>

we add following code

<input type=“submit” value=“Create” class=“submit”

onClick=“var oEditor = FCKeditorAPI.GetInstance(‘record_<%=@record.id%>_<%=’description’%>_editor’);

document.getElementById(‘record_<%=@record.id%>_<%=’description’%>_editor’).value = oEditor.GetXHTML();” />

and the same in _update_form.rhtml just replacing the value “Create” to “Update”

and your code will be working fine.

Assuming File Column Plugin is installed in your application.

In controller we need to write the following code to make it work:

Considering there is a field called Product_Image in product

active_scaffold :product do |config|

config.label = “Product Page”

config.columns = [:product_name, :product_description, :product_image]

config.create.multipart = true

config.update.multipart = true

config.columns[:product_image].label = “Product Image”

end

Its not yet done we need to do few coding in helper and model also

In Product_Helper.rb we need to add the following code

def product_image_form_column(record, input_name)

file_column_field ‘record’, :product_image, nkeypress=>“return numbersonly(event, false)”

end

#onkeypress event is used to advoid typing characters in file field

def product_image_column(record)

image_tag url_for_file_column(record, “product_image“) if record.product_image

end

and In Product_Image.rb we need to write a single line code

file_column :product_image

Its Done and when you upload a image it will create that image in a folder named by the Product_id in public/Product_images and will insert the image name in product_image product table

In controller we need to write the following code to make it work:

Considering the category we have

active_scaffold :category do |config|

config.label = “Category” # Display page name

config.columns = [:name, :rank, :description, :products]

config.columns[:name].label = “Some Name”

update.columns.exclude :rank # exclude rank column during edit

# Search the list by name

config.columns[:name].search_sql = “name”

config.search.columns << :name

# Search the list by product name

config.columns[:products].search_sql = “products.name”

config.search.columns << :products

end

We can search both the parent and child i.e Category and Product names in the same page.

Example :- Removing create, edit or delete links from your page and add your own links

Also add nested links if this model is related to other model. Example there is another model name as Product which is related to Category model say category has many products and product belongs to Category.

For that we need to do the following

Now in controller we need to write the following code:

active_scaffold :category do |config|

config.label = “Category” # Display page name

config.columns = [:name, :rank, :description, :products]

config.columns[:name].label = “Some Name” # customize column name

update.columns.exclude :rank # exclude rank column during edit

list.columns.exclude :description #exclude description column in list

#this is a extra link which is applicable for every row if type record and if type is table then it is for all records

config.action_links.add “cat”,:label=>“Categories”,:type=>:record

#this is a link to products where you can list add edit delete and associate products to category

config.nested.add_link “Add Products”, [:products]

end

def cat

#your required code

end

Considering product model we have fields like product_name, product_description, category_id

active_scaffold :product do |config|

config.label = “Product Page” # Display page name

# Category_id not needed by default it will take while adding

config.columns = [:product_name, :product_description]

config.columns[:product_name].label = “Product Name”

list.columns.exclude :product_description

end

and we need to add the required code in Product_Helper.rb as we did in category_helper.rb

and also we can add our own code if required during update and create by copying the code from …\vendor\plugins\active_scaffold\lib\actions to your controller and edit it as required

Now in your page you can add and associate products to category.

Consider there is a model named as “category” with fields like name, rank and description and we are now integrating this with Activescaffold

Now in controller we need to write the following code:

active_scaffold :category do |config|

config.label = “Category” # Display page name

config.columns = [:name, :rank, :description] # all fields are taken

config.columns[:name].label = “Some Name” # customize column name

update.columns.exclude :rank # exclude rank column during edit

list.columns.exclude :description #exclude description column in list

end

Now in Category_helper.rb we need to write the following code to display the field format Ex:- Textbox, Dropdown , checkbox etc.

# Textbox to enter name

def name_form_column(record,input_name)

textbox :record, :name, :name=> input_name

end

# Label to display name

def name_column(record)

record.name

end

# Textarea to enter the description

def description_form_column(record,input_name)

textarea :record, :name, :name=> input_name

end

# Label to display description

def description_column(record)

record.description

end

# Dropdown to select rank

def rank_form_column(record,input_name)

select(:record,:pricing,[1,2,3,4,5,6,7,8,9,10],:name=> input_name)

end

# Label to display rank

def rank_column(record)

record.rank

end

That’s it your code will work fine. No rhtml code is required.

In ASP.Net 2.0 we use different Validation controls from Toolbox for validations (Just Drag & Drop, No need of writing code in C#). But in Case of C# windows application this feature is not available so we use Error Provider control to do any type of validation.

For example:-

If we take a Employee data…

1. Name (Text)
2. Age (Integer)
3. Salary (Double)

Form looks like

In ADD button click you need to write the following code.

private void ADD_Click(object sender, EventArgs e)

{

  if (is_validate())

  {

    errorProvider1.Clear();

    // Write Coding to add into database

    MessageBox.Show(“Data Successfully Added”);

  }

}

private bool is_validate()

{

  bool no_error = true;

  if (txtname.Text == string.Empty)

  {

    errorProvider1.SetError(txtname, “Text Missing”);

    no_error = false;

  }

  else

  {

    // Clear all Error Messages

    try

    {

      int i = Convert.ToInt32(txtage.Text);

    }

    catch

    {

      errorProvider1.Clear(); // Clear all Error Messages

      errorProvider1.SetError(txtage, “Enter Valid Age”);

      return false;

    }

    try

    {

      double j = Convert.ToDouble(txtsalary.Text);

    }

    catch

    {

      errorProvider1.Clear(); // Clear all Error Messages

      errorProvider1.SetError(txtsalary, “Enter Valid Salary”);

      return false;

    }

   }

   return no_error;

}

Here one Error Provider Control can be used for multiple fields.

That’s it. It’s all done. Its Very Simple isn’t it??

Dynamically

It is very easy to create HTML controls before running a Web Page. Just Drag and Drop from ToolBox or write HTML code or ASP code for that Web Page (.aspx). But people think that generating HTML controls during runtime is difficult. But it’s quite easy.

There are many methods of generating controls during runtime.

Here is the one.

First thing is that you need to add a Panel by drag and drop it from the toolbox.

After that you need to write the C# code in Page Load event or button event as follows :

Panel1.Controls.Add(new LiteralControl(“<table><tr>”));

Panel1.Controls.Add(new LiteralControl(“<td colspan=2 align=center    valign=middle >”));

Panel1.Controls.Add(new LiteralControl(“<table><tr><td>”));

Panel1.Controls.Add(new LiteralControl(“<input id=’Text1′ type=’text’ value=’Ganesh Mohan’ />”));

Panel1.Controls.Add(new LiteralControl(“</td><td>”));

Panel1.Controls.Add(new LiteralControl(“<a href=http://ganeshmohan.wordpress.com>”));

Panel1.Controls.Add(new LiteralControl(“Hi This is Ganesh”));

Panel1.Controls.Add(new LiteralControl(“</a>”));

Panel1.Controls.Add(new LiteralControl(“</td></tr></table>”));

That’s it. Its all Done. Its So Simple isn’t it!

Whenever we want to start any project the first thing we think about the User Roles and Login. Generally there will be mainly two User Roles

a)    Administrator User

b)    Client User

In VS 2005 its very simple to design a Login Page. Because there is no need of bringing textboxes, labels & buttons together to design a login page and writing code in that button click event. The VS 2005 have a readymade tool in its toolbox called as “Login”.

You just have to Drag & Drop that on your .aspx page

After drag & drop you can change that to your desired design by clicking on Auto Format

Then we need to go to the ‘Properties’ of that Login Control and click on Events.

There we can see a event called Authenticate, Double click on it.

Once that is done. You have to write the C# code in that event

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void Login1_Authenticate(object sender, AuthenticateEventArgs e)

    {

        try

        {

            string uname = Login1.UserName.Trim(); //Get the username from the control

            string password = Login1.Password.Trim(); //get the Password from the control

            bool flag = AuthenticateUser(uname, password);

            if (flag == true)

            {

                e.Authenticated = true;

                Login1.DestinationPageUrl = “After_Login.aspx”;

            }

            else

                e.Authenticated = false;

        }

        catch (Exception)

        {

            e.Authenticated = false;

        }

    }

    private bool AuthenticateUser(string uname, string password)

    {

       bool bflag = false;

 string connString = “Server=localhost;Database=mproi;Uid=sa;Pwd=;”;

string strSQL = “select * from tbl_user where user_name =’” +   uname + “‘ AND user_password =’” + password + “‘”;

       DataSet userDS = new DataSet();

       SqlConnection m_conn;

       SqlDataAdapter m_dataAdapter;

       SqlCommand m_Command;

       try

       {

           m_conn = new SqlConnection(connString);

           m_conn.Open();

           m_dataAdapter = new SqlDataAdapter(strSQL, m_conn);

           m_dataAdapter.Fill(userDS);

           m_conn.Close();

       }

       catch (Exception ex)

       {

           userDS = null;

       }

       if (userDS != null)

       {

           if(userDS.Tables[0].Rows.Count > 0)

             bflag = true;

       }

       return bflag;

    }

}

That’s it. Its all Done. Your Login Page is ready. Its So Simple isn’t it!

ASP.Net, C# and Javascript Count Down Timer

ASP.Net Code

While displaying a count down timer on your Web Page you need to do following things :

On the web page you need to add 7 controls.

In that one is HTML Text box which displays the count down time

<input type=”text” readonly =”true” size=”8″ id=”counter” style=”text-align:center; font-size:x-large; font-weight:bold; color:Red;” />

and rest of six are hidden fields in which three of them are HTML controls and other are ASP controls looks loke this

<input type=”hidden” size=”8″ id=”HidHours” value=”<%=HidH.Value%>“/>

<input type=”hidden” size=”8″ id=”HidMinutes” value=”<%=HidM.Value%>“/>

<input type=”hidden” size=”8″ id=”HidSeconds” value=”<%=HidS.Value%>“/>

<asp:HiddenField ID=”HidH” runat=”server” Value=”0″ />

<asp:HiddenField ID=”HidM” runat=”server” Value=”0″ />

<asp:HiddenField ID=”HidS” runat=”server” Value=”0″ />

Now you need to write the main JavaScript part which displays this count down time

<script>

var hours=document.getElementById(‘HidHours’).value;

var minutes=document.getElementById(‘HidMinutes’).value;

var seconds=document.getElementById(‘HidSeconds’).value;

function

display()

{

if (seconds<=0)

{

if ((hours==0)&&(minutes==0))

seconds=0;

else

{

seconds=60;

minutes-=1;

}

}

if (minutes<=0)

{

if ((hours<0)&&(minutes<0))

{

hours = minutes = seconds = 0;

}

else

{

if ((hours==0)&&(minutes==0))

hours=minutes=0;

if ((hours>0)&&(minutes<0))

{

minutes=59;

hours-=1;

}

}

}

if ((minutes<=-1)||(hours<=-1))

{

if (hours<=-1)

{

minutes=0;

hours+=1;

}

else

minutes-=1;

seconds=0;

minutes+=1;

}

else

if (seconds>0)

seconds-=1;

if (seconds <= 9 && seconds.toString().length < 2)
seconds = “0″+seconds;

if (minutes <= 9 && minutes.toString().length < 2)
minutes = “0″+minutes;

if (hours <= 9  && hours.toString().length < 2)
hours = “0″+hours;

document.getElementById(‘counter’).value=hours+“:”+minutes+“:”+seconds;

setTimeout(“display()”,1000);

}

display();

</script>

The Main Concept Over Here is the Time from where the count down begins that time you need to pass into ASP Hidden fields whose id are HidH, HidM and HidS which defines hours, minutes and seconds respectively. Now these values are passed to HTML Hidden Controls whose id are  HidHours, HidMinutes and HidSeconds since the values of ASP controls value’s can not be passed directly to JavaScript code. We kept HTML controls as bridge between ASP controls Value’s and JavaScript. and Now Javascript function display() is called recursively until hours, minutes and seconds becomes zero. Once it is zero you can redirect to any page you want

C# Code

TimeSpan ts;

HidH.Value = Convert.ToString(ts.Hours);

HidM.Value = Convert.ToString(ts.Minutes);

HidS.Value = Convert.ToString(ts.Seconds);

click here : http://groups.google.co.in/group/dotnethelp2008/web/count-down-timer-asp-net-javascript-and-c?hl=en&msg=ns