I'm trying to follow this example. To export an HTML table to MS Excel format using jQuery.
Here's my .aspx:
<head runat="server">
<title></title>
<script src="Scripts/jQuery.1.8.3.js" type="text/javascript"></script>
<script src="Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Table ID="tbl" runat="server">
</asp:Table>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
</div>
</form>
</body>
The .js (JScript2.js):
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $('#tbl').html());
e.preventDefault();
});
... And the codebehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class JQuery_Export_To_Excel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
TableRow tr = new TableRow();
TableCell tc = new TableCell();
tc.Text = "AAA";
tr.Cells.Add(tc);
tc = new TableCell();
tc.Text = "BBB";
tr.Cells.Add(tc);
tbl.Rows.Add(tr);
}
}
Generated page source:
<!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 src="Scripts/jQuery.1.8.3.js" type="text/javascript"></script>
<script src="Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="JQuery_Export_To_Excel.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2NTA0OTEwODdkZKr9kRtjn1C5sAo2woCwfF/8uHOVcyNi1bu4OtVBNKlS" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAIdFUHUqRwMmhFieKB52uC8avDSflAS9b8PVcR1BxTTBqeDRyg6lH5NKPWh6Jt5ee2zX+bYNkguHBdZjCzKvoJa" />
</div>
<div>
<table id="tbl">
<tr>
<td>AAA</td><td>BBB</td>
</tr>
</table>
<input name="btnExport" type="button" id="btnExport" value=" Export Table data into Excel " />
</div>
</form>
</body>
</html>
I don't know what I'm doing wrong, but when I click btnExport, nothing happens. How can I fix this problem?
put this in your form
<div>
<div id="container">
<asp:Table ID="tbl" runat="server">
</asp:Table>
</div>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
</div>
Put this in the header section with script tag
$(document).ready(function () {
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $('#container').html());
e.preventDefault();
});
});
I believe nothing is wrong with your code except that since your code is asp.net. you cannot
directly use $('#tbl') . You have to use $("#" +'<%=tbl.ClientID%>')
Related
I am trying to change the text of label in master page which is inside modal and from content page i am trying to set the text.
This is my master page:
<%# Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="server">
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-
scale=1, user-scalable=no" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Style/StyleSheet.css" rel="stylesheet" />
<link href="../Content/font-awesome.min.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?
family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet"
type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="header">
<form id="Form1" runat="server">
<header>
</header>
<div class="container-fluid" id="body">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width: 400px;margin: 0 auto;">
<div class="modal-header" runat="server">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title"><asp:Label ID="lblMasterMessage" runat="server" Text="Label"></asp:Label> </h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMasterbodyMessage" runat="server" Text="gh" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<footer class="panel-footer white">
<div class="row">
</div>
</footer>
</form>
</div>
<script src="../Scripts/bootstrap.min.js"></script>
</body>
</html>
script in child page which opens modal:
<script type="text/javascript">
function openModal(message) {
$('#myModal').modal('show');
}
</script>
code behind child page calling the script and changing text of label in modalpopup
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { openModal(); });", true);
Label lblMaster = (Label)Master.FindControl("lblMasterbodyMessage");
string message = "something";
lblMaster.Text = message;
i also tried the second approach by setting properties in master page but text in the popup is not getting updated. any help will be appreciated
Best approach will be to provide a get/set property in your master page that will accept value and assign it to the label value property.
Master Page
public partial class MasterPage : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string MasterBodyMessage // you can use some meaningfull name over here.
{
get { return this.lblMasterbodyMessage.Text; }
set { this.lblMasterbodyMessage.Text = value; }
}
}
Child Page
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { openModal(); });", true);
var master = this.Master as MasterPage;
if (master != null)
{
master.MasterBodyMessage = "Some Meaningful Message!!!";
}
Else you can do some work around using javascript/jQuery to add message into label in master page. For this you will need to amend following changes.
HTML Aspx Page
<div class="modal-content" style="width: 400px;margin: 0 auto;">
<div class="modal-header">
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><label id="lblMasterMessage"></label></h4>
</div>
<div class="modal-body">
<label id="lblMasterbodyMessage"></label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
</div>
</div>
Code Behind Page
string message = "Some Meaningful Message!!!";
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "openModal('"+ message +"');", true);
jQuery Script
<script type="text/javascript">
function openModal(message) {
$('#myModal').modal('show');
$('#lblMasterbodyMessage').html(message);
}
</script>
Specify your master page class name in TypeName attribute of MasterType directive.
<%# MasterType TypeName="MasterPageClassName" %>
Now you can access your public properties as this.Master.propertyname
Also try by moving your code from page load event to PreRenderComplete event of page.
That'll solve you're problem
I have a simple button, that when clicked should display text in a label. However when I press the button, nothing happens. Any ideas where i could be going wrong?
Default.aspx:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default"%>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Button ID="testbutton" runat="server" Text="Button" OnClick="testbutton_Click" />
<asp:Label ID="testlabel" runat="server"></asp:Label>
</asp:Content>
Default.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data;
using System.Data.SqlClient;
using System.Web.Configuration;
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void testbutton_Click(object sender, EventArgs e)
{
testlabel.Text = "You clicked the Testbutton";
}
}
Masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>PhotoChunk</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'/>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="js/jquery.min.js"></script>
<!--<script src="js/jquery.easydropdown.js"></script>-->
<!--start slider -->
<link rel="stylesheet" href="css/fwslider.css" media="all" />
<script src="js/jquery-ui.min.js"></script>
<script src="js/fwslider.js"></script>
<!--end slider -->
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>
<!----details-product-slider--->
<!-- Include the Etalage files -->
<link rel="stylesheet" href="css/etalage.css" />
<script src="js/jquery.etalage.min.js"></script>
<!-- Include the Etalage files -->
<script>
jQuery(document).ready(function($){
$('#etalage').etalage({
thumb_image_width: 600,
thumb_image_height: 400,
show_hint: true,
click_callback: function(image_anchor, instance_id){
alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
}
});
// This is for the dropdown list example:
$('.dropdownlist').change(function(){
etalage_show( $(this).find('option:selected').attr('class') );
});
});
</script>
<!----//details-product-slider--->
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="header-left">
<div class="logo">
<img src="images/logowhite.png" alt=""/>
</div>
<div class="menu">
<a class="toggleMenu" href="#"><img src="images/nav.png" alt="" /></a>
<ul class="nav" id="nav">
<li>Browse</li>
<li>Upload</li>
<li>About</li>
</ul>
<script type="text/javascript" src="js/responsive-nav.js"></script>
</div>
<div class="clear"></div>
</div>
<div class="header_right">
<!-- start search-->
<div class="search-box">
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="What are you looking for?" type="search" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"> </span>
</form>
</div>
</div>
<!----search-scripts---->
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
new UISearch(document.getElementById('sb-search'));
</script>
<!----//search-scripts---->
<ul class="icon1 sub-icon1 profile_img">
<li><a class="active-icon c1" href="#"> </a>
<ul class="sub-icon1 list">
<li class="list_img"><img src="images/1.jpg" alt=""/></li>
<li class="list_desc"><h4>Matthew Thompson</h4></li>
<li><div class="login_buttons">
<div class="check_button">Account</div>
<div class="login_button">Logout</div>
</div>
<div class="clear"></div>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="footer_box">
<h4>About PhotoChunk</h4>
<li>About Us</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="col-md-3">
<ul class="footer_box">
<h4>Support</h4>
<li>Contact Us</li>
<li>Help</li>
</ul>
</div>
<div class="col-md-3">
<ul class="footer_box">
<ul class="social">
<li class="facebook"><span> </span></li>
<li class="twitter"><span> </span></li>
<li class="instagram"><span> </span></li>
<li class="pinterest"><span> </span></li>
<li class="youtube"><span> </span></li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
I was able to get it working!
By deleting the extra form tags found in the master page, the button now works.
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="What are you looking for?" type="search" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"> </span>
</form>
</div>
Before I add in this part of session code, it will redirect me to BlogEntry.aspx if my username and password is correct. After I add in the session code, when I clicked the button nothing happening. Can you help me convert my session code to work in the javascript? I need to code it in the javascript and not in the code behind because I am using a html button. Because I want the design of the button, I need to do this. Unless you tell me there's a way to do it in the code behind. After login in login.aspx. It will redirect to logined.aspx and display welcome admin in the label.
Login.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="stylesheets/loginstyle.css" />
<script language="javascript" type="text/javascript">
// <![CDATA[
function Button1_onclick() {
if (document.getElementById('txtUserName').value == "Admin" && document.getElementById('txtPassword').value == "123") {
//After add in session it cannot redirect START HERE
Session.Add("Username", txtUserName.Value);
Session.Add("Password", txtPassword.Value);
FormsAuthentication.SetAuthCookie(txtUserName.Value, true);
window.location.assign("BlogEntry.aspx")
//After add in session it cannot redirect END HERE
}
else
{
document.getElementById("<%=lblError.ClientID%>").innerHTML = "Name can't be blank!";
}
}
// ]]>
</script>
</head>
<body>
<div id="wrapper">
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
<span>Fill out the form below to login to my super awesome imaginary control panel.</span>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="Username" runat="server" id="txtUserName" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="Password" runat="server" id="txtPassword" />
<div class="pass-icon"></div>
</div>
<div class="footer">
<input type="button" name="submit" value="Login" class="button" runat="server" id="Button1" önserverclick="Button1_Click" onclick="return Button1_onclick()" />
<asp:Label ID="lblError" runat="server" Text=""></asp:Label>
</div>
</form>
</div>
<div class="gradient"></div>
</body>
</html>
Logined.aspx
protected void Page_Load(object sender, EventArgs e)
{
//Logout.Visible = false;
string memName = (String)Session["UserName"];
lblUsername.Text = String.Concat("Welcome Guest!");
if (Session["Username"] != null && Session["Username"] != String.Empty)
{
lblUsername.Text = "Welcome, " + memName + "!";
}
}
For #Sangram
You can use html session storage or localStorage to store your key values. this will not need any server side code. The info will be there even if the user close the browser.
for browser compatibility: http://www.html5rocks.com/en/features/storage
for example: http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/
I want to read html content along with attributes added by jquery from code behind in string variable.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
#form1{width:60%; height:60%; margin:auto; background-color:White;}
html,body{height:100%; width:100%; background-color:Silver; font:100%;}
#sidePanel{height:50%; width:17%; float:left;}
.light{border:5px solid; border-radius:25px;}
</style>
<script src="Javascript/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="Javascript/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
function handleClick(light) {
$('#form1').addClass("light");
$('#test').addClass("light");
}
</script>
</head>
<body>
<div id="sidePanel" runat="server">
Residence Name<br />
<input type="radio" name="light" value="With Light" onclick="handleClick(this);"/>With
Light<br/>
<input type="radio" name="light"value="Without Light"
onclick="handleClick(this);"/>Without Light<br /><br />
Office Name Plate<br />
<input type="radio" name="light" runat="server" value="With Light Plate"
onclick="handleClick(this);"/>With Light<br/>
<input type="radio" name="light" runat="server" value="Without Light Plate"
onclick="handleClick(this);"/>Without Light<br /><br />
Table Top Name Plate<br />
<input type="radio" name="light" runat="server" value="With Light Table"
onclick="handleClick(this);"/>Table Top<br/><br />
Cubical / Door Name Plate<br />
<input type="radio" name="light" runat="server" value="With Light Table"
onclick="handleClick(this);"/>Cubicle / Door<br/>
<form runat="server">
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Button ID="btnSave" runat="server" Text="Button" onclick="btnSave_Click"
style="height: 26px" />
</form>
</div>
<div id="form1" runat="server">
<div id="test"></div>
</div>
</body>
</html>
Below is the code behind:
protected void btnSave_Click(object sender, EventArgs e)
{
string a=form1.InnerHtml;
}
form1.innerhtml does not contain the class="light" attribute in div tag how
Have you tried to access the class using the .CssClass property?
protected void btnSave_Click(object sender, EventArgs e)
{
string a=form1.CssClass;
}
How can I get hold a session from date picker?
For all my textbox, I hold it using :
Session["location"] = DropDownList1.SelectedItem.Text;
Session["time"] = DropDownList2.SelectedItem.Text;
Session["day"] = DropDownList3.SelectedItem.Text;
Session["IsChauffeurUsed"] = DropDownList4.SelectedItem.Text;
But for my text box date picker, when I write the code
Session["date"] = datepicker.Text;
It gives me an error, the current context does not exist.
The date picker text box is :
<div class="demo"><p>Date: <input type="text" id="datepicker"></p></div>
Hope you can help.
Thanks.
Set runat=server attribute to convert html tag to Html server control.
<input type="text" runat="server" id="datepicker">
and use value attribute because it is now ASP.NET Web Server control.
Session["date"] = datepicker.Value;
Edit: This works perfectly on my side.
<head runat="server">
<title></title>
<link rel="Stylesheet" type="text/css" href="http://code.jquery.com/ui/jquery-ui-git.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#datePicker").datepicker();
$("#<%=TextBox1.ClientID %>").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="datePicker" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>