Error in displaying image in HTML file - asp.net

In my MVC2 application I use CKEditor where I allow the user to create a PDF document.
First the CKEditor content will get converted into HTML file and later as PDF document.
I have provided a button called Arrow on click of it image of an arrow should get inserted. In editor image gets displayed successfully but in HTML and PDF file image is not getting displayed inplace of it alt content gets displayed.
Code for an arrow button:
<input type="button" class="green_button" id="arrow" name="Arrow" value="Arrow" style="width: 110px; height: 30px; background-color: #FFFFFF;" onclick="return arrow_onclick()" />
function arrow_onclick() {
var editor = CKEDITOR.instances.message;
editor.insertHtml(' <input type="image" alt="arrow" src="../../PDFimages/arrow-left-up.jpg" style="height:100px; width:100px" />');
}
Controller code:
public ActionResult CreateFile(FormCollection data)
{
var filename = data["filename"];
var htmlContent = data["content"];
string sFilePath = Server.MapPath(_createdPDF + filename + ".html");
htmlContent = htmlContent.Trim();
if (!System.IO.File.Exists(sFilePath))
{
using (FileStream fs = new FileStream(sFilePath, FileMode.Create))
{
using (StreamWriter w = new StreamWriter(fs, Encoding.UTF8))
{
w.Write(htmlContent);
}
}
string filename1 = Path.GetFileNameWithoutExtension(sFilePath);
string name = Server.MapPath(_createdPDF + filename1 + ".pdf");
HTML2PDF.SetModulePath(#"C:\Documents and Settings\shubham\My Documents\visdatemplatemanger\visdatemplatemanger\bin");
using (PDFDoc doc = new PDFDoc())
{
if (HTML2PDF.Convert(doc, sFilePath))
doc.Save(name, pdftron.SDF.SDFDoc.SaveOptions.e_linearized);
}
System.IO.File.Delete(sFilePath);
UploadURL(name);
}
return View();
}

Before submit your form, you should set textarea value from CkEditor and make your action that accepts the post has this annotation applied [HttpPost, ValidateInput(false)]
$("#content").val(CKEDITOR.instances.message.getData());
And check your src value. Maybe should using:
src="#(Url.Content( "~/PDFimages/arrow-left-up.jpg" ))"
if PDFimages folder included in Project/Content

Related

take print in list view on calender

I need to list view when am taking the print
it is possible to archive media print css?
now i am getting like the below img
enter image description here
but i want the print form like below img
enter image description here
You can make use of https://fullcalendar.io/
Since you have not posted any code, I have taken a random calendar with a print button. So on click of print I'm changing the calendar view and calling window.print() method.
Change view : https://fullcalendar.io/docs/views/changeView/
https://jsfiddle.net/7xcqaLpq/7/
here is your html code
<div class="" id="component1">
<full-calendar></full-calendar>
</div>
add print button and pass the id into method
<button (click)="printComponent('component1')">Print</button>
--
printComponent(cmpName) {
var docHead = document.head.outerHTML;
var printContents = document.getElementById('component1').outerHTML;
var winAttr = "location=yes, statusbar=no, menubar=no, titlebar=no, toolbar=no,dependent=no, width=865, height=600, resizable=yes, screenX=200, screenY=200, personalbar=no, scrollbars=yes";
var newWin = window.open("", "_blank", winAttr);
var writeDoc = newWin.document;
writeDoc.open();
writeDoc.write('<!doctype html><html> <style>.fc-header-toolbar{display :none !important;} .fc-scroller.fc-scroller-liquid{overflow:visible !important;} .fc-view-harness.fc-view-harness-active{height:auto !important;}</style>' + docHead + '<body onLoad="window.print()">' + printContents + '</body></html>');
writeDoc.close();
newWin.focus();
}
using this you can take a print of calendar

ASP.NET Webforms: How can I write an entire HTML document to a new browser window?

Given I have contained within a string an entire HTML document, how can I launch a new browser window, and then inject the html into that instance so that the new window renders the document?
I've found so many examples on the web that simply do not work. I'm a middle tier guy, so I'm weak on the web/javascript stuff.
UPDATE: Here's a snippet of code that shows what I'm trying to do
void Display()
{
string javascript = string.Empty;
javascript += "<script type='text/javascript'>";
javascript += "var win = window.open('', '', '');";
javascript += "win.document.open();";
javascript += "win.document.write('{0}');"; //<------Notice I have a format parameter placed within the call to document.Write
javascript += "win.document.close();";
javascript += "win.focus();";
javascript += "</script" + ">";
// this.DisplayableDocumentation is an IEnumerable of strings. Each string contains an entire
// HTML document. Ultimately, I want to launch a new window for each document.
this.DisplayableDocumentation
.ForEach(document =>
{
HttpContext.Current.Response.Write(string.Format(javascript, document));
});
}
void Display() {
var i = 0;
var javascript = "<script type='text/javascript'>";
DisplayableDocumentation
.ForEach(document =>
{
i++;
Response.Write(String.Format("<input id='txt{1}' type='text' value='{0}' style='display:none;'/>", Server.HtmlEncode(document), i));
javascript += String.Format(#"
var win{1} = window.open('', '', '');
win{1}.document.open();
win{1}.document.write(document.getElementById('txt{1}').value);
win{1}.document.close();
win{1}.focus();
", document, i);
});
javascript += "</" + "script>";
RegisterStartupScript("javascript", javascript);
}
Put the string somewhere so you can reference it from another page... or rather, another handler. Then set the address of your new window to use this handler as it's href.

Uploading file AND text to server using Ajax in asp.net mvc

Greeting.
I want to upload an image together with a description to the server by using ajax.
The fileupload works fine, although I can't figure out how to also extract the text entered.
Basically the form looks like this:
<form id="uploader">
<input id="fileInput" type="file" multiple>
<input type="text" id="fileText" name="fileText" value=" " />
<input type="submit" value="Upload file" />
</form>
The script for the upload to the server looks like this:
document.getElementById('uploader').onsubmit = function () {
var formdata = new FormData(); //FormData object
var fileInput = document.getElementById('fileInput');
//Iterating through each files selected in fileInput
for (i = 0; i < fileInput.files.length; i++) {
//Appending each file to FormData object
formdata.append(fileInput.files[i].name, fileInput.files[i]);
}
//Creating an XMLHttpRequest and sending
var xhr = new XMLHttpRequest();
xhr.open('POST', '/Controller/Action');
xhr.send(formdata);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
return false;
}
And on the serverside, in the controller for the related action:
public JsonResult Upload(){
for (int i = 0; i < 9; i++){
HttpPostedFileBase file = Request.Files[i]; //Uploaded files
//Do stuff with uploaded files
}
}
What I've tried:
Changed the Upload method to take in a string parameter named fileText.
Changed the script to also appent the text to the formdata with these two lines inside the for-loop:
var fileText = document.getElementById('fileText');
formdata.append(fileText.value, fileText.value)
I'm probably missing something in both of my trials but I can't seem to figure out what. Please help!
Regards,
Chris
Changed the Upload method to take in a string parameter named fileText.
Correct.
Changed the script to also appent the text to the formdata with these two lines inside the for-loop:
Incorrect. You shouldn't be doing this inside the loop because you have only one input field for the text, so you can send only 1 value. So move this code outside of the loop. Also you should specify the correct name when appending to the FormData which must match your controller action parameter name:
var fileText = document.getElementById('fileText');
formdata.append('fileText', fileText.value);

Displaying all images from directory

I am trying to display images from directory , all images are loading but there are not showing , just a box of size i defined through coding .
First here is my code.
string imagepath = Server.MapPath("~/Images/");
string[] images =Directory.GetFiles(imagepath,"*.png",SearchOption.TopDirectoryOnly);
foreach (string filepath in images)
{
System.Web.UI.WebControls.Image te = new System.Web.UI.WebControls.Image();
te.ImageUrl = filepath;
te.Height = 100;
te.Width = 200;
//Here myimages is my div in which all images will be added.
myimages.Controls.Add(te);
}
Now the screen shot what i am getting .
link below:
http://pages.apunkashaher.com/error.html
So, any one can help out what is missing ?
string imagepath = Server.MapPath("~/Images/");
string[] images =Directory.GetFiles(imagepath,"*.png",SearchOption.TopDirectoryOnly);
foreach (string filepath in images)
{
Image te = new Image();
string fileurl = Path.GetFileName(filepath.ToString());
te.ImageUrl = "~/Images/" + fileurl;
te.Height = 100;
te.Width = 200;
te.CssClass = "zoom";
//Here myimages is my div in which all images will be added.
myimages.Controls.Add(te);
}
Hence Solved & Working.
I'd check what links the images are actually rendering in HTML by viewing the source, I suspect that the code is finding the images but that you are not rendering the correct URL for the browser.

URL Rewriting and a load images on my pages

I am developing a website in ASP.Net(Forms approach) and rewrite my URL manually in my global.asax file and Application_BeginRequest method
look at this code :
<div style="background-image: url(<%= ResolveUrl("~/Storage/Images/admin-bk.gif") %>);">
I use this way in my aspx file to address images or css files or js files
Problem is here :
I have a gridview(FlexiGrid) and I use Jquery Ajax and call a webmethod to populate the grid.and my web method return html code .In this html code i have some images.
If URL equals to :
http://localhost/Cpanel/BasicDefinitions/Regions
my images load right.But if URl equals to
http://localhost/Cpanel/BasicDefinitions/Regions/
my images do not load.
To solve this problem I need to use ResolveUrl again in my webmethod.But as I know it is impossible to use it in a webmethod.So is there anyone out there to help me handle this error?
This is my webmethod :
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
public static string FetchRegionList(int page, int rp, string sortname, string sortorder, string query, string qtype)
{
XDocument xmlDoc = new XDocument(
new XDeclaration("1.0", "utf-8", "yes"),
new XElement("rows",
new XElement("page", page.ToString()),
new XElement("total", RegionBLO.Load().Count.ToString()),
new XElement("row", new XAttribute("Id", row.Id.ToString()),
new XElement("cell", "<img id='imgEdit' lang='" + row.Id.ToString() + #"' style='cursor:pointer;border:0px;' src='"+ ("~/Storage/Images/FlexGrid/edit.png") + "' title='Edit' />
<img id='imgDelete' lang='" + row.Id.ToString() + "' style='cursor:pointer;border:0px;' src='"+ ("~/Storage/Images/FlexGrid/close.png") + "' title='Delete' />")
)
)
);
StringBuilder builder = new StringBuilder();
using (TextWriter writer = new StringWriter(builder))
{
xmlDoc.Save(writer);
}
return builder.ToString();
}
Thanks, Ali
Instead of adding the images as <img> tags, you could add <span> or <a> tags with predefined CSS classes edit and close.
new XElement("cell", "<a ... class='edit'></a><a ... class='delete'></a>")
Then you can use the following CSS to give those elements a background image:
a.edit, a.delete {
display: inline-block;
width: 16px;
height: 16px;
cursor: pointer;
border:0px;
background-repeat: no-repeat;
}
a.edit {
background-image: url(../Images/FlexGrid/edit.png);
}
a.delete {
background-image: url(../Images/FlexGrid/delete.png);
}
The paths to the images from the CSS file are always relative to the CSS file itself. So you don't have to worry about using ResolveUrl server-side, the browser will find the image regardless of the virtual path that the site is running from.
In this case the file locations are:
~/storage/images/edit.png
~/storage/images/delete.png
~/storage/stylesheets/site.css
And so you can see that the path ../Images/FlexGrid/edit.png, when used in the CSS file will point to the image.

Resources