Post
Ask Question
Arun Pandiyan

Arun Pandiyan

  • NA
  • 13
  • 932

ho to Open pdf within the model popup in asp.net with C#:

Jun 2 2020 7:48 AM
C#: 
string cs = ConfigurationManager.ConnectionStrings["Myconnectionstring1"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(cs);
SqlDataAdapter sda = new SqlDataAdapter("select * from Uploadpdf", con);
DataTable ds = new DataTable();
sda.Fill(ds);
DataList1.DataSource = ds;
DataList1.DataBind();
}
 ----------------------------------------------------------------------------------------------------------------
 Design:
 
<title></title>
<style>
#Container1{
background-color:#808080;
}
</style>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
<link rel="stylesheet" href="css/Custom.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="Container1">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse">
<ul class=" nav navbar-nav navbar-right">
<li class="active"><a href="SignIn.aspx">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<hr />
<asp:DataList ID="DataList1" runat="server" RepeatColumns="4" CellPadding="5" CellSpacing="50" Height="131px" Width="50px">
<ItemStyle ForeColor="#FF3300"></ItemStyle>
<ItemTemplate>
<img alt="Image" width="150" height="150" src='<%#Eval("Image")%>' />
<asp:HyperLink ID="HyperLink1" runat="server" CssClass="ui-icon-notext"
Text='<%# Eval("Name") %>'
NavigateUrl='name'
ForeColor="#000099"
Font-Bold="True"
Font-Size="Large"
Height="100"
Width="100">
</asp:HyperLink>
</ItemTemplate>
<SeparatorStyle BackColor="#FF0066" />
</asp:DataList>
</div>
<div id="dialog" style="display: none">
<b>Id:</b> <span id="Id"></span>
<br />
<b>Name:</b> <span id="Name"></span>
<br />
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" />
<script type="text/javascript">
$(document).on("click", "[id*=HyperLink1]", function () {
var fileName = $(".Name", $(this).closest("tr")).html();
$("#dialog").dialog({
title: "View Details",
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<object data=\"{FileName}\" type=\"application/pdf\" width=\"300px\" height=\"200px\">";
object += "If you are unable to view file, you can download from <a href=\"{FileName}\">here</a>";
object += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";
object += "</object>";
object = object.replace(/{FileName}/g, "PdfFiles/" + fileName);
$("#dialog").html(object);
},
modal: true
});
return false;
});
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
output
 
 
 

Answers (2)