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 }); }
In this article, I will show you, how to add checkBoxList in DropDownList as item. I mean to say when you drop it then display item in the form of CheckBox list. You can select multiple items from CheckBox list. Selected Items show in the DropDownList header. If you want to design this types of DropDownList then add these files into your head section of page. By using these files, we can convert our ListBox into DropDownList with CheckBox Item. I will Give you complete example of Bootstrap Dropdown Menu.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script>
$(function () {
$('[id*=list1]').multiselect({
includeSelectAllOption:true
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="list1" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Apple" Value="1" />
<asp:ListItem Text="mango" Value="2" />
<asp:ListItem Text="Grapes" Value="3" />
<asp:ListItem Text="Orange" Value="4" />
<asp:ListItem Text="Pea" Value="5" />
</asp:ListBox>
<br />
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="GetItem" />
</form>
</body>
</html>
Code Behind File
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default10 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
string msg = string.Empty;
foreach (ListItem item in list1.Items)
{
if (item.Selected)
{
msg += item.Text + " " + item.Value + "\\n";
}
}
ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + msg + "');", true);
}
}
Comments
Post a Comment