I want to show PDF without Download Option. After many search of Google I get some answer but I'm facing a problem in this.
PDF is open in partial View, but there have also Download Option. Is there another option to open Pdf without Download option?
#model Bizzop.Models.MyAccountModel
#{
Layout = null;
}
<html>
<head>
<title>INDEX</title>
</head>
<body>
<div id="divPartialView">
</div>
<div class="container">
#if (Model.MyAccountList.Count > 0)
{
foreach (var items in Model.MyAccountList)
{
<div class="video-row">
<a href="#" target="_blank" onclick="myPdf(this)"
id="#items.PdfName">
<div class="row">
#if (items.PdfName == "" || items.PdfName == null)
{
<img src="ImageName"/>
}
else
{
<img src="ImageName"/>
}
</div>
</a>
</div>
}
}
</div>
////// This is Ajax code where we pass File name when click the user in anchor
tag
<script>
function myPdf(e) {
debugger
var filen = e.id;
$.ajax({
url: "/MyAccount/MyPdfResult",
data: { pdfname: filen },
cache: false,
type: "POST",
dataType: "html",
type: "post",
success: function (data) {
SetData(data);
},
error: function (data) {
}
});
function SetData(data) {
$("#divPartialView").html(data); // HTML DOM replace
}
}
</script>
/////////// In Controller
public ActionResult MyPdfResult(string pdfname = null)
{
string embed = "<object data=\"{0}\" type=\"application/pdf\"
width=\"500px\" height=\"300px\">";
embed += "</object>";
TempData["Embed"] = string.Format(embed,
VirtualPathUtility.ToAbsolute("~/Content/TutorialImage/TutorialPdf/"+
pdfname));
return PartialView("_Viewpdf", TempData["Embed"]);
}
///// where i am create a Partial View
<div class="ancor">
#Html.Raw(TempData["Embed"])
</div>
i just tried it on my side and it worked for me. You need to make sure that your app is allowed to access the pdf file.
This is my code:
The controller:
[HttpPost]
[AllowAnonymous]
public ActionResult MyPdfResult(string pdfname = null)
{
string embed = "<object data=\"{0}\" type=\"application/pdf\" width=\"500px\" height=\"300px\">";
embed += "If you are unable to view file, you can download from here";
embed += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";
embed += "</object>";
TempData["Embed"] = string.Format(embed, VirtualPathUtility.ToAbsolute("~/Files/pdf.pdf"));
return PartialView("_Viewpdf", TempData["Embed"]);
}
The partial view:
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
#using (Html.BeginForm("MyPdfResult", "Home", FormMethod.Post))
{
View PDF
<hr />
#Html.Raw(TempData["Embed"])
}
The Index:
<div>
#Html.Partial("_Viewpdf");
</div>
Related
I am using asp.net core 3.1 with Razor forms.
I have a form that contains an input of type file and it is multiple files input.
In the create form it is easy to access the file from the model.
The problem is in the update form how can handle the preview, delete adding new files to the multiple
file input.
Is there a best practice to solve such thing.
The problem is in the update form how can handle the preview, delete adding new files to the multiple file input. Is there a best practice to solve such thing.
I suggest that you could use jQuery MultiFile.
Here are the steps:
1.Download the jQuery MultiFile:https://multifile.fyneworks.com/#Install
2.Find the download zip file and extract it then move to the project wwwroot/lib folder:
For asp.net core mvc:
View:
<form asp-controller="Home" asp-action="UploadData" enctype="multipart/form-data">
<div>
<input type="file" name="files" multiple="multiple" class="multi with-preview" />
<input type="submit" value="Upload" />
</div>
</form>
#section Scripts
{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript" language="javascript"></script>
<script src="~/lib/multifile-master/jquery.MultiFile.js"></script>
}
Controller:
[HttpPost]
public IActionResult UploadData(List<IFormFile> files)
{
//do your stuff...
return Ok();
}
For asp.net core razor pages:
Index.cshtml:
#page
#model IndexModel
<form asp-page-handler="UploadData" enctype="multipart/form-data">
<div>
<input type="file" name="files" multiple="multiple" class="multi with-preview" />
<input type="submit" value="Upload" />
</div>
</form>
#section Scripts
{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript" language="javascript"></script>
<script src="~/lib/multifile-master/jquery.MultiFile.js"></script>
}
Index.cshtml.cs:
public class IndexModel : PageModel
{
public IActionResult OnGet()
{
return Page();
}
public IActionResult OnPostUploadData(List<IFormFile> files)
{
return Page();
}
}
Result:
I've been using bootstrap4 file input!
to load the images when updating the form I used the following way:
var filesArray = [];
$(document).ready(function ()
{
$("#photos").fileinput("refresh",
{
showUpload: false,
showRemove: false
});
loadPhotos();
setTimeout(function ()
{
if (filesArray.length > 0)
{
$(".file-drop-zone-title").remove();
$('#photos').fileinput('readFiles', filesArray);
}
}, 2500);
});
function loadPhotos()
{
//hddPhotos is a hidden input that I stored the images URLs in
var photosPath = $('#hddPhotos').val();
if (photosPath !== null && photosPath!=='')
{
var photos = jQuery.parseJSON($('#hddPhotos').val());
if (photos.length > 0)
{
var count = photos.length;
for (var i = 0; i < count; i++)
{
getBlobofImage(photos[i]);
}
}
}
}
function getBlobofImage(imagePath)
{
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", imagePath);
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function ()
{
blob = xhr.response;//xhr.response is now a blob object
filesArray.push(new File([blob], /[^/]*$/.exec(imagePath)[0]));
};
xhr.send();
}
I am trying to use Dropzone.js to send a collection of IFormFile (images) to the following ASP.NET Core 2.1 Api controller action:
[HttpPost("[action]")]
public async Task<IActionResult> Upload([FromForm] ICollection<IFormFile> files)
{ ... }
I am able to successfully send files to this Api from Postman. But I cannot get it to send the files from my UI, which implements Dropzone. I am using an ASP form in a Razor page
<div>
<form action="/api/images/upload"
class="dropzone needsclick dz-clickable"
id="image-upload"
method="post"
enctype="multipart/form-data">
<div class="dz-message needsclick">
<span class="note needsclick">
Drop files here or click to upload.
</span>
</div>
</form>
</div>
with the following implementation of Dropzone
/* Dropzone */
// "imageUpload" is the camelized version of the HTML element's ID
Dropzone.options.imageUpload = {
paramName: "files", // The name that will be used to transfer the file
dictDefaultMessage: "Drop files here or Click to Upload",
addRemoveLinks: true, // Allows for cancellation of file upload and remove thumbnail
init: function() {
myDropzone = this;
myDropzone.on("success", function(file, response) {
console.log("Success");
myDropzone.removeFile(file);
});
}
};
This setup - and similar variations - sends an empty collection to the Api as shown in the screenshot:
I have tried the solutions posted in similar questions on here (e.g. this, or this). I have also tried adjusting the form setup and the Dropzone configuration. Everything I have tried has not worked. As I have mentioned, above, I can post to the Api from Postman so I suspect the problem lies in my UI setup. Can anyone help?
UPDATE:
<div class="box content">
<hr>
<h2>Upload photos</h2>
<div>
<form action="/api/images/upload"
class="dropzone needsclick dz-clickable"
id="image-upload"
method="post"
enctype="multipart/form-data">
<div class="dz-message needsclick">
<span class="note needsclick">
Drop files here or click to upload.
</span>
</div>
</form>
</div>
<h2>Generated Thumbnails</h2>
<!-- <p><span id="gallery-note">Gallery refreshes from storage container image links every 5 seconds.</span></p> -->
<div id="stored-images"></div>
<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
<div class="box footer">
<hr>
<div class="privacy">
</div>
</div>
</main>
#section scripts {
<script>
// init gallery for later use
var gallery;
// Grab links for images from backend api
function fetchImageLinks() {
// Fetch images
//alert("1");
//http://localhost:61408/api/Images/thumbnails
$.get("/api/Images/thumbnails", function (fetchedImageLinks) {
//alert("2");
console.log(fetchedImageLinks)
// Check if anything is in there
if (_.isEmpty(fetchedImageLinks)) {
console.log('empty fetched')
// do nothing
} else {
// Check if we have a gallery initialized
if (_.isEmpty(gallery)) {
// initialize gallery
gallery = blueimp.Gallery(
fetchedImageLinks, // gallery links array
{
container: '#blueimp-gallery-carousel',
carousel: true
} // gallery options
);
} else {
// check if images are equal to array
console.log('currently in gallery:')
console.log(gallery.list)
var imageLinksEqual = _.isEqual(_.sortBy(gallery.list.map(s => s.split("?")[0])), _.sortBy(fetchedImageLinks.map(s => s.split("?")[0])))
if (imageLinksEqual) {
console.log('images arr are equal')
// do nothing
} else {
console.log('images arr are not equal')
// update gallery with new image urls. Only compare actual url without SAS token query string
var newImageLinks = _.difference(fetchedImageLinks.map(s => s.split("?")[0]), gallery.list.map(s => s.split("?")[0]))
console.log('differene is: ')
console.log(newImageLinks)
// Only add new images
gallery.add(newImageLinks);
// Force image load
gallery.next();
}
}
}
});
}
// Start first interval
fetchImageLinks()
setInterval(function () {
fetchImageLinks()
}, 5000)
function myParamName() {
return "files";
}
/* Dropzone */
// "imageUpload" is the camelized version of the HTML element's ID
Dropzone.options.imageUpload = {
paramName: "files", // The name that will be used to transfer the file
//uploadMultiple: true,
//paramName: myParamName,
dictDefaultMessage: "Drop files here or Click to Upload",
addRemoveLinks: true, // Allows for cancellation of file upload and remove thumbnail
init: function () {
myDropzone = this;
myDropzone.on("success", function (file, response) {
console.log("Success");
myDropzone.removeFile(file);
});
}
};
</script>
}
Check that your dropzone settings are getting applied correctly. I have tried your code as-is and it worked fine for me. However, if I removed the Dropzone configuration from the page then I get a filecount of 0.
To get around this problem put the dropzone configuration into the .cshtml page that contains the dropzone and you should see it working OK for example:
Index.cshtml
<div>
<form action="/api/images/upload"
class="dropzone needsclick dz-clickable"
id="image-upload"
method="post"
enctype="multipart/form-data">
<div class="dz-message needsclick">
<span class="note needsclick">
Drop files here or click to upload.
</span>
</div>
</form>
</div>
#section Scripts {
<script>
/* Dropzone */
// "imageUpload" is the camelized version of the HTML element's ID
Dropzone.options.imageUpload = {
paramName: "files", // The name that will be used to transfer the file
dictDefaultMessage: "Drop files here or Click to Upload",
addRemoveLinks: true, // Allows for cancellation of file upload and remove thumbnail
init: function () {
myDropzone = this;
myDropzone.on("success", function (file, response) {
console.log("Success");
myDropzone.removeFile(file);
});
}
};
</script>
}
Now, if you delete the #section from the page you will start getting a files.count of 0 when you try to upload the files.
If you want to have the dropzone configuration in a separate file then you need to ensure it is loaded into the page correctly e.g. change your scripts section to:
#section scripts {
<script src="~/scripts/dropzone-config.js"></script>
}
...using the correct path to your dropzone configuration file
I have a PDF which is open in new Window through Iframe, but when I disabled the f12 and inspect Element then it is not working on that PDF, it's working outside of PDF.
<body>
<div id="divPDFView" style="margin: auto;text-align: center;">
</div>
<div style="display:none;" id="divDocument">
#if (Model.MyAccountList.Count > 0)
{
foreach (var items in Model.MyAccountList)
{
<a href="#" onclick="myPdf(this)" id="#items.PdfName">
<div class="sm-video">
///There have some work
</div>
}
}
</body>
<script>
function myPdf(e) {
var filen = e.id;
debugger;
window.open('#Url.Action("pdfshow", "MyAccount")?pdfname=' + filen);
}
</script>
///Here i show PDF From View Which is pdfshow
<body>
<div>
#Html.Raw(TempData["Embed"])
</div>
</body>
This is JavaScript code which I use to disable the F12 and Inspect Element but this is work outside of PDF.
<script>
$(document).ready(function () {
debugger
document.onmousedown = disableclick;
status = "Right Click Disabled";
function disableclick(event) {
if (event.button == 2) {
alert(status);
return false;
}
}
});
</script>
<script type='text/javascript'>
$(document).keydown(function (event) {
debugger
if (event.keyCode == 123) {
return false;
}
else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
return false; //Prevent from ctrl+shift+i
}
});
</script>
This is the controller code where PDF is created using Iframe
public ActionResult pdfshow(string pdfname = null)
{
string pdffile ="<iframe src='/Content/TutorialImage/TutorialPdf/" +
pdfname + "#toolbar=0' width='800px' height='600px'
id='myframe' oncontextmenu='return false;' >
</iframe>";
TempData["Embed"] = pdffile;
return View(TempData["Embed"]);
}
Im'm working on an MVC/Razor based application
I'm trying to set up a file upload inside a view that is inside a jquery modal dialog box
here's my View code
#using (Html.BeginForm("<MyAction>", "<MyController>", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div>
<input type="file" id="UploadImage" name="UploadImage" style="width:705px;" />
</div>
<div>
<input id="sbmt" type="submit" value="Save" />
</div>
}
but when i get to my controller action, Request.Files.Count is allways 0
public ActionResult MyAction(Model model){
...
}
What am I missing here?
Thanks
I was able to perform a File Upload in a JQuery Modal Dialog (MVC) by explicitly adding form data to the Ajax Post:
Javascript Code:
// Checking whether FormData is available in browser
if (window.FormData !== undefined) {
var fileUpload = $("#fileInput").get(0);
var files = fileUpload.files;
// Create FormData object
var fileData = new FormData();
// Looping over all files and add it to FormData object
for (var i = 0; i < files.length; i++) {
fileData.append(files[i].name, files[i]);
}
// Adding additional parameters to FormData object
fileData.append('name', $('#nameinput').val());
fileData.append('uniqueID', $('#hiddenFieldUniqueID').val());
$.ajax({
type: 'POST',
contentType: false,
processData: false,
url: '#Url.Action("UploadFile", "YourController")',
data: fileData,
success: function (returnValues) {
$('.ui-dialog-buttonpane').unblock();
if (returnValues["success"] == true) {
bootbox.alert(returnValues["feedback"]);
$(dlg).dialog("close");
}
else {
bootbox.alert(returnValues["feedback"]);
}
},
error: function (returnValue) {
$('.ui-dialog-buttonpane').unblock();
debugger;
bootbox.alert({ message: "Oops - Error Occured!" + returnValue, size: 'small' });
}
});
}
else {
bootbox.alert("Your browser doesnt support the method we are using to upload files (FormData is not supported)");
}
HTML (No form tag required):
<div class="col-md-9">
<label class="btn btn-primary" for="fileInput">
<input id="fileInput" type="file" style="display:none"
onchange="$('#upload-file-info').html(this.files[0].name)">
Select
</label>
<span class='label label-info' id="upload-file-info"></span>
</div>
Controller:
[HttpPost]
public ActionResult UploadFile()
{
YourObjectFile yourObjectFile = null;
try
{
string name = Request.Form["name"];
if (Request.Files.Count > 0)
{
yourObjectFile = new YourObjectFile ();
HttpPostedFileBase file = Request.Files[0];
if (file != null && file.ContentLength > 0)
{
string fileName = file.FileName;
using (var reader = new System.IO.BinaryReader(file.InputStream))
{
yourObjectFile.RawData = reader.ReadBytes(file.ContentLength);
}
}
}
.......
Credit for this approach belongs here: http://www.c-sharpcorner.com/UploadFile/manas1/upload-files-through-jquery-ajax-in-Asp-Net-mvc/
I have some items and I mark them as favorite by pressing a button, here is the code:
function AddToFavorites() {
//called when a shop is added as as a favorite one.
//first we check if already is favorite
var favoritesArray = getStoreArray();
var alreadyExists = exists();
if (!alreadyExists) {
favoritesArray.push(itemHolder);
var storage = window.localStorage;
storage.shopsFavorites = JSON.stringify(favoritesArray);
}
}
function exists() {
var alreadyExists = false;
var favoritesArray = getStoreArray();
for (var key in favoritesArray) {
if (favoritesArray[key].title == itemHolder.title) {
//already exists
alreadyExists = true;
}
}
return alreadyExists;
}
function getStoreArray() {
//restores our favorites array if any or creates one
var storage = window.localStorage;
var favoritesArray = storage.shopsFavorites;
if (favoritesArray == null || favoritesArray == "") {
//if first time
favoritesArray = new Array();
} else {
//if there are already favorites
favoritesArray = JSON.parse(favoritesArray);
}
return favoritesArray;
}
And I have a favorites.html to present those as a list.
The problem I have is that the list doesn't update automaticly every time I add or remove items.
Here is my code for that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Αγαπημένα</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="favoritesDetails.css" rel="stylesheet" />
<script src="favoritesDetails.js"></script>
</head>
<body>
<div class="favoritesDetails fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Αγαπημένα</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="mediumListIconTextItem">
<img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
<div class="mediumListIconTextItem-Detail">
<h4 data-win-bind="innerText: title"></h4>
<h6 data-win-bind="innerText: text"></h6>
</div>
</div>
</div>
<div id="basicListView" data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource : DataExample.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate')}">
</div>
</section>
</div>
</body>
</html>
And here is the JavaScript code:
// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
var dataArray = [], shopsArray = [];
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var nav = WinJS.Navigation;
var ui = WinJS.UI;
shopsArray = getStoreArray();
if (shopsArray) {
for (var key in shopsArray) {
var group = { title: shopsArray[key].title, text: shopsArray[key].subtitle, picture: shopsArray[key].backgroundImage, description: shopsArray[key].description, phoneNumbers: shopsArray[key].content };
dataArray.push(group);
}
var dataList = new WinJS.Binding.List(dataArray);
// Create a namespace to make the data publicly
// accessible.
var publicMembers =
{
itemList: dataList
};
WinJS.Namespace.define("DataExample", publicMembers);
}
WinJS.UI.Pages.define("/pages/favoritesDetails/favoritesDetails.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
},
unload: function () {
},
updateLayout: function (element, viewState, lastViewState) {
}
});
})();
function getStoreArray() {
//restores our favorites array if any or creates one
var storage = window.localStorage;
var favoritesArray = storage.shopsFavorites;
if (favoritesArray == null || favoritesArray == "") {
//if first time
favoritesArray = new Array();
} else {
//if there are already favorites
favoritesArray = JSON.parse(favoritesArray);
}
return favoritesArray;
}
So how can I update the favorites HTML page when new favorites are stored/removed in the localDB? can i add event listeners there?
Is the code that stores favorites a part of the same app?
If so, I would consider adding the favorite to the underlying WinJS.Binding.list that you're using to bind to the ListView, and then store the updated list info in the DB, rather than trying to react to changes in the DB from the ListView.
Have a look at the following sample, which shows how to update a ListView dynamically:
http://code.msdn.microsoft.com/windowsapps/ListView-custom-data-4dcfb128/sourcecode?fileId=50893&pathId=1976562066
Hope that helps!