I want to show Components in a tabs , so first of all create few components. In this project we have three components, First View Component public class AllViewComponent : ViewComponent { private readonly UserManager<ApplicationUser> _userManager; public AllViewComponent(UserManager<ApplicationUser> userManager) { _userManager = userManager; } public async Task<IViewComponentResult> InvokeAsync() { List<StudentViewModel> allUsers = new List<StudentViewModel>(); var items = await _userManager.Users.ToListAsync(); foreach (var item in items) { allUsers.Add(new StudentViewModel {Id=item.Id, EnrollmentNo = item.EnrollmentNo, FatherName = item.FatherName, Name = item.Name, Age = item.Age, Birthdate = item.Birthdate, Address = item.Address, Gender = item.Gender, Email = item.Email }); }
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.
<!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
So first of all design database table and imsert some data in it , I have a table , which is mentioned below.
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
Comments
Post a Comment