-->

Friday, September 4, 2015

Example of bind hyperlink in Datalist ASP.NET C#

Introduction
In this article i will show you how to take hyperlink control in datalist control also you can say how to bind hyperlink control into datalist. I will show you example of bind hyperlink control into datalist.
Datalist introduction
The Datalist control is a data bound control that displays data by using templates. These templates define controls and HTML elements that should be displayed for an item. The Datalist control exists within the System.Web.UI.WebControl namespace.



Some steps for binding Hyperlink control in Datalist

Step-1: Create a DataBase Table with  following fields.


Step-2: Fill this field with following values 

DepartmentID           Name                 Description
1                                  IT                     This is first department Name
2                                  CS                    This is Second Department Name


Step-3 : Create Procedure for retrieving values.

Database.mdf-->Stored Procedures -->Right click -->Add new Stored Procedure

CREATE PROCEDURE GetDepartments
AS
SELECT DepartmentID ,Name ,Description From [Table] ;

RETURN 0

Step-4: Take  a webform in your project name as "Departmentlist.aspx"
Step-5:  Paste this code into your Department.aspx





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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DataList ID="DataList1" runat="server">
            <HeaderTemplate>
                Choose a Department
            </HeaderTemplate>
            <ItemTemplate>
                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl ='<%#Link .ToDepartment (Eval ("DepartmentID").ToString ()) %>'
                  Text ='<%# HttpUtility .HtmlEncode (Eval ("Name").ToString ()) %>' ToolTip ='<%# HttpUtility .HtmlEncode (Eval ("Description").ToString ()) %>'   >

                </asp:HyperLink>
            </ItemTemplate>
        </asp:DataList>
    <div>
    
    </div>
    </form>
</body>
</html>

Step-6: Paste this code into your codebehind file


using System;
using System.Data.SqlClient;
using System.Data;


public partial class Departmentlist : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection con = new SqlConnection();
        con.ConnectionString = @"Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True";
            con.Open ();
        SqlCommand cmd=new SqlCommand ();
        cmd.CommandText ="GetDepartments";
        cmd.CommandType =CommandType .StoredProcedure ;
        cmd.Connection =con;
        DataSet ds = new DataSet();
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        da.Fill(ds, "Department");
        DataList1.DataSource = ds;
        DataList1.DataBind();



    }
}

Step-7 Make a Link class for absolute url


using System;
using System.Web;

/// <summary>
/// Summary description for Link
/// </summary>
public class Link
{
    public static string BuildAbsolute(string relativeuri)
    {
        // get current uri
        Uri uri = HttpContext.Current.Request.Url;
        // build absolute path
        string app = HttpContext.Current.Request.ApplicationPath;
        if (!app.EndsWith("/"))
               
            app += "/";
        relativeuri = relativeuri.TrimStart('/');
        // return the absolute path
        return HttpUtility .UrlPathEncode (String .Format ("http://{0}:{1}{2}",uri .Host ,uri.Port ,app ));

 

    }
    public static string ToDepartment(string departmentId, string page)
    {
        if (page == "1")
     
            return BuildAbsolute(string.Format("catalog.aspx?DepartmentID={0}", departmentId));
        else
            return BuildAbsolute (string .Format ("catalog.aspx?DepartmentID={0}&Page={1}",departmentId,page ));
           

    }
    //generate a department url for the first page
    public static string ToDepartment(string departmentId)
    {
        return ToDepartment(departmentId, "1");
    }

 
}


Out Put 

Saturday, June 20, 2015

Dropdownlist with image in asp.net c#

If you want to make beautiful and attractive web application in asp.net then you think ahead. You can make each control attractive using some other technologies like JQuery, JavaScript etc. Today i am discussing with you on topic Dropdownlist. If you bind the list with simple text then your Dropdownlist not look beautiful but if you add some images with each item then your list becomes beautiful. Lets take a simple example of Dropdownlist with image.

So first of all design database table and imsert some data in it , I have a table , which is mentioned below.

Dropdownlist with image in asp.net c#



Source page

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Bind DropDownlist With Image</title>
<link href="style/dd.css" rel="stylesheet" />
<script src="Scripts/jquery-1.6.1.min.js"></script>
<script src="Scripts/jquery.dd.js"></script>
<script>
$(document).ready(function(){

try {
$("#DropDownList1").msDropDown();

} catch (e) {
alert(e.message);

}
})
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" Height="26px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Width="149px">

</asp:DropDownList>
    <br />
    </div>
    <asp:Label ID="Label1" runat="server"></asp:Label>
    </form>
</body>
</html>
In the above mentioned code we have two ".js" file and one css file, both are used to make the dropdownlist beautiful also insert the image with text.

Code Behind file
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Dropdownlistwithimage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!Page.IsPostBack)
        {
            Binddropdown();
            BindTitle();

        }

    }

    private void BindTitle()
    {
     
        if(DropDownList1!=null)
        {
            foreach (ListItem li in DropDownList1.Items)
            {
                li.Attributes["title"] = li.Value;
            }
        }
    }

    private void Binddropdown()
    {
        SqlConnection con = new SqlConnection();
        con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
        con.Open();
        SqlCommand cmd = new SqlCommand();
        cmd.CommandText = "select * from [country]";
        cmd.Connection = con;
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        DropDownList1.DataTextField = "CountryName";
        DropDownList1.DataValueField = "Countryimage";
        DropDownList1.DataSource = ds;
        DropDownList1.DataBind();


    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Label1.Text = DropDownList1.SelectedValue;
        BindTitle();
    }
}
After bind the Dropdownlist you have to access each item from the list by using DataBound event. Use foreach loop to access all item one by one from the list also apply tooltip on each item by the help of Attribute property. When you apply attribute in BindTitle( ) method on that time JQuery will apply on it so you see the image with text in Dropdownlist.

Download the code

Friday, June 19, 2015

How to access application setting tag of web.config file in asp.net

Today i am writing ado.net code in code behind file, On that time i notice that if i take my connection string in the web.config file then we can access it easily. But how? So i have search in msdn library to access the web.config file then i found ConfigurationManager class which is available in System.Configuration Namespace. Through this class we can get all elements of web.config file. Lets take a simple example.




Web.config file

<appSettings>
    <add key="jacob" value="My Name"/>
   
  </appSettings>

Source Code

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </div>
    <asp:Button ID="Button1" runat="server" Height="57px" OnClick="Button1_Click" Text="Get Data from Application Setting" Width="232px" />
    </form>
</body>
</html>

Code Behind Code
using System.Configuration;
 protected void Button1_Click(object sender, EventArgs e)
    {
        String getname = ConfigurationManager.AppSettings["jacob"].ToString();
        Label1.Text = getname;
    }

Here we access AppSettings By the configurationManager class. You can access all property or elements from web.config file by using this class. Now the simple syntax to access them.
ConfigurationManager.elementName

Wednesday, June 17, 2015

ToolTip on specific DropdownList item in asp.net c#

Today i am talking about tooltip, First of all i introduce you , what is tooltip? When our mouse cursor move over the object then appear a rectangle shape with text this things known as tooltip. When we work with particular item then easy set the tooltip on it. But when we work on collection then we put some ideas on it. Like first to access each item from the collection then apply tooltip on each accessed item. Today, i want to give a simple example on it. I have a database table with three columns, see below:


Database table(country table)

CREATE TABLE [dbo].[country] (
    [CountryId]    INT            IDENTITY (1, 1) NOT NULL,
    [CountryName]  NVARCHAR (MAX) NULL,
    [Countryimage] NVARCHAR (MAX) NULL,
    PRIMARY KEY CLUSTERED ([CountryId] ASC)
);

First to add some item in the table after then you have to access items. If you want to add items in the table by the help visual studio server explorer then do the following.

Right click on your table name --> Select show table data

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

<!DOCTYPE html>

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


</head>
<body>
    <form id="form1" runat="server">
    <div>
<asp:DropDownList ID="DropDownList1" runat="server"  Height="26px" OnDataBound="DropDownList1_DataBound" Width="142px" DataSourceID="SqlDataSource1" DataTextField="CountryName" DataValueField="CountryId"></asp:DropDownList>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [country]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

How to design above mentioned code. The answer is :Bind the DropdownList with the SqlDataSource also SqlDataSource Control connect with database table. The above mentioned code automatically generated by the visual studio.

Code Behind Code

protected void DropDownList1_DataBound(object sender, EventArgs e)
    {
        DropDownList ddl = sender as DropDownList;
        if (ddl != null)
        {
            foreach (ListItem li in ddl.Items)
            {
                li.Attributes["title"] = li.Text;

            }
        }
    }

After bind the Dropdownlist you have to access each item from the list by using DataBound event. Use foreach loop to access all item one by one from the list also apply tooltip on each item by the help of Attribute property.

Wednesday, May 13, 2015

Implementation details of online examination system in asp.net c#

According to my ASP.NET online examination project there are following implementation details, these are:
5.1 Implementation

Implementation of the project is the topics illustrated in the design prototype and the requirements stated in the analyses section.  In order to better illustrate what has been done pictorially, some screen shots illustrations will be presented. On the other hand related data utilizations in the project have been implemented  using   SQL Server 2008  for  data  storage  and  data  retrieval  purposes  for  database interfaces.
5.1.1 Screen implementation
Home page:
The  project  starts  with  an  initial  application  screen  of  "home  page"  where  main  menu  bar  and welcoming page is illustrated.

home  page

Login and registration:
Any user can view basic information on the site with an exception of utilization of the site but authenticated user can give the exam by the examination panel. First of all admin should register the student name in database. After successfully registration a student can login into the examination panel.

registration page of online examination system



During the registration we should always remember that email and name is the primary key so do not enter duplicate values in the database.

Candidate login page

 In the login page there are two types of information required to be selected or filled in; Email and user password. The Email and the password are defined by user with specified criteria. The restricted criterion is on the email which requires “@” symbol in between mail id. If wrong entry is typed then user will be alerted as "bad entry" message and then redirected to the registration page.  If all proper information entered then LOGIN can be submitted or CANCELED.


Examination panel:

 A registered student can give the exam by the examination panel. Before the exam, candidate have to select the subject name by the popup menu. In this project we have to provide 4 subject like GK,c++,Java and c#. Each subject contain 5 questions.  In The examination panel student can view one question at a time.  He/she faced total 5 question during the given time, if we applied the system in real time then all registered user can view different questions because questions appeared on the screen randomly.

 


Now, the above mentioned snap is related to subject which is selected by the candidate. After selected candidate can view the exam panel that is mentioned in the below snap.

exam panel


5.2 Description of the Application


5.2.1 System architecture:

In this application Client-Server architecture was used. In these architecture two computers programs interact with each other.One program is called client which makes a request from Server, and the other one is called as Server which provides response to the request. There is also a database which interacts with Server. ASP and database technology are used at server side, and html and cookies are used at the client side.

5.2.2 Software application used in the website
ASP: It has the server side script such as database connection and the session. ASP was used for database  connection, creating session, login and registration forms and some other pages. Mostly all pages are functioning with ASP, because they interact with database and server and that makes our site a dynamic website. It takes some information from forms to server, and some data from database to client, or it passes the values among pages.

IIS: Internet Information Services for Windows is used to host the website. It hosts the website locally under inetpub and root directory First, Windows 7 or  IIS was set up to host the online examination system website.


HTML/SHTML: It is a markup language that is used to describe web pages. In online examination system website html pages were used. To avoid repetition #include file was created for footer and header, and html pages were saved as shtml.


CSS: It defines the way how html pages are to be displayed. In online examination system website styles are saved in external .css file which makes it easy to change the appearance and the layout of all the pages just by editing one file.


SQL Server:  SQL Server  is the famous tool for creating database for large applications. In online examination system, it was used to create the tables such as questions, register, subject and etc


SQL: It is used to access and communicate with database server by manipulating the data.

PHOTOSHOP: For creating logo Adobe's famous tool Photoshop was used.




5.3 Hardware requirements

Hardware requirements of the implemented project can be classified under two terms. There would be back-end requirements which are publication of the online website from a server. The other important aspect  is  the  implementation  of  the  RDBMS  database  implementation.  In  our  case,  the  required database was SQL Server. Each design schema was converted into database table form through


Access. There was not much of hardware requirements to implement the project, it is a simply as having a web server to publish the project online. On the other hand, for the front-end end user purposes, they only need to have a system up-to-date internet connection with any proper browser to be able to do their transactions online. The required system is a Three-Tier Architecture. In this architecture, the data is stored onto a server is in interaction with end-users with a unit called client. So, this project hardware architecture is based on two-tier client-server based architecture.


© Copyright 2013 Computer Programming | All Right Reserved