Rotativa HTML to PDF on ASP.NET MVC?

Rotativa HTML to PDF on ASP.NET MVC? - c#

I'm using Rotativa resources to create PDF files from my HTML page on an MVC ASP.NET project. Here is my code
...........
[HttpGet]
public ActionResult DownloadCertificate()
{
return View();
}
public ActionResult DownloadViewPDF()
{
return new Rotativa.ViewAsPdf("DownloadCertificate") { FileName = "TestViewAsPdf.pdf" };
}
priblem is it not generating my desire view's pdf.instate of it its generating my home page pdf..
my view for ActionResult DownloadCertificate() action =>
#{
ViewBag.Title = "DownloadCertificate";
Layout = "";
}
<html>
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>
Krogarna.se Certificate
</title>
<style type="text/css" media="print">
{
left: 0px !important;
width: 11in !important;
height: 8.5in !important;
font-size: 107% !important;
}
</style>
<style type="text/css" media="all">
#top {
height: 100%;
}
#position_me {
left: 0;
}
.SlideBackGround {
height: 650px;
width: 880px;
position: fixed;
margin: 10px 10px 10px 10px;
background-color: white;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/frame.png);
background-size: 880px 650px;
background-repeat: no-repeat;
z-index: 2;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/frame.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='frame.png',sizingMethod='scale')";
}
.MiddlePart {
height: 170px;
width: 670px;
position: fixed;
left: 125px;
top: 80px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/middle_part.png);
background-size: 670px 170px;
background-repeat: no-repeat;
z-index: 5;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/middle_part.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='middle_part.png',sizingMethod='scale')";
}
.Seal {
height: 90px;
width: 90px;
position: fixed;
left: 415px;
top: 420px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/sigill.png);
background-size: 90px 90px;
background-repeat: no-repeat;
z-index: 5;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/sigill.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sigill.png',sizingMethod='scale')";
}
.Ribbon {
width: 60px;
height: 90px;
position: fixed;
left: 435px;
top: 520px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/band.png);
background-size: 60px 90px;
background-repeat: no-repeat;
z-index: 5;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/band.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='band.png',sizingMethod='scale')";
}
.Signature {
width: 180px;
height: 90px;
position: fixed;
left: 582px;
top: 517px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/signature.png);
background-size: 180px 90px;
background-repeat: no-repeat;
z-index: 11;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/signature.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='signature.png',sizingMethod='scale')";
}
.DateLine {
width: 300px;
position: fixed;
left: 112px;
top: 570px;
z-index: 11;
}
.ExaminerLine {
width: 300px;
position: fixed;
left: 500px;
top: 570px;
z-index: 11;
}
.ExaminerText {
width: 270px;
position: fixed;
left: 632px;
top: 585px;
color: #8B7B67;
z-index: 11;
}
.DateText {
width: 270px;
position: fixed;
left: 232px;
top: 585px;
z-index: 11;
color: #8B7B67;
}
.ParagraphSmall {
height: 200px;
width: 500px;
position: fixed;
left: 200px;
top: 350px;
font-size: 13px;
text-align: center;
z-index: 11;
color: #8B7B67;
}
.ParagraphMedium {
height: 200px;
width: 420px;
position: fixed;
left: 240px;
top: 260px;
font-size: 14px;
text-align: center;
z-index: 11;
color: #8B7B67;
}
.HeadingLarge {
height: 200px;
width: 600px;
position: fixed;
left: 330px;
top: 130px;
font-size: 66px;
z-index: 11;
color: #8B7B67;
}
.MiddleLine {
width: 720px;
position: fixed;
left: 100px;
top: 330px;
z-index: 11;
color: #8B7B67;
}
.StudentName {
font-weight: bold;
height: 200px;
width: 720px;
position: fixed;
left: 100px;
top: 310px;
font-size: 18px;
text-align: center;
z-index: 11;
color: #8B7B67;
}
.CompletionDate {
position: fixed;
left: 225px;
top: 555px;
z-index: 11;
color: #8B7B67;
text-align: center;
}
</style>
</head>
<body>
<div class="SlideBackGround">
</div>
<div class="MiddlePart">
</div>
<div class="HeadingLarge">Kursintyg</div>
<div class="ParagraphMedium">
HÄRMED INTYGAS
ATT NEDANSTÅENDE PERSON KLARAT UTBILDNINGEN
SERVERINGSTILLSTÅND
</div>
<div class="ParagraphSmall">
Ni har visat prov på förståelse och kunnighet inom området alkoholservering. De 4 delar
som avhandlats är: alkoholpolitik, tillsyn, servering samt mat, lokal och utrustning. Ni har
efter denna utbildning de teoretiska kunskaper som krävs för att servera alkoholhaltiga
drycker.
</div>
<div class="Seal"></div>
<div class="Ribbon"></div>
<hr class="DateLine" />
<hr class="ExaminerLine" />
<hr class="MiddleLine" />
<div class="DateText">Datum</div>
<div class="ExaminerText">Examiner</div>
<div class="Signature"></div>
<div id="CompletionDatePanel" class="CompletionDate">
<span id="CompletionDateLabel">1/1/2014</span>
</div>
<div id="StudentNamePanel" class="StudentName">
<span id="StudentNameLabel">John Doe</span>
</div>
</body>
</html>
now instate of creating above views pdf it is generating my home(login) view ..cant make any sense why ...
if there anyone who can help me about this.or can give me any tip how to get rid of this . or why i have done wrong. this will be greatfull.thanks in advance.....

Maybe Rotativa is running as a different as the one logged into the app, thus, when Rotativa tries to display the page to generate the pdf, asp.mvc tells that that use users is not authenticated and redirects to the home page.
To avoid that issue, you have to autorize all users to excecute the action:
[Authorize]
[HttpGet]
public ActionResult DownloadCertificate()
{
return View();
}

Related

CSS Textarea Not Filling Parent

I am having issues getting a text area to fill a parent div. I have found solutions involving setting the box-sizing to border-box, but this is not working for me. Any help would be much appreciated!
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
#Html.TextAreaFor(a => a.TimeLine, new { #class = "form-control textarea" })
</div>
</div>
css:
.flx-modal{
display: flex;
width: 100%;
margin-bottom: 15px;
}
div.flx-txtarea {
background-color: red;
flex: 1;
margin-left: 15px;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
-moz-box-sizing: border-box !important; /* FF1+ */
}

If you add flex-direction: column, change flex: 1 to width: 100% and remove the margin-left: 15px, you get this
.flx-modal{
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 15px;
}
div.flx-txtarea {
background-color: red;
width: 100%;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box !important; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
<textarea class="form-control textarea"></textarea>
</div>
</div>
You can also add flex-wrap: wrap;, remove margin-left: 15px and add this rule
div.flx-label {
width: 100%;
}
.flx-modal{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 15px;
}
div.flx-label {
width: 100%;
}
div.flx-txtarea {
background-color: red;
flex: 1;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box !important; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
<textarea class="form-control textarea"></textarea>
</div>
</div>

How to make a white popup text box appear after clicking a button?

so right now, I have many buttons on a webpage. Most of these buttons contain one url which when clicked directly sends you to the webpage with the url. Some buttons, however, consist of multiple urls. For these buttons, I would like a white text box with the list of urls to appear after the user clicks the button. Separating these multiple urls buttons into single url buttons is not an option.
I've looked into System.Windows.Forms.MessageBox. but that does not produce desirable results.
I appreciate any help I can get. Thanks in advance.

hidden checkbox css:
html {
width: 100%;
height: 100%;
background: indigo;
text-align: center;
font-family: arial, sans-serif;
}
a, a:active, a:visited, a:focus {
text-decoration: none;
font-weight: bold;
color: indigo;
}
input {
display: none;
}
#target {
display: none;
}
#click:checked ~ label > #target {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
display: inline-block;
height: 80%;
width: 80%;
background-color: white;
outline: 6px double white;
}
.item {
color: white;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.warning {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left:0;
right:0;
margin: auto;
}
<input type="checkbox" id="click" name="click" value="click" />
<label for="click">
<p class="item"><b>google.com</b></p>
<div id=target class="item"><div class=warning>
images.google.com<br>
maps.google.com<br>
drive.google.com</div></div>
</label>

Could use help determining source of 500 (Internal Server Error) here

My method for handling the request is
[HttpPost]
public ActionResult SubmitNew ( SolutionSubmission SS )
{
// Going to move this to model later ..
using ( SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["LocalJsPracticeDb"].ConnectionString) )
{
SqlCommand cmd = new SqlCommand("AddSolution", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("#problem_id", SS.ProblemId);
cmd.Parameters.AddWithValue("#solver", SS.Solver);
cmd.Parameters.AddWithValue("#solution_code", SS.SolutionCode);
cmd.Parameters.AddWithValue("#test_code", SS.TestCode);
/*
cmd.Parameters.AddWithValue("#problem_id", 1);
cmd.Parameters.AddWithValue("#solver", "Jeff");
cmd.Parameters.AddWithValue("#solution_code", "<span>Hehe</span>");
cmd.Parameters.AddWithValue("#test_code", "<p>Yo</p>"); */
con.Open();
cmd.ExecuteNonQuery();
}
return Json(new { success = true }) ; // TEST
}
// Going to move this to model later ...
public class SolutionSubmission
{
public int ProblemId { get; set; }
public string Solver { get; set; }
public string SolutionCode { get; set; }
public string TestCode { get; set; }
}
and I call the request with
$('#submit-solution').click(function () {
var rowData = {
ProblemId : $('input[name="problem_id"]').val(),
Solver : $('input[name="solver"]').val(),
SolutionCode: $('#solution').html(),
TestCode : $('#testfuncs').html()
};
console.log(rowData); // TEST
$.ajax({
url: 'SubmitNew',
method: 'POST',
data: rowData,
success: function (retobj) {
// ...
},
error: function ( ) {
// ...
}
})
});
I've verified that rowData is valid in my test case: it is (stringified)
{"ProblemId":"1","Solver":"adas","SolutionCode":"\n\n <div class=\"CodeMirror cm-s-default\"><div style=\"overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 4px;\"><textarea autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" style=\"position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;\" tabindex=\"0\"></textarea></div><div class=\"CodeMirror-vscrollbar\" cm-not-content=\"true\"><div style=\"min-width: 1px; height: 0px;\"></div></div><div class=\"CodeMirror-hscrollbar\" cm-not-content=\"true\"><div style=\"height: 100%; min-height: 1px; width: 0px;\"></div></div><div class=\"CodeMirror-scrollbar-filler\" cm-not-content=\"true\"></div><div class=\"CodeMirror-gutter-filler\" cm-not-content=\"true\"></div><div class=\"CodeMirror-scroll\" tabindex=\"-1\"><div class=\"CodeMirror-sizer\" style=\"margin-left: 0px; margin-bottom: -23px; border-right-width: 7px; min-height: 48px; min-width: 253.208px; padding-right: 0px; padding-bottom: 0px;\"><div style=\"position: relative; top: 0px;\"><div class=\"CodeMirror-lines\"><div style=\"position: relative; outline: none;\"><div class=\"CodeMirror-measure\"><span><span></span>x</span></div><div class=\"CodeMirror-measure\"></div><div style=\"position: relative; z-index: 1;\"></div><div class=\"CodeMirror-cursors\"><div class=\"CodeMirror-cursor\" style=\"left: 4px; top: 0px; height: 20px;\"> </div></div><div class=\"CodeMirror-code\"><pre class=\" CodeMirror-line \"><span style=\"padding-right: 0.1px;\"><span class=\"cm-keyword\">function</span> <span class=\"cm-def\">myScript</span>(){<span class=\"cm-keyword\">return</span> <span class=\"cm-number\">100</span>;}</span></pre><pre class=\" CodeMirror-line \"><span style=\"padding-right: 0.1px;\"><span cm-text=\"\"></span></span></pre></div></div></div></div></div><div style=\"position: absolute; height: 7px; width: 1px; top: 48px;\"></div><div class=\"CodeMirror-gutters\" style=\"display: none; height: 308px;\"></div></div></div>","TestCode":"\n\n <div class=\"CodeMirror cm-s-default\"><div style=\"overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 4px;\"><textarea autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" style=\"position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;\" tabindex=\"0\"></textarea></div><div class=\"CodeMirror-vscrollbar\" cm-not-content=\"true\"><div style=\"min-width: 1px; height: 0px;\"></div></div><div class=\"CodeMirror-hscrollbar\" cm-not-content=\"true\"><div style=\"height: 100%; min-height: 1px; width: 0px;\"></div></div><div class=\"CodeMirror-scrollbar-filler\" cm-not-content=\"true\"></div><div class=\"CodeMirror-gutter-filler\" cm-not-content=\"true\"></div><div class=\"CodeMirror-scroll\" tabindex=\"-1\"><div class=\"CodeMirror-sizer\" style=\"margin-left: 0px; margin-bottom: -23px; border-right-width: 7px; min-height: 48px; min-width: 253.208px; padding-right: 0px; padding-bottom: 0px;\"><div style=\"position: relative; top: 0px;\"><div class=\"CodeMirror-lines\"><div style=\"position: relative; outline: none;\"><div class=\"CodeMirror-measure\"></div><div class=\"CodeMirror-measure\"></div><div style=\"position: relative; z-index: 1;\"></div><div class=\"CodeMirror-cursors\"><div class=\"CodeMirror-cursor\" style=\"left: 4px; top: 0px; height: 20px;\"> </div></div><div class=\"CodeMirror-code\"><pre class=\" CodeMirror-line \"><span style=\"padding-right: 0.1px;\"><span class=\"cm-keyword\">function</span> <span class=\"cm-def\">myScript</span>(){<span class=\"cm-keyword\">return</span> <span class=\"cm-number\">100</span>;}</span></pre><pre class=\" CodeMirror-line \"><span style=\"padding-right: 0.1px;\"><span cm-text=\"\"></span></span></pre></div></div></div></div></div><div style=\"position: absolute; height: 7px; width: 1px; top: 48px;\"></div><div class=\"CodeMirror-gutters\" style=\"display: none; height: 308px;\"></div></div></div>"}
For some reason, though, I'm getting a 500 (Internal Server Error). I get the same error when I substitute in
/*
cmd.Parameters.AddWithValue("#problem_id", SS.ProblemId);
cmd.Parameters.AddWithValue("#solver", SS.Solver);
cmd.Parameters.AddWithValue("#solution_code", SS.SolutionCode);
cmd.Parameters.AddWithValue("#test_code", SS.TestCode);
*/
cmd.Parameters.AddWithValue("#problem_id", 1);
cmd.Parameters.AddWithValue("#solver", "Jeff");
cmd.Parameters.AddWithValue("#solution_code", "<span>Hehe</span>");
cmd.Parameters.AddWithValue("#test_code", "<p>Yo</p>");
Hence there there is some problem with my SubmitNew method that doesn't have to do with the body of the method. Any idea what could be wrong?

Ok, guys. I fixed it by adding
dataType: 'json',
processData: false,
to the JSON I was passing to the server.

Xpath in IE11 not working

I am using Selenium in IE 11 with C# to automate some task. I am able to open URL in IE and click on some button but i stuck in one problem like other xpath i click on one image link but it always show xpath not found.
Here is the HTML code of the link
I tried it with both ID name src etc but no success.
<li>
<INPUT disabled id=ucTicketDetail1_btnClose title="- Cannot close
due to CM stage. Ticket must be in CM Approved or Preproduction Approved stage.
-
You don't have permission to close.
- No longer editable." style="BORDER-LEFT-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: ; BORDER-TOP- WIDTH: 0px" src="../images/tasks_disabled.gif" type=image name=ucTicketDetail1$btnClose>
<li>
Selenium Code
driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).Click();
Please help how could I write xpath for this as this application only open in IE.
here is the extended code with style
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
LI {
margin: 0;
padding: 0;
}
LI {
list-style: none;
}
LI {
float: left;
line-height: 15px;
margin: 0px 0px 0px 5px;
}
LI {
float: left;
line-height: 15px;
margin: 0px 0px 0px 5px;
}
UL {
margin: 0;
padding: 0;
}
UL {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
UL {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
DIV {
margin: 0;
padding: 0;
}
.TicketDetailHeaderRight {
float: right;
}
.TicketDetailHeader {
margin: 0px;
padding: 0 5px 5px;
min-height: 15px;
}
.SectionBody {
margin: 5px;
}
.Section {
border: 1px solid #000;
}
FORM {
margin: 0;
padding: 0;
}
BODY {
color: #000;
}
BODY {
margin: 0;
padding: 0;
}
BODY {
font: 13px/1.231 arial,helvetica,clean,sans-serif;
font-size: ;
font: x-small;
}
BODY {
margin: 0px;
padding: 0px;
color: #000000;
font-family: Verdana;
font-size: 83%;
line-height: normal;
}
HTML {
margin: 0px;
padding: 0px;
color: #000000;
font-family: Verdana;
font-size: 83%;
line-height: normal;
}
INPUT {
margin: 0;
padding: 0;
}
INPUT {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
</style>
</head>
<BODY><FORM id=formTicketDetail method=post name=formTicketDetail action=wfTicketDetail.aspx?TicketId=C110041540 _events="[object Object]">
<DIV class=Section>
<DIV class=SectionBody>
<DIV class=TicketDetailHeader>
<DIV id=ucTicketDetail1_divBtnBar class=TicketDetailHeaderRight>
<DIV id=ucTicketDetail1_updatePanelPostSaveActions>
<DIV id=ucTicketDetail1_divPostSaveActions class=PostSaveActions>
<UL>
<LI><INPUT disabled id=ucTicketDetail1_btnClose title="- Cannot close due to CM stage. Ticket must be in CM Approved or Preproduction Approved stage.
- You don't have permission to close.
- No longer editable." style="BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-TOP-WIDTH: 0px" src="../images/tasks_disabled.gif" type=image name=ucTicketDetail1$btnClose> </LI></UL></DIV></DIV></DIV></DIV></DIV></DIV></FORM></BODY>
</html>

i solve this question , actually image button is located under 2 iframe. I switch to Iframe then it start working.
Here is the code
driver.SwitchTo().Frame("wfMainIFrame");
driver.SwitchTo().Frame("wfCaseIFrame");
string atb = driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).GetAttribute("disabled");
string title = driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).GetAttribute("title");
Thanks for the help.

Why do my pictures in a asp image control look squashed?

I have an asp.net c# web page. On the page I have a image box which will randomly display an image every 5 secs or so. The problem is, some of the pictures appear squashed. All of the pictures have been cropped in photoshop to 350x350 pixels and the size of the image box is 350x350 pixles. If you look at the pictures using another program they look fine, but on the asp.net page they look funny. Can someone show me where I'm going wrong?
Thanks,
Craig
here's the source code rendered in IE, but it looks nothing like what I have in my asp.net default page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NTc5Mjg4MDYPZBYCZg9kFgICAw9kFgICAw9kFgICAw8WAh4HRW5hYmxlZGdkZESHdPrJrv0fd90yot44IdP2LuG176cv2XyHWiPVlPSh" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=DogTP9ciF8js-919lyE5BNUR3gLIy6vQ94IA8ujQqufPbSjgjYs-MB8TFhgGkZbCezg2T7MihOn_QzXNJh8bUbKXvUZPuDq-Zo79nPbUosQ1&t=634856347325009875" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=4jTc4W6vHbFONhMZfZEniQ0ll2ox3vAxSkMzYB-7HtakDqsmhXCZFBXSRwOb1nRWK6CMzP0qyRYdnYMNnTFXhx2r0J9E2ik7kM8XVmq_UBEPDXqK-kLCJqvRQAvq0wv0ZlWQS1gCjlQxcxLhV1XrJQ2&t=150492e7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=GHu6blHeASt9skHbsJx4uFWYiLKvlA8B1V1ZT8jJM7xJFl3ycZATlv3IHRrGJMm_fpPlBSBh8s1B1E7r9viSf2_vG2Xab8vHZGZqr8izsLUD5pjhbTenZ9dImmZEGONdwrT5ungX3KYzAap2ByhMGQe1RCN4HIeWzLfx9QPaNIL_dFC2Su5ez5Ui0Ux0TCBs0&t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=k0ZMcbO229cP7tJHdqfAeLLkubS_PB3nLJRGVfbZzo992j-U0QXogHZ9AeLO7yXzYa70OSzRIw-wnFwxHbCbmy30q_MrEaY-iqOTNAQzXLCt0hz--HUsMHJsrrht6bk34EjhwJc7bL5h2KjWTMIm5sDlaERrkzNMJ2CYN7WaxPRUTRyOkbTPleHmC1PMtedi0&t=ffffffff940d030f" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=7Pyyv_WcNl6DPXEjw9wnwQXSTOHSqlXve9fO2VxG4I-t0REk8QlK5V7QxKS7jkGO1CGno7PDXkPN1ApWod5KVH--pObLgj1ukjWVTcpKZZNJKm_Fz0qDQd_RVd2qBcBGOEo0qqVjh1A8QaUZNRMFCx12FzcYFbkEV_4FAwoZHekJoj0b0U3QdytSO2iP-U-F0&t=ffffffff940d030f" type="text/javascript"></script>
<div class="page">
<div class="header">
<div class="title">
<h1>
My Family Web Site
</h1>
</div>
<div class="clear hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=CEw_ah6x15SB8gE6w0h-5pVp-C_glYrwEoXIAM74CoVRv4LUELJEQWVkcLYtMPI0-_6jQVupgDDSAEIK43VxSf5HH-tcHYeqNWJ2d0U1yuU1&t=634856347325009875" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li><li><a class="level1" href="Daniel.aspx">Daniel</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$ScriptManager1', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$Timer1','MainContent_Timer1'], [], 90, 'ctl00');
//]]>
</script>
<div class="picture">
<span id="MainContent_Timer1" style="visibility:hidden;display:none;"></span>
<div id="MainContent_UpdatePanel1">
<img id="MainContent_Image1" src="Pictures/25.JPG" align="middle" style="height:350px;width:350px;" />
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
$create(Sys.UI._Timer, {"enabled":true,"interval":1500,"uniqueID":"ctl00$MainContent$Timer1"}, null, null, $get("MainContent_Timer1"));
});
//]]>
</script>
</form>
</body>
</html>
Here's the code in my asp.net page:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="FamilyWebSite._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="picture">
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="1500">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Pictures/25.JPG"
Width="350px" Height="350px" ImageAlign="Middle" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
here's the Site.css as well
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #fff;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
text-align: center;
}
h1
{
font-size: 3em;
padding-bottom: 0px;
margin-bottom: 0px;
text-align: center;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
p
{
color: #fff;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
min-height: 800px;
background-color: #778899;
margin: 20px auto 0px auto;
border: 2px solid #787878;
}
.header
{
position: relative;
margin: 2px;
padding: 0px;
background: #ccc;
width: auto;
text-align: center;
border: 2px ridge #787878;
}
.header h1
{
width: auto;
font-weight: 700;
margin: auto;
padding: 4px 4px 4px 4px;
color: Olive;
border: none;
line-height: 2em;
font-size: 2em;
text-align: center;
background: #000;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:Olive;
width:100%;
}
div.menu
{
padding: 4px 2px 2px 2px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #000;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: inline-block;
/*float: left;*/
text-align: center;
width: auto;
border: 2px groove #fff;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.picture
{
padding: 2px;
margin: 5px;
border: 3px ridge #fff;
height: auto;
width: inherit;
float: left;
}

Don't set the height and width to asp image tag. As the pictures are already cropped in photoshop to 350x350. asp image tag will render the image with original height and width.

Compiler wasn't seeing the edited picture files. A clean rebuild refreshed the resources.

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Rotativa HTML to PDF on ASP.NET MVC? - c#

Related

CSS Textarea Not Filling Parent

How to make a white popup text box appear after clicking a button?

Could use help determining source of 500 (Internal Server Error) here

Xpath in IE11 not working

Why do my pictures in a asp image control look squashed?

Categories

Resources