Develop Reference

How Can I Convert My Html Radio Button To ASP .NET

I Created a radio button in HTML:
.wrapper {
display: inline-flex;
background: #fff;
height: 100px;
width: 400px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.wrapper .option {
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot {
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before {
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
background: #0069d9;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"] {
display: none;
}
#option-1:checked:checked~.option-1,
#option-2:checked:checked~.option-2 {
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked~.option-1 .dot,
#option-2:checked:checked~.option-2 .dot {
background: #fff;
}
#option-1:checked:checked~.option-1 .dot::before,
#option-2:checked:checked~.option-2 .dot::before {
opacity: 1;
transform: scale(1);
}
.wrapper .option span {
font-size: 20px;
color: #808080;
}
#option-1:checked:checked~.option-1 span,
#option-2:checked:checked~.option-2 span {
color: #fff;
}
#import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
.wrapper {
display: inline-flex;
height: 100px;
width: 400px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.wrapper .option {
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot {
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before {
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"] {
display: none;
}
#option-1:checked:checked~.option-1,
#option-2:checked:checked~.option-2 {
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked~.option-1 .dot,
#option-2:checked:checked~.option-2 .dot {
background: #fff;
}
#option-1:checked:checked~.option-1 .dot::before,
#option-2:checked:checked~.option-2 .dot::before {
opacity: 1;
transform: scale(1);
}
.wrapper .option span {
font-size: 20px;
color: #808080;
}
#option-1:checked:checked~.option-1 span,
#option-2:checked:checked~.option-2 span {
color: #fff;
}
<div class="wrapper">
<input type="radio" name="select" id="option-1" checked>
<input type="radio" name="select" id="option-2">
<label for="option-1" class="option option-1">
<div class="dot"></div>
<span>MP3</span>
</label>
<label for="option-2" class="option option-2">
<div class="dot"></div>
<span>MP4</span>
</label>
</div>
I want To convert this into asp radio button and validate user input. Like if user selected mp4 then do this else do that.
I Tried To Do The same But Failed. Please HElp Me With This
Please help me. I am new in this Field
Adding Loream Ipsum For The Platform To Allow ME To Post This Question Because of less Words.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Background problem in ASP.NET using Visual Studio 2017

I'm creating a website in Visual Studio 2017, and I want to give it background images and colors.
The problem is that it isn't responding when I'm doing it in the design mode or if I'm using HTML.
Hhere's what I've tried - please tell me what I can do:
<style type="text/css">
.auto-style1 {
width: 100%;
margin-left: 64px;
}
.auto-style2 {
width: 315px;
height: 60px;
}
.auto-style6 {
color: #C2C5C5;
background-color: #FF0066;
}
.auto-style7 {
color: #563C24;
background-color: #FF0066;
}
.auto-style8 {
color: #F6AC2A;
background-color: #FF0066;
}
.auto-style9 {
color: #302805;
background-color: #FF0066;
}
.auto-style10 {
width: 178px;
height: 60px;
}
.auto-style11 {
width: 175px;
height: 60px;
}
.auto-style12 {
width: 177px;
height: 60px;
}
.auto-style13 {
background-color: #FF0066;
}
.auto-style14 {
text-align: center;
}
.auto-style15 {
background-image: url(wand.jpg);
}
</style>

Rotativa HTML to PDF on ASP.NET MVC?

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();
}

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>

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.