Model Pop Up Using Jquery in ASP.NET and HTML
Description :- Today visual appearance will play vital role in the web application development. Most of the web developers chosen jquery for this. one of the very important excercise regarding Jquery
Code Behind Aspx side:
--------------- ------------<!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>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a.login-window').click(function () {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top': -popMargTop,
'margin-left': -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function () {
$('#mask , .login-popup').fadeOut(300, function () {
$('#mask').remove();
});
return false;
});
});
</script>
</head>
<body>
<a href="#login-box" class="login-window">Login / Sign In</a>
<div id="login-box" class="login-popup">
<a href="#" class="close">Close</a>
</div>
</body>
</html>
------------
Stylesheet.css:
----------------
#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
/* You can customize to your needs */
.login-popup{
display:none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}
img.btn_close { Position the close button
float: right;
margin: -28px -28px 0 0;
}
fieldset {
border:none;
}
form.signin .textbox label {
display:block;
padding-bottom:7px;
}
form.signin .textbox span {
display:block;
}
form.signin p, form.signin span {
color:#999;
font-size:11px;
line-height:18px;
}
form.signin .textbox input {
background:#666666;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
color:#fff;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font:13px Arial, Helvetica, sans-serif;
padding:6px 6px 4px;
width:200px;
}
form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
.button {
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
background: -o-linear-gradient(top, #f3f3f3, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
border-color:#000;
border-width:1px;
border-radius:4px 4px 4px 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color:#333;
cursor:pointer;
display:inline-block;
padding:6px 6px 4px;
margin-top:10px;
font:12px;
width:214px;
}
.button:hover { background:#ddd; }
-------------------------------
Note : if you are run this code at html page means remove tag "runat="server""
Output :-
Bind Controller Properties to DropDownlist
How to Bind Properties to One Dropdown
For Example do you want to Bind the Chart Types to one Drop Down Menu
The following Code Demonstrated for Bind the system type properties to one DropDown or any ListBox
protected override void OnLoad(EventArgs e)
{
//load the Graph Models
#region
base.OnLoad(e);
if (!IsPostBack)
{
DDLModels.DataSource = Enum.GetNames(typeof(SeriesChartType));
DDLModels.DataBind();
}
DataBind();
#endregion
}
-----------------------------------
For Example do you want to Bind the Chart Types to one Drop Down Menu
The following Code Demonstrated for Bind the system type properties to one DropDown or any ListBox
protected override void OnLoad(EventArgs e)
{
//load the Graph Models
#region
base.OnLoad(e);
if (!IsPostBack)
{
DDLModels.DataSource = Enum.GetNames(typeof(SeriesChartType));
DDLModels.DataBind();
}
DataBind();
#endregion
}
-----------------------------------
Webservice Returns a Response in the JSON Format
Ultimately A Webservice response always in Xml Type format only. now we can change that format XML To JSON Format By using JScript Serializers
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
using System.Data.Sql;
using System.Data;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using System.Collections;
using System.Text;
using System.Runtime.Serialization.Json;
using System.IO;
using System.Data;
using System.Xml.Serialization;
using System.Xml;
/// <summary>
/// Summary description for jsonservice
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class jsonservice : System.Web.Services.WebService {
public jsonservice () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string HelloWorld() {
return "Hello World";
}
[WebMethod(Description = "getting json format type two")]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string Getjsonformat()
{
SqlConnection conn = new SqlConnection(@"Data Source=PWHYD-123\SQLEXPRESS;Initial Catalog=sampledb1;Integrated Security=True");
conn.Open();
SqlCommand cmd = new SqlCommand("Select year,sales from graphs", conn);
SqlDataReader dr = cmd.ExecuteReader();
DataTable dt = new DataTable("graphs");
dt.Load(dr);
dr.Close();
conn.Close();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row = new Dictionary<string, object>();
foreach (DataRow datarow in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, datarow[col]);
}
rows.Add(row);
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
string jsonData = serializer.Serialize(rows);
return jsonData;
}
}
----------------Happy Coding With P.M@ruthi-------------------
Pass Values from One HTML Page to anothet HTML
I' M Demonstrated this example by using two basic html pages in the visual studio 2010 and one .Js File
All are very familiar to pass values by using "Querystring" , same thing i done by used plain HTML
if u pass the one html page to another page page , we are hardly able to maintain the state between the Html pages.
Example :- Two Html pages "A" and "B" ( Checkbox checked into "A" and move to "B" Html page)
again Come back to "A" Html Page means The checked always disabled
Cause :- State maintain error Between / among the Html Pages
<!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>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(go).click(function () {
if (document.getElementById("check1").checked = true) {
window.location.href = "HTMl2.htm?code=maruthi";
}
else {
window.location.href = "first.htm";
}
});
});
function check() {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i = 0; i < parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0) {
var key = parms[i].substring(0, pos);
var val = parms[i].substring(pos + 1);
}
if (val == "maruthi") {
document.getElementById("check1").checked = true;
}
}
}
</script>
</head>
<body onload="check();">
<input type="checkbox" id="check1">two?
<input type="checkbox" id="Checkbox1">one?
<input type="checkbox" id="Checkbox2">three?
<input type="checkbox" id="Checkbox3">four?
<input type="button" value="click me" id="btncl" onclick="m();" />
<a href="#" id="go">click</a>
</body>
</html>
--------------------------------------------------------------------------------------------------------
<!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>
<title>querystring</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(bck).click(function () {
window.location.href = "First.htm?code=maruthi&code2=pallamalli";
});
});
</script>
<script type="text/javascript">
var qsparam = new Array();
function qs() {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i = 0; i < parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0) {
var key = parms[i].substring(0, pos);
var val = parms[i].substring(pos + 1);
}
alert(val.toString());
}
}
</script>
</head>
<body>
<h1>hi</h1>
<a href="#" id="bck">back</a>
<input type="button" value="show string" onclick="qs();" />
</body>
</html>
