I created a crystal report which works fine. I now want to display it in a bootstrap popup modal
but I always get an empty modal or it works fine with a gridview.
I would like to know how to fix this problem? thank you for helping me
Hello and thank you for your answers here is the code;
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ModalpopupTest.WebForm1" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%# Register Assembly="CrystalDecisions.Web, Version=13.0.4000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" Namespace="CrystalDecisions.Web" TagPrefix="CR" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.Modalbackground
{
background-color:black;
filter: alpha(opacity=40);
opacity:0.4;
}
.modalPopup{
background-color:#ffffff;
width:100%;
border:3px solid #0DA9D0;
height:75%;
}
.modalPopup .header{
background-color:#2fbdf1;
height:30px;
color:white;
line-height:30px;
text-align:center;
font-weight:bold;
}
.modalPopup .footer{
padding:3px;
}
.modalPopup .button{
height:2px;
color:white;
line-height:23px;
text-align:center;
font-weight:bold;
cursor:pointer;
background-color:red;
border:1px solid #5c5c5c;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Button runat="server" ID="btnOpen" OnClick="btnOpen_Click" Text="Show Popup" CssClass="btn btn-primary" CausesValidation="false" />
<ajaxToolkit:ModalPopupExtender ID="mdpImprimer" PopupControlID="pImprimer" TargetControlID="lblmdpIndex" CancelControlID="btnClose" PopupDragHandleControlID="headerdiv" runat="server" BackgroundCssClass="Modalbackground"></ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pImprimer" CssClass="table-responsive" runat="server">
<div id="headerdiv" class="header"></div>
<div class="mb-3" style="overflow:scroll;width:100%;height:75%">
<div class="modal-body card-body bg-default-gradient modal-fullscreen">
<CR:CrystalReportViewer ID="cr" runat="server" AutoDataBind="true" />
</div>
</div>
<div id="footerdiv" class="footer">
<asp:Button ID="btnClose" runat="server" Text="Fermer" />
</div>
</asp:Panel>
<asp:Label ID="lblmdpIndex" runat="server" Text="Label" ForeColor="White"></asp:Label>
</form>
<script src="Scripts/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
and c# code
private void BingReport()
{
try
{
d.connecter();
d.da = new SqlDataAdapter("SELECT FORMAT([Dates],'dd-MM-yy') as [Dates],d.[Designation] as Agence,c.Designation as Depot,b.[Reference] as reference,b.Designation as Produit,e.Nom as Client,[Numpiece],[TRANSPORTEUR],[Chauffeur],[VEHICUL],[QUANTITE],[PU] from [dbo].[VenteClients] a inner join [dbo].[article] b on b.Idarticle=a.Idarticle inner join [dbo].[Depot] c on c.IdDepot=a.IdDepot inner join [dbo].[Agences] d on d.IdAgences=a.IdAgences inner join [dbo].[Clients] e on e.[IdClients]=a.IdClients where [Numpiece]='80279' and c.Designation='SCDP DOUALA'", d.con);
DataSet ds = new DataSet();
d.da.Fill(ds, "Editbonlivraison");
d.deconnecter();
ReportDocument crystalReport = new ReportDocument(); // creating object of crystal report
crystalReport.Load(Server.MapPath("~/EDITIONBONS.rpt")); // path of report
crystalReport.SetDataSource(ds); // binding datatable
cr.ReportSource = crystalReport;
mdpImprimer.Show();
}
catch (Exception ex)
{
}
}
protected void btnOpen_Click(object sender, EventArgs e)
{
BingReport();
}
Related
I'm trying to run a JS function that uses JQuery to append information to the HTML of an ASP page and I just can't get it to work. I've made some research about it but maybe it's something a lot simpler.
%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Pruebas.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
const add = (param) => {
alert("hi");
$("div.auto-style1").append("<p>'" + param + "'</p>");
}
</script>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" />
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<div class="container">
some text
</div>
</form>
</body>
</html>
more specifically this is the function im trying to run
<script type="text/javascript">
const add = (param) => {
alert("hi");
$("div.auto-style1").append("<p>'" + param + "'</p>");
}
</script>
im trying to call this function from the C# code behind the page like this
protected void Button1_Click(object sender, EventArgs e)
{
String p = "this is a message";
ScriptManager.RegisterClientScriptBlock(this, GetType(), "myfunction", "add('" + p + "');", true);
}
If I try to run a JS function that produces a console log or an alert on the page it works fine. Maybe it is related to the Postback property in the ASP button?
If anyone can shed some light on this I will be thankful.
There is no any .auto-style1 class in your code. Please add a class in div to work this code.
<form id="form1" runat="server">
<div class="auto-style1">
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" />
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<div class="container">
some text
</div>
</form>
Initially I able to preview image after select image. After added the master page, the javascript is not working anymore.
This is my master page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Testing.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
This is my content page
<%# Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Testing1.aspx.cs" Inherits="Testing.Testing1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function imagepreview(input)
{
if (input.files && input.files[0]) {
var fildr = new FileReader();
fildr.onload = function (e) {
$('#Image1').attr('src', e.target.result);
};
fildr.readAsDataURL(input.files[0]);
}
}
</script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<asp:Image ID="Image1" runat="server" height="100" Width="100" />
<br />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
<br />
<br />
<asp:TextBox ID="tbRetrieve" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnRetrieve" runat="server" Text="Retrieve" OnClick="btnRetrieve_Click" />
<br />
<asp:Image ID="Image2" runat="server" />
<br />
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<br />
<br />
</asp:Content>
And this is my code behind
protected void Page_Load(object sender, EventArgs e)
{
FileUpload1.Attributes["onchange"] = "imagepreview(this)";
if (!IsPostBack)
{
lblMessage.Visible = false;
}
}
So what is the problem?
on adding master page the code of finding the control id will be changed you will have to replace your code like this.
<script type="text/javascript">
function imagepreview(input)
{
if (input.files && input.files[0]) {
var fildr = new FileReader();
fildr.onload = function (e) {
$('#<%=Image1.ClientID%>').attr('src', e.target.result);
};
fildr.readAsDataURL(input.files[0]);
}
}
You need to use code like that in order to call your javascript method on behind.
Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","MyFunction()",true);
I'm trying to resize a div with a button click, using javascript and jquery. This is all in an asp.net web form. I have little experience with javascript and practically none with jquery. This is the code I have so far with help from other SO members. Besides it not working, I know there's something wrong because the alerts are not being displayed.
Any help is appreciated.
<head id="Head1" runat="server">
<title>Data Display</title>
<script type="text/javascript">
function toggleGridContent() {
var id = "#gridViewContainer";
if ($(id).hasClass("small")) {
alert("found");
$(id).attr("class", "large");
} else {
alert("not");
$(id).attr("class", "small");
}
}
</script>
<style type="text/css">
.small {
height: 200px;
overflow: hidden;
}
.large {
height: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<input type="button" onclick="toggleGridContent()" value="toggleGridContent" />
<div class="small" id="gridViewContainer" style="border: 1px solid red">
<asp:GridView ID="GridViewNsbAll" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:BoundField DataField="subgroup" HeaderText="subgroup"></asp:BoundField>
<asp:BoundField DataField="count" HeaderText="count"></asp:BoundField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
You have to add a reference to the jQuery library. If you have it in your web site you can use something like this:
<script type="text/javascript" src="jquery.js"></script>
Easier would be to link to the latest hosted version
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
here is my code,which is wokring fine when i use it simply in a aspx file, but when i keep the same code in a aspx file with master page, it not working.
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test2.aspx.vb" Inherits="test2" %>
<!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">
<style>
#imagePreview {
width: 250px;
height: 250px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$("#FileUpload1").on("change", function () {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return;
if (/^image/.test(files[0].type)) {
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function () {
$("#imagePreview").css("background-image", "url(" + this.result + ")");
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<br />
<br />
<center>
<fieldset style="width:35%">
<legend>Preview Image before upload</legend>
<table>
<tr><td>Upload Image:</td><td>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Label ID="lblmessage" runat="server"></asp:Label></td></tr>
<tr><td></td><td><table><tr><td>
<asp:Image ID="imagePreview" runat="server" /></td></tr></table></td></tr>
<tr><td></td><td> </td></tr>
</table>
</fieldset>
</center>
</div>
</form>
</body>
</html>
i am getting output correctly as below when i use without Masterpage
when i use with master page
i am getting below, not coming properly
can any body help me to fix it? what change i need to do when i use the same code with master page ?
masterpage code adding below
<%# Page Title="" Language="VB" MasterPageFile="~/Receptionist.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style >
#imagePreview {
width: 250px;
height: 250px;
float:left;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
//display: inline-block;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$("#FileUpload1").on("change", function () {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return;
if (/^image/.test(files[0].type)) {
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function () {
$("#imagePreview").css("background-image", "url(" + this.result + ")");
}
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<br />
<br />
<center>
<fieldset style="width:35%">
<legend>Preview Image before upload</legend>
<table>
<tr><td>Upload Image:</td><td>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Label ID="lblmessage" runat="server"></asp:Label></td></tr>
<tr><td></td><td><table><tr><td>
<asp:Image ID="imagePreview" runat="server" /></td></tr></table></td></tr>
<tr><td></td><td> </td></tr>
</table>
</fieldset>
</center>
</asp:Content>
You're not using ContentPlaceholder properly. It should be left empty in your master page, and then filled in on the content pages.
Master page:
<%# Page Title="" Language="VB" MasterPageFile="~/Receptionist.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<!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">
<asp:ContentPlaceHolder ID="head" Runat="server">
</asp:ContentPlaceHolder>
<style>
#imagePreview {
width: 250px;
height: 250px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$("#FileUpload1").on("change", function () {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return;
if (/^image/.test(files[0].type)) {
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function () {
$("#imagePreview").css("background-image", "url(" + this.result + ")");
}
}
});
});
</script>
</head>
<body>
<br />
<br />
<center>
<fieldset style="width:35%">
<legend>Preview Image before upload</legend>
<table>
<tr><td>Upload Image:</td><td>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Label ID="lblmessage" runat="server"></asp:Label></td></tr>
<tr><td></td><td><table><tr><td>
<asp:Image ID="imagePreview" runat="server" /></td></tr></table></td></tr>
<tr><td></td><td> </td></tr>
</table>
</fieldset>
</center>
<asp:ContentPlaceHolder ID="MainContent" Runat="server"></asp:ContentPlaceHolder>
</body>
</html>
Child page:
<%# Page Language="VB" MasterPageFile="~/Receptionist.master" AutoEventWireup="false" CodeFile="test2.aspx.vb" Inherits="test2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
// Page specific content
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="server">
// Page specific content
</asp:Content>
I am trying to use Jquery dialog box, but I am getting Object doesn't support property or method 'dialog' error. Would appreciate any guidance. Is the dialog function deprecated now. I am using jquery-1.5.2.min.js. Here is my code:
<%# 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></title>
<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style type="text/css">
body {
font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;
}
.ui-dialog-osx {
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
border-width: 0 8px 8px 8px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var Button1 = $("#Button1");
var Button2 = $("#Button2");
var Panel1 = $("#Panel1");
var dil = $("#dialog");
Button1.click(function (e) {
//Panel1.slideDown();
e.preventDefault();
$("#dialog").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I've read and understand this": function () {
$(this).dialog("close");
}
}
})
});
Button2.click(function (e) {
Panel1.slideUp();
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Show Panel" />
<asp:Button ID="Button2" runat="server" Text="Hide Panel" />
<br />
<br />
<asp:Panel runat="server" ID="Panel1" Height="185px" Width="320px" Style="display: none;"
BackColor="#FFFF99" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">
Hello World!
</asp:Panel>
</div>
<div id="dialog" title="Important information">
<span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float: left; margin: 0 7px 0 0;"></span></span>
<div style="margin-left: 23px;">
<p>
We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011.
<br />
<br />
Our hotel will reopen at 11th of January 2011.<br />
<br />
Another line which demonstrates the auto height adjustment of the dialog component.
</p>
</div>
</div>
</form>
</body>
</html>
You may have made a slight error here:
<script src="Scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
I expect you meant to include jQuery, and then the script containing the dialog extension (possibly jQuery UI, or a packaged up subset of it).
So change your script tags to...
<script src="Scripts/jquery-v.v.v.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-v.v.v.min.js" type="text/javascript"></script>
You are including two versions of jquery on the same page and you forgot to include jquery-ui :)