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 show details of the grid view's row on modal popup. Before doing this article, I will show details of row in second page. You can say that all information of particular data shown on modal popup. Lets take an example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GRIDVIEWDETAILS.aspx.cs" Inherits="GRIDVIEWDETAILS" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function popup(idn,un,ps,em)
{
$("#userid").text(idn);
$("#usern").text(un);
$("#pwd").text(ps);
$("#eml").text(em);
$("#popupdiv").dialog({
title: "Show modal popup window",
width: 350,
height: 250,
modal: true,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
})
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="popupdiv" title="JQuery Modal" style="display:none">
id:<label id="userid"></label><br />
userName :<label id="usern"></label><br />
Password : <label id="pwd"></label><br />
Email : <label id="eml"></label>
</div>
<asp:GridView AutoGenerateColumns="false" ID="g1" runat="server">
<Columns>
<asp:BoundField DataField="Id" HeaderText="ID" />
<asp:BoundField DataField="username" HeaderText="UserName" />
<asp:BoundField DataField="Password" HeaderText="Password" />
<asp:BoundField DataField="email" HeaderText="Email" />
<asp:TemplateField>
<ItemTemplate>
<a href="#" onclick='popup("<%# Eval("Id") %>","<%# Eval("username") %>","<%# Eval("Password") %>","<%# Eval("email") %>")'>Check</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GRIDVIEWDETAILS.aspx.cs" Inherits="GRIDVIEWDETAILS" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function popup(idn,un,ps,em)
{
$("#userid").text(idn);
$("#usern").text(un);
$("#pwd").text(ps);
$("#eml").text(em);
$("#popupdiv").dialog({
title: "Show modal popup window",
width: 350,
height: 250,
modal: true,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
})
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="popupdiv" title="JQuery Modal" style="display:none">
id:<label id="userid"></label><br />
userName :<label id="usern"></label><br />
Password : <label id="pwd"></label><br />
Email : <label id="eml"></label>
</div>
<asp:GridView AutoGenerateColumns="false" ID="g1" runat="server">
<Columns>
<asp:BoundField DataField="Id" HeaderText="ID" />
<asp:BoundField DataField="username" HeaderText="UserName" />
<asp:BoundField DataField="Password" HeaderText="Password" />
<asp:BoundField DataField="email" HeaderText="Email" />
<asp:TemplateField>
<ItemTemplate>
<a href="#" onclick='popup("<%# Eval("Id") %>","<%# Eval("username") %>","<%# Eval("Password") %>","<%# Eval("email") %>")'>Check</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
According to mentioned code, we have a grid view with 4 columns and one hyperlink column. Hyperlink column contains four parameters. When we click on it then all these are pass into JavaScript function. In this function, generate modal popdialog by using dialog method.
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class GRIDVIEWDETAILS : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
SqlConnection con = new SqlConnection();
con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionStringtr"].ToString();
con.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "Select * from [user_table]";
cmd.Connection = con;
SqlDataReader rd = cmd.ExecuteReader();
g1.DataSource = rd;
g1.DataBind();
}
}
}
Code generate the following output:
Comments
Post a Comment