image inside .cshtml file:
<img src="~/Content/images/imghead.png" style=" border:4px solid #ffffff; border-radius:10px; box-shadow: 2px 2px #f2f2f2; "/>
This is how it's supposed to be:
This is how it looks:
EDIT:
The row below produces the first image (rounded corners) upthere on the HTML output. On pdf output looks like second image.
Styles are not cared.
<tr>
<td align="center" style=" height:120px; ">
<img src="https://abcstorage.blob.core.windows.net/Images/head.png" style="border:4px solid #ffffff; border-radius:10px; box-shadow: 2px 2px #f2f2f2; " />
</td>
</tr>
This is the Render() Method:
using (var pdfDocument = new Document(PageSize.A3, HorizontalMargin, HorizontalMargin, 110, 30))
{
PdfWriter pdfWriter = PdfWriter.GetInstance(pdfDocument, outputMemoryStream);
pdfWriter.CloseStream = false;
pdfWriter.PageEvent = new PrintHeaderFooter();
pdfDocument.Open();
using (var htmlViewReader = new StringReader())
{
XMLWorkerHelper.GetInstance().ParseXHtml(pdfWriter, pdfDocument, htmlViewReader);
}
}
This is not how MVC work, the way you are doing it are more Asp .net Webform style.
Use css for this, or if you need dynamic change it use ViewBag such as (not tested):
Action
public ActionResult pdfOutput(string id, string pid)
{
ViewBag.ImgHeadBorder=iTextSharp.text.Rectangle.BOX;
}
View
#if(ViewBag.ImgHeadBorder != null)
{
<img id="imgHead" src="~/Content/images/imghead.png" style="border:#ViewBag.ImgHeadBorder"/>
}
Related
I am using ASP.NET MVC 2013 with the .NET framework 4.5. I need to drag an Excel file and drop it on a <div> in the my web site, but this code doesn't work
<script>
function allowDrop(ev) {
ev.preventDefault();
alert('allowDrop');
}
function drag(ev) {
ev.dataTransfer.setData("text/html", ev.target.id);
alert('drag');
}
function drop(ev) {
ev.preventDefault();
//var data = ev.dataTransfer.getData("text/html");
//ev.target.appendChild(document.getElementById(data));
alert('drop');
}
</script>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
$("#titulo").html("Facturas");
</script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
because when I try to drag the image I get the next error message
Unhandled online 55657 , column 9 in eval code
this exception occurs in this method
function drag(ev) {
ev.dataTransfer.setData("text/html", ev.target.id);//here occurs the exception
alert('drag');
}
I am using this code only to test the html5 drag and drop property because I need to another type of file, an Excel file, but first I need to do work the drag and drop property.
Thanks for all the help.
I have the following ActionLink:
#if (ViewBag.Locality != null)
{
<h4>Active Localities:</h4>
<table class="table table-hover">
#foreach (var loc in ViewBag.Locality)
{
<tr>
<td>#loc.Locality</td>
<td>#Html.ActionLink(" ", "RemoveActive", new { #class = "removeBtn" }, new { id = #loc.Locality })</td>
</tr>
}
</table>
}
However, the class removeBtn is not being applied as below from the CSS:
a.removeBtn
{
background:url('http://news.techgenie.com/files/symbols-delete.png') no-repeat top left;
display: block;
background-size: 20px;
width: 50px;
height: 20px;
text-indent: -9999px;
}
Additionally, upon click the id is not being passed to the controller method, the parameter is being passed as null
You are using actionlink in a wrong way,here is the demonstration of proper actionlink usage:
Html.ActionLink(article.Title, <--Text of actionlink
"Item", <-- ActionMethod
"Login", <-- Controller Name.
new { article.ArticleID }, <-- Route arguments.
new { #class="btn" } <-- htmlArguments.
)
Ans for ur question is:
#Html.ActionLink("// Title //", "RemoveActive", "// Your controller Name //" ,new { id = #loc.Locality },new { #class = "removeBtn" })
i want to create tags for input data.(http://textextjs.com/manual/examples/ajax-with-filter-tags-and-autocomplete.html hear they creating tags using auto complete text box, but i don't want auto complete one)
hear is my code
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#textBox").keyup(function() {
$("#message").val($(this).val());
});
});
</script>
</head>
<body>
<div>
TextBox 1 : <input type="textbox" id="textBox"></input>
TextBox 2 : <input type="textarea" id="message"></input>
</div>
</body>
</html>
hear it reflect data of textbox1 to textbox2.
now what i want is : if user enter any data(words) in textbox1 followed by space then that word should convert into tags in textbox2
First of all type=textarea is wrong. There's no such input like that. You must be using <textarea> instead of that. Secondly, why dont you use contentditable attribute? It works just like a text area but can take HTML, is supported in all browsers, and you can use it on any block element! So replace your second input with this:
TextBox 2 : <div class="target" contenteditable="true"></div>
Then, in your code,
$("#textBox").keypress(function (e) {
if (e.which === 32) {
$(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
this.value = "";
}
});
(Disclaimer) I used the styles from SO's tags, like this :
body {
font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
}
.tag {
color: #3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #b3cee1;
border-right: 1px solid #b3cee1;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
.tag:hover {
background-color: #c4dae9;
border-bottom: 1px solid #c4dae9;
border-right: 1px solid #c4dae9;
text-decoration: none;
}
Demo : http://jsfiddle.net/hungerpain/Wky2Z/
To add the tags to an array, have a variable called tags outside the keypress function :
var tags = [];
Then, in the keypress, you've got this if loop right? Push the new value into the array :
if (e.which === 32) {
$(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
tags.push(this.value); //push the value in array
this.value = "";
}
Then, when you need to save it to DB, just join them :
tags.join("");
Then later, when you to retrieve them from DB next time, you could wrap those with the a (what we did in the keypress function)
Demo : http://jsfiddle.net/hungerpain/Wky2Z/1/
Try This:
$(document).ready(function () {
$("#textBox").keyup(function (e) {
if (e.keyCode == 32) {
$("#message").val($(this).val());
}
if ($(this).val() == '') {
$("#message").val('');
}
});
});
JSFIDDLE DEMO
In a MVC application in asp.net , in my view I have a table :
<table width="100%" class="personRow">
<tr class="personRowHeader">
<td style="width: 40%;"> Subiect </td> ...
and for table i use style personRow , an for rows personRowHeader defined like this :
table.personRow
{
background-color:#EEEEEE;
border:2px solid white;
}
table.personRow tr.personRowHeader
{
border-bottom-color : #FFFFFF;
border-bottom-style : solid;
border-bottom-width: medium;
font-weight: bold;
background-color: #CCCCFF;
}
When I use only personrow the setting for table in design of my page take the modifications , but when I use the setting for my row nothing happen.Can somebody tell me why doesn't work the setting for rows ?
I put your code in jsfiddle, replaced only the colors with more visible colors, but I see nothing wrong.
http://jsfiddle.net/e9wvY/1/
Check it out yourself, everything is working as intended.
give this a try and let me know it it worked for you:
<table width="100%" class="personRow">
<tr>
<td style="width: 40%;"> Subiect </td> .
for your css, use this block
table.personRow
{
background-color:#EEEEEE;
border:2px solid white;
}
table.personRow tr
{
border-bottom-color : #FFFFFF;
border-bottom-style : solid;
border-bottom-width: medium;
font-weight: bold;
background-color: #CCCCFF;
}
What we have done so far is removing the need to explicitly use class attribute from your TRs, and instead, let the CSS manage it by pointing out that any TR under a table that has a class of "personRow", should use this style
I have something like this
<%using (Html.BeginForm("X", "Y", FormMethod.Post, new { id="Z" })) { %>
<table align="center" style="width:70%;margin-bottom:15px;" cellspacing="5px";>
<tr>
<td width="40%">Nr.:</td>
<td width="60%"><%=Html.TextBox("Nr", Model.Nr, new { width = 130, maxlength = 10 })%></td>
</tr>
..............
Nr property is double (no attributes on it) so it is 0.0 when new Model object or a doble when i edit. When i edit i get the value in it(no class on it) when i add instead of 0.0 i see "null" in it and with that class on it (i removed all js from the Scripts folder i only have jquery and jquery vsdoc)
This is the only field i get that class on and i can't figure it why.
I don't have any other control with that id on the page.
Help please!
The input-validation-error class is generated by the built-in MVC validation. I think this class' CSS is in the Site.css file in the Content folder when using the MVC Web Application template. Scroll down to the section that looks like this:
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
color: #ff0000;
}
.field-validation-valid
{
display: none;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
After an invalid model posts, the invalid fields will have this style by default--a red border with a light red background.