Coding Tips

Oct 06

How To populate dropdownlist from array in javascript

<html>
<head>
<script>
var aMember = [
["one", "1", "company 1"],
["one", "11", "company 11"],
["one", "111", "company 111"],
["two", "2", "company 2"],
["two", "22", "company 22"],
["three", "3", "company 3"],
["three", "33", "company 33"]];

function selCompany(theSel){
  theForm = theSel.form;
  opt = theForm.companies.options;
  opt.length = 0;
  if(theSel.value=="") return;
  for(i=0;i<aMember.length;i++){
    if(aMember[i][0]==theSel.value){
      tValue = aMember[i][1];
      tName = aMember[i][2];
      for(j=0;j<opt.length;j++){
        if(opt[j].value==tValue) tValue="";
      }
      if(tValue>""){
        opt[opt.length] = new Option(tName, tValue);
      }
    }
  }
}
</script>
</head>
<body>
<form>
Select company
<select name="sel" onchange="selCompany(this);" >
<option value="">-Please select-</option>
<option value="one"> one </option>
<option value="two"> two </option>
<option value="three"> three </option>
</select>
&nbsp;&nbsp;&nbsp;
Companies:
<select name="companies">
</select>
</form>
</body>
</html>

Oct 06

How To Calculate ASP.Net text boxes value on Client Side

asp.net No Comments »

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ClientSideSum.aspx.cs" Inherits="ClientSideSum" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                </tr>
                <td>
                    First Number
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
                <tr>
                    <td>
                        Second Number</td>
                    <td>
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>
                        Third Number</td>
                    <td>
                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>
                        Fourth Number</td>
                    <td>
                        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>
                        Totial #</td>
                    <td>
                        <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;

public partial class ClientSideSum : System.Web.UI.Page
{
    private void RegisterTotalScript()
    {
        ClientScript.RegisterArrayDeclaration("textBoxIDs", "'" + TextBox1.ClientID + "'");
        ClientScript.RegisterArrayDeclaration("textBoxIDs", "'" + TextBox2.ClientID + "'");
        ClientScript.RegisterArrayDeclaration("textBoxIDs", "'" + TextBox3.ClientID + "'");
        ClientScript.RegisterArrayDeclaration("textBoxIDs", "'" + TextBox4.ClientID + "'");

        string script = @"
            function CalculateTotal(totalTextBoxID)
            {
                var runningTotal = 0;
                for (index = 0; index < textBoxIDs.length; index++)
                {
                    var value = parseFloat(document.getElementById(textBoxIDs[index]).value);
                    if (!isNaN(value))
                        runningTotal += value;
                }
                document.getElementById(totalTextBoxID).value = runningTotal;
            }";

        if (!ClientScript.IsClientScriptBlockRegistered("totalScript"))
            ClientScript.RegisterClientScriptBlock(typeof(string), "totalScript", script, true);

        TextBox1.Attributes.Add("onchange", "CalculateTotal('" + TextBox5.ClientID + "');");
        TextBox2.Attributes.Add("onchange", "CalculateTotal('" + TextBox5.ClientID + "');");
        TextBox3.Attributes.Add("onchange", "CalculateTotal('" + TextBox5.ClientID + "');");
        TextBox4.Attributes.Add("onchange", "CalculateTotal('" + TextBox5.ClientID + "');");
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        RegisterTotalScript();
    }
}

Oct 06

How To Bind Generic List to ASP.NET DropDownList Example

asp.net No Comments »

public class TagDetails
{
  private int tagID;
  public int TagID
  {
      get { return tagID; }
  }

  private string tagName;
  public string TagName
  {
      get { return tagName; }
      set { tagName = value; }
  }
  public TagDetails(int tagID, string tagName)
  {
      this.tagID = tagID;
      this.tagName = tagName;
  }
}

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: Consolas, “Courier New”, Courier, Monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The DropDownList control on the .ASPX page looked like this.

<asp:DropDownList ID="ddlTagList" runat="server"/>

And for this class you had a method to return all tags called GetTags.
 How would you bind it to an ASP.NET DropDownList control? As such.

List<TagDetails> tags = new List<TagDetails>();
tags = tagDB.GetTags();
ddlTagList.DataSource = tags;
ddlTagList.DataTextField = "TagName";
ddlTagList.DataValueField = "TagID";
ddlTagList.DataBind();

Oct 06

Formatting For Javascript

javascript No Comments »

Certain characters in your data will cause Javascript to crash. Special characters need to be handled with your server-side code. Below is a C# function that I create to do just such task.

 .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: Consolas, “Courier New”, Courier, Monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

protected string FormatForJS(object input) {
  string data = input.ToString();
  // cast the input to a string 
  data = data.Trim();
  // replace those characters that will crash JAVASCRIPT 
  data = data.Replace("'", "\\'");
  data = data.Replace("\n", "");
  data = data.Replace("\r", "");
  return data;
}

Oct 06

Redirecting User To Secure Connection

asp.net No Comments »

if (!Request.IsSecureConnection)
{
    // send user to SSL 
    string serverName =HttpUtility.UrlEncode(Request.ServerVariables["SERVER_NAME"]);
    string filePath = Request.FilePath;
    Response.Redirect("https://" + serverName + filePath);
}

Oct 06

How To Add Item to DropDownList After DataBind

asp.net No Comments »

We often want the first option in a drop-down list to not default to the first item
in the list. Instead we would prefer the option of adding a --Select Item-- at the
top of the asp:DropDownList. After the DataBind, execute an Item.Insert.

ddlAuthor.DataTextField = "FullName";
ddlAuthor.DataValueField = "AuthorID";
ddlAuthor.DataSource = authorDB.GetAuthors();
ddlAuthor.DataBind();
ddlAuthor.Items.Insert(0, "-- Select Author --");

Oct 06

Adding File Inputs with JavaScript and Upload Multiple Files To Server (ASP.NET)

asp.net No Comments »

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultipleUploads.aspx.cs"
   Inherits="MultipleUploads" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Untitled Page</title>
</head>
<body>
   <form id="form1" runat="server">
       <div>
           <p id="upload-area">
               <input id="File1" type="file" runat="server" size="60" />
           </p>
           <input id="AddFile" type="button" value="Add file" onclick="addFileUploadBox()" />
           <p>
               <asp:Button ID="btnSubmit" runat="server" Text="Upload Now" OnClick="btnSubmit_Click" /></p>
           <span id="Span1" runat="server" />
       </div>
   </form>

   <script type="text/javascript">
function addFileUploadBox()
{
    if (!document.getElementById || !document.createElement)
        return false;

    var uploadArea = document.getElementById ("upload-area");

    if (!uploadArea)
        return;

    var newLine = document.createElement ("br");
    uploadArea.appendChild (newLine);

    var newUploadBox = document.createElement ("input");

    // Set up the new input for file uploads
    newUploadBox.type = "file";
    newUploadBox.size = "60";

    // The new box needs a name and an ID
    if (!addFileUploadBox.lastAssignedId)
        addFileUploadBox.lastAssignedId = 100;

    newUploadBox.setAttribute ("id", "dynamic" + addFileUploadBox.lastAssignedId);
    newUploadBox.setAttribute ("name", "dynamic:" + addFileUploadBox.lastAssignedId);
    uploadArea.appendChild (newUploadBox);
    addFileUploadBox.lastAssignedId++;
}
    </script>

</body>
</html>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: Consolas, “Courier New”, Courier, Monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

using System;
using System.Data;
using System.Configuration;
using System.Collections;
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.IO;

public partial class MultipleUploads : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {

       String UpPath;
       UpPath = "C:\\UploadedUserFiles";

       if (!Directory.Exists(UpPath))
       {
           Directory.CreateDirectory("C:\\UploadedUserFiles\\");
       }
   }
   protected void btnSubmit_Click(object sender, EventArgs e)
   {
       HttpFileCollection uploads = HttpContext.Current.Request.Files;
       for (int i = 0; i < uploads.Count; i++)
       {
           HttpPostedFile upload = uploads[i];

           if (upload.ContentLength == 0)
               continue;

           string c = System.IO.Path.GetFileName(upload.FileName); // We don't need the path, just the name.

           try
           {
               upload.SaveAs("C:\\UploadedUserFiles\\" + c);
               Span1.InnerHtml = "Upload(s) Successful.";
           }
           catch (Exception Exp)
           {
               Span1.InnerHtml = "Upload(s) FAILED.";
           }
       }
   }
}

Oct 06

How To Redirect User To Another Page using JavaScript and Access The URL Property In Code Behind

javascript No Comments »

when you redirect your page the Request collection is undefined because you have
not requested anything.You can catch your referrer from javascript and the other
 way is to use Querystring in code behind.
/>.csharpcode, .csharpcode pre<br />{<br /> font-size: small;<br /> color: black;<br /> font-family: Consolas, "Courier New", Courier, Monospace;<br /> background-color: #ffffff;<br /> /*white-space: pre;*/<br />}<br /><br />.csharpcode pre { margin: 0em; }<br /><br />.csharpcode .rem { color: #008000; }<br /><br />.csharpcode .kwrd { color: #0000ff; }<br /><br />.csharpcode .str { color: #006080; }<br /><br />.csharpcode .op { color: #0000c0; }<br /><br />.csharpcode .preproc { color: #cc6633; }<br /><br />.csharpcode .asp { background-color: #ffff00; }<br /><br />.csharpcode .html { color: #800000; }<br /><br />.csharpcode .attr { color: #ff0000; }<br /><br />.csharpcode .alt<br />{<br /> background-color: #f4f4f4;<br /> width: 100%;<br /> margin: 0em;<br />}<br /><br />.csharpcode .lnum { color: #606060; }<br />
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavascriptRedirection.aspx.cs" Inherits="JavascriptRedirection" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
 function Redirect(sTargetPageURL)
  {
          window.location.href = sTargetPageURL + "?previousPage=" +document.URL;
   }

 </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" runat="server" value="Redirect" onclick="Redirect('Redirect.aspx');" />
</div>
</form>
</body>
</html>

Oct 06

How To Create a page able DataGrid within a Repeater

asp.net No Comments »

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewIndideRepeater.aspx.cs"
Inherits="GridViewIndideRepeater" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
  <div>
      <asp:Repeater ID="ItemsList" OnItemDataBound="Item_Bound" runat="server">
          <HeaderTemplate>
              <table>
                  <caption>
                      List of Categories
                  </caption>
          </HeaderTemplate>
          <ItemTemplate>
              <tr>
                  <td>
                      <%# DataBinder.Eval(Container.DataItem, "Category") %>
                  </td>
              </tr>
              <tr>
                  <td>
                      <asp:DataGrid ID="dataGrid1" runat="server" BorderColor="black" GridLines="Both"
                          HeaderStyle-BackColor="#aaaadd" PagerStyle-Mode="NextPrev"
                          PagerStyle-HorizontalAlign="Center"
                          PagerStyle-CssClass="GridPager" PagerStyle-Position="Bottom"
                          PagerStyle-PageButtonCount="25"
                          PagerStyle-NextPageText="next" PagerStyle-PrevPageText="Prev"
                          PagerStyle-BackColor="gainsboro"
                          OnPageIndexChanged="ChangeGridPage" PageSize="5"
                          AllowPaging="True"
                          AutoGenerateColumns="false">
                          <Columns>
                              <asp:BoundColumn Visible="False" ReadOnly="true" DataField="ID" />
                              <asp:BoundColumn HeaderText="Qty" ReadOnly="true" DataField="Qty" />
                              <asp:BoundColumn HeaderText="Description" ReadOnly="true" DataField="Description" />
                              <asp:BoundColumn HeaderText="Price" DataField="Price" DataFormatString="{0:c}">
                                  <ItemStyle HorizontalAlign="right"></ItemStyle>
                              </asp:BoundColumn>
                          </Columns>
                      </asp:DataGrid>
                  </td>
              </tr>
          </ItemTemplate>
          <FooterTemplate>
              </table>
          </FooterTemplate>
      </asp:Repeater>
  </div>
</form>
</body>
</html>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: Consolas, “Courier New”, Courier, Monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;

public partial class GridViewIndideRepeater : System.Web.UI.Page
{

   public ICollection CreateDataSource()
   {
       // Create sample data for the DataList control.
       DataTable dt = new DataTable();
       DataRow dr;
       // Define the columns of the table.
       dt.Columns.Add(new DataColumn("ID", typeof(Int32)));
       dt.Columns.Add(new DataColumn("Category", typeof(string)));
       // Populate the table with sample values.
       int i;
       for (i = 1; i <= 5; i++)
       {

           dr = dt.NewRow();
           dr[0] = i;
           dr[1] = "Category " + i.ToString();
           dt.Rows.Add(dr);

       }

       DataView dv = new DataView(dt);
       return dv;

   }

   public DataTable CreateDGDataSource()
   {
       // Create sample data for the DataList control.
       DataTable dt = new DataTable();
       DataRow dr;
       int i;
       int y;
       // Define the columns of the table.
       dt.Columns.Add(new DataColumn("ID", typeof(int)));
       dt.Columns.Add(new DataColumn("Qty", typeof(int)));
       dt.Columns.Add(new DataColumn("Price", typeof(int)));
       dt.Columns.Add(new DataColumn("Description", typeof(string)));
       //Make some rows and put some sample data in
       for (y = 1; y <= 5; y++)
       {
           for (i = 1; i <= 10; i++)
           {
               dr = dt.NewRow();
               dr[0] = y;
               dr[1] = i * y;
               dr[2] = i * y;
               dr[3] = "Item " + y + "_" + i;
               //add the row to the datatable
               dt.Rows.Add(dr);
           }
       }

       return dt;
   }

   public ICollection CreateDGDataSource(int CategoryID)
   {
       DataView dv = new DataView(CreateDGDataSource(), "ID=" + CategoryID, null,
           DataViewRowState.CurrentRows);
       return dv;

   }

   public void Page_Load(object sender, EventArgs e)
   {

       // Load sample data only once, when the page is first loaded.
       if (!IsPostBack)
       {

           ItemsList.DataSource = CreateDataSource();
           ItemsList.DataBind();

       }

   }
   public void BindDG(DataGrid dg, int CategoryID)
   {

       dg.DataSource = CreateDGDataSource(CategoryID);
       dg.DataBind();
   }
   public void ChangeGridPage(object sender, DataGridPageChangedEventArgs objArgs)
   {
       int CategoryID = int.Parse(((DataGrid)sender).Items[0].Cells[0].Text);
       ((DataGrid)sender).CurrentPageIndex = objArgs.NewPageIndex;
       BindDG((DataGrid)sender, CategoryID);
   }

   public void Item_Bound(object sender, RepeaterItemEventArgs e)
   {

       if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)
       {

           // Retrieve the Label control in the current DataListItem.
           DataGrid dg = (DataGrid)e.Item.FindControl("DataGrid1");
           if (dg == null)
           {
               Response.Write("DataGrid not found");
           }
           else
           {
               object CategoryID = ((DataRowView)((RepeaterItem)e.Item).DataItem)["ID"];
               dg.DataSource = CreateDGDataSource((int)CategoryID);
               dg.DataBind();
           }

       }

   }

}

Oct 06

How To Create TextBox Dynamically using Javascript and Read Control Value In Code Behind

asp.net No Comments »

Step1.Create an asp.net application with 2 Button  and a GridViewas shown below.

  
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicTextboxJavascript.aspx.cs"
  Inherits="DynamicTextboxJavascript" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

  <script type="text/javascript">
function addElement() {
    var ni = document.getElementById('myDiv');
    var numi = document.getElementById('theValue');
    var num = (document.getElementById('theValue').value -1)+2;
    numi.value = num;
    var newdiv = document.createElement('div');
    var divIdName = 'my'+num+'Div';
    newdiv.setAttribute('id',divIdName);
    newdiv.innerHTML = '<input type="text"  name="TextBox'+num+'" value="TextBox'+num+'" >';
    ni.appendChild(newdiv);
  } 

  </script>

  <title>Untitled Page</title>
</head>
<body>
  <form id="form1" runat="server">
      <asp:GridView ID="GridView1" runat="server">
      </asp:GridView>
      <div id="myDiv">
      </div>
      <input type="button" id="btnOfficial" value="Add Another TextBox" onclick="addElement();" />
      <input type="hidden" value="1" id="theValue" runat="server" />
      <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Read" />
  </form>
</body>
</html>

Step 2: Add the following code behind.


using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;

public partial class DynamicTextboxJavascript : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnSave_Click(object sender, EventArgs e)
{

     ArrayList alForm = new ArrayList();
        //Because my textbox id is started
       // with 2 like(TextBox2,TextBox3.....
        for (int i = 2; i< Request.Form.Count - 2;i++)
        {
            string strId = "TextBox" + i.ToString();
            string strValue = Request.Form[strId].ToString();
            alForm.Add(strValue);
            strValue = "";

     }
      //Uncomment this line and test.
    //foreach (string x in Request.Form)
   //{

    //   string strValue = Request.Form[x].ToString();
     //  alForm.Add(strValue);

   //}
  GridView1.DataSource = alForm;
  GridView1.DataBind();

}
}

Coding Tips

Sponsors

Links

Pages

Categories

Spam Blocked

How To populate dropdownlist from array in javascript

How To Calculate ASP.Net text boxes value on Client Side

How To Bind Generic List to ASP.NET DropDownList Example

Formatting For Javascript

Redirecting User To Secure Connection

How To Add Item to DropDownList After DataBind

Adding File Inputs with JavaScript and Upload Multiple Files To Server (ASP.NET)

How To Redirect User To Another Page using JavaScript and Access The URL Property In Code Behind

How To Create a page able DataGrid within a Repeater

How To Create TextBox Dynamically using Javascript and Read Control Value In Code Behind