I'm facing a problem when I login with a username and a password then, redirected to the homepage the login button appears again in all pages where as it must be hidden until I logout. so what I want is when I click loginbutton it redirects me to the homepage but the login in <ul> must be disappeared I tried saving data in a cookie but it doesn't work.
int a = 0;
string username = "";
string random = RandomString(26);
body,
div,
p {
margin: 20px;
background-color: #e410d5;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.clear {
clear: both;
}
.content {
width: 50%;
/* background-color: rgb(254,254,254);*/
border: 8px solid #ffd800;
border-radius: 15px 15px 15px 15px;
float: left;
background-color: #b314c5;
margin-left: 420px;
margin-top: 20px;
margin-bottom: 100px;
min-height: 220px;
position: absolute;
}
.menu {
/* background-color:rgb(10,110,178);*/
width: 60%;
margin-left: 590px;
padding: 0px;
height: 40px;
color: rgb(243, 243, 243);
border-radius: 5px 5px 5px 5px;
position: center;
margin-top: -7px;
}
.menu ul li {
float: left;
display: block;
list-style: none;
/*border-right: 1px solid rgb(10,85,125);
border-left: 1px solid rgb(67,153,253);*/
}
.menu ul li:hover {
background-color: #59058a;
border-right: 1px solid #e410d5;
}
.menu ul li a {
font-size: 13px;
font-weight: bold;
line-height: 40px;
padding: 8px 20px;
/*color:rgb(255,255,255);*/
text-decoration: none;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="title" runat="server"></asp:ContentPlaceHolder>
</title>
<link href="Styles/StyleSheet.css" rel="stylesheet" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style1 {
height: 241px;
}
</style>
</head>
<body>
<form id="form1" runat="server" class="auto-style1">
<div class="wrapper">
<div class="menu">
<nav>
<ul>
<li>Home
</li>
<li id="loginlist" runat="server">Login
</li>
<li>Contact Us
</li>
<li>About Us
</li>
</ul>
</nav>
</div>
<div class="clear"></div>
<div class="content">
<asp:ContentPlaceHolder id="contentbody" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="clear">
</div>
</div>
</form>
</body>
</html>
//////////// DECLRATIONS GOES HERE /////////////////////
using (SqlConnection sqlConnection = new SqlConnection("Data Source=(local);Database='Task_Management';Integrated Security=yes;"))
{
sqlConnection.Open();
string query = "Select Emp_ID FROM dbo.Employees where Emp_ID ='" + this.UserNameTextBox.Text +"'and Emp_Password='"+ this.PasswordTextBox.Text + "'";
using (SqlCommand sqlCommand = new SqlCommand(query, sqlConnection))
{
try
{
SqlDataReader readeenter code herer = sqlCommand.ExecuteReader();
if (reader.Read())
{
string treatment = reader[0].ToString();
username = treatment;
//Cookies for each user to be signed in or logout
Response.Cookies[username].Value = UserNameTextBox.Text;
Response.Cookies[username].Expires = DateTime.Now.AddDays(1);
Label2.Text = UserNameTextBox.Text;
if (Response.Cookies[username].Value == UserNameTextBox.Text)
{
message();
var ctrl = this.Master.FindControl("loginlist"); // loginlist is the id of the login <li> in the master page
ctrl.Visible = false;
Response.Redirect("HomePage.aspx");
}
// returns 1 if the loged in user is not an admin else it returns 0
a = 1;
}
}
catch (Exception f)
{
// Exception goes here
}
}
return a;
}
Write a js code in your master page.
**Note Dowload jquery.cookie plugins
$(document).read(function(i,val){
try
{
if($.cookie["username"]!="")
{
$("#loginlist").hide();
}
else
{
$("#loginlist").show();
}
}
catch($ms)
{
$("#loginlist").show();
}
});
Take a look at the LoginView control. This allows you to show different things based on if someone is logged in or if they are anonymous.
MSDN documentation
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<%-- Show Login option --%>
<ul>
<li>Home</li>
<li id="loginlist" runat="server">Login</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<%-- Don't show Login option --%>
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
This is because of using Response.Redirect method .it will send you another page before end of execution of current page .there is another overload that accept boolean and you must send false to it.
Response.Redirect("HomePage.aspx",false);
but still it will not work .i don't know why but you can , in login page use redirect method and hide the control at home page .
At Home Page
var ctrl = this.Master.FindControl("loginlist");
ctrl.Visible = false;
At Login Page
Response.Redirect("HomePage.aspx");
More information
When Should I Use Response.Redirect(url, true)?
Related
I am having a very weird problem that I cannot figure out. I am trying to add a loading dialog box to a page that generates a pdf. I coded the web page in a separate project, and the dialog box worked perfectly. But when I included the extremely basic jquery-ui code into my existing website project, it doesn't work. Specifically, the popup doesn't go away when the PDF loads into the iframe. Basically the .load(function()) event isn't triggering.
But the event triggers just fine in my separate project. I generate the exact same pdf using the exact same data and code, and it works fine. But when put into my main project, the load event doesn't trigger.
Here is my code. The company I work for still uses webforms so ...
Code that isn't triggering
$(function () {
$("[id$=ifPDF]").load(function () {
hideDialog();
});
});
If you guys could help me find the conflict, it would be greatly appreciated
nice.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/main.master" AutoEventWireup="true" CodeFile="nice.aspx.cs" Inherits="letters_missed_appointment_nice" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" type="text/css" href="\resources\css\letters.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style type="text/css">
#dialog {
display: none;
}
</style>
<script type="text/javascript">
function showDialog() {
$("#dialog").dialog();
}
function hideDialog() {
$("#dialog").dialog("close");
}
$(function () {
$("[id$=ifPDF]").load(function () {
hideDialog();
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="pageHeader" Runat="Server">
Cabinet
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="pageContent" Runat="Server">
<h1>Nice Letter</h1>
<h3>Enter in the information below and click "Create Letter".</h3>
<asp:UpdatePanel ID="upMain" runat="server">
<ContentTemplate>
<table>
<tr>
<td>Letter Date: </td>
<td><asp:TextBox ID="txtLetterDate" runat="server"></asp:TextBox> </td>
<td>Recipient Name: </td>
<td><asp:TextBox ID="txtRecipientName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Appointment Date: </td>
<td><asp:TextBox ID="txtAppointmentDate" runat="server"></asp:TextBox> </td>
<td>Patient Name: </td>
<td><asp:TextBox ID="txtPatientName" runat="server"></asp:TextBox></td>
</tr>
<tr><td> </td></tr>
<tr>
<td><asp:Button ID="cmdCreateLetter" Text="Create Letter" OnClientClick="showDialog();" runat="server" /></td>
</tr>
</table>
<br />
<iframe id="ifPDF" visible="false" runat="server" />
<div id="dialog" title="Loading PDF">Loading PDF, Please Wait ...</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
nice.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class letters_missed_appointment_nice : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ifPDF.Attributes["class"] = "pdf_view";
cmdCreateLetter.Click += new EventHandler(Load_PDF);
}
protected void Load_PDF(object sender, EventArgs e)
{
ifPDF.Visible = true;
PDFGenerator my_doc = new PDFGenerator();
my_doc.Template = Server.MapPath("nice_letter.html");
my_doc.Add("letter_date", txtLetterDate.Text);
my_doc.Add("recipient_name", txtRecipientName.Text);
my_doc.Add("patient_name", txtPatientName.Text);
my_doc.Add("appointment_date", txtAppointmentDate.Text);
byte[] doc_array = my_doc.CreateDocument(base_url: Server.MapPath("/letters/missed_appointment/"));
string b64_doc = Convert.ToBase64String(doc_array, 0, doc_array.Length);
string pdf_src = $"data:application/pdf;base64,{b64_doc}";
ifPDF.Attributes["Src"] = pdf_src;
}
}
letters.css
body > form > main {
width: 80%;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
min-height: 800px;
}
body > form > footer {
position: static;
padding-bottom: 50px;
}
.pdf_view {
width: 100%;
height: 700px;
border: none;
}
main.css
body {
margin: 0px;
background-color: #e7e7de;
font-family: 'Roboto', sans-serif;
}
body > form > #pageGreeting {
width: calc(100%-20px);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-color: #0f3057;
box-shadow: 0px 4px 15px -1px #000000;
}
body > form > #pageGreeting > #pageTitle {
font-size: 35px;
font-weight: 700;
color: #e7e7de;
font-family: 'Courgette', cursive;
}
body > form > #pageGreeting > nav {
display: inline-block;
margin-left: 30px;
font-size: 20px;
border-left: 3px solid #e7e7de;
padding-left: 30px;
}
body > form > #pageGreeting > nav > span {
display: inline-block;
margin-left: 10px;
border-left: 1px solid #e7e7de;
border-right: 1px solid #e7e7de;
padding-left: 10px;
padding-right: 10px;
}
body > form > #pageGreeting > nav > span:first-child {
margin-left: 0px;
border-left: none;
}
body > form > #pageGreeting > nav > span:last-child {
border-right: none;
}
body > form > #pageGreeting > nav > span > a {
color: aqua;
text-decoration: none;
font-weight: 900;
font-size: 25px;
}
body > form > #pageGreeting > nav > span > a:hover {
color: blue;
}
body > form > main {
width: 100%;
background-color: #e7e7de;
min-height: 600px;
margin-top: 15px;
}
body > form > main > h1 {
display: block;
margin-left 15px;
}
body > form > footer {
position: absolute;
bottom: 0px;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-family: Arial;
font-size: 15px;
font-weight: 900;
background-color: #00597a;
color: white;
}
div.pageDescription {
width: 100%;
padding-top: 10px;
padding-bottom: 20px;
font-size: 30px;
text-align: center;
font-weight: 700;
}
main.master
<%# Master Language="C#" AutoEventWireup="true" CodeFile="main.master.cs" Inherits="main" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Courgette&family=Roboto:wght#300&display=swap" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="resources/css/main.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="frmMain" runat="server">
<asp:ScriptManager ID="smMain" runat="server"></asp:ScriptManager>
<div id="pageGreeting">
<span id="pageTitle"><asp:ContentPlaceHolder ID="pageHeader" runat="server"></asp:ContentPlaceHolder></span>
<nav><% WriteNav(); %></nav>
</div>
<main><asp:ContentPlaceHolder ID="pageContent" runat="server"></asp:ContentPlaceHolder></main>
<footer>Copyright © 2022 Renewed Life Chiropractic Center - All Rights Reserved</footer>
</form>
</body>
</html>
you have probably a block from browser "cors", check for block messages on developers console (f12) or any error messages you'd probably have to send a headers to allow show the iframe in a "parent" page
I think the ID of your iframe is changed on rendering, because you use the 'runat="server"' attribute. That's why javascript doesn't find this control by ID.
Try setting clientidmode tot static, like this:
<iframe id="ifPDF" visible="false" runat="server" ClientIDMode="Static" />
I have created a master page with header, footer, and container(for content of other pages). Footer has a 'asp.net link button' which requires <form id="form1" runat="server">. Now I have to add content in 'content page' such as 'asp buttons' 'links' etc. But 'IIS' generates error that
'a webpage can have only one server side tag.'
In master-page, I've placed <form id="form1" runat="server">under the <div class="footer-right"> tag and if I try to move <form id="form1" runat="server"> to the top of page or any where else, the CSS of search bar gets vanished. How to resolve this issue?
if I place 'form tag' on the top of page after body tag.
here is my code
master-page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication2.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="keywords" content="footer, search, form, icons" />
<title>Homepage</title>
<%--<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>--%>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/demo.css"/>
<link rel="stylesheet" href="css/footer-distributed-with-search.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
body {
margin: 0;
font-family: Arial;
}
.topnav {
overflow: hidden;
background-color: #37312f;
padding: 12px 14px;
font-family:sans-serif;
font-weight:bold;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 14px;
text-decoration: none;
font-size: 17px;
}
.topnav a.logo {
font-size: 25px;
font-weight: bold;
color: #fff;
height: 12px;
margin-left: 72px;
}
.topnav-right {
float: right;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown1 {
float: left;
overflow: hidden;
}
.dropdown1 .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 12px 14px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown1-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: -de1;
}
.dropdown1-content a {
float: none;
color: black;
padding: 12px 14px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown1:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown1-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown1:hover .dropdown1-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown1 .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown1 {
float: none;
}
.topnav.responsive .dropdown1-content {
position: relative;
}
.topnav.responsive .dropdown1 .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Website Name
<div class="topnav-right">
Home
<div class="dropdown1">
<button class="dropbtn">
Tools
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown1-content">
Link 1
Link 2
Link 3
</div>
</div>
About Us
Contact
Login
Sign Up
<%--Dropdown bar for window resize--%>
☰
</div> <%--id="Topnav-right--%>
</div> <%--id="myTopnav--%>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- The content of your page would go here. -->
<div class="container" style="background-color:aquamarine">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<footer class="footer-distributed">
<div class="footer-left">
<p class="footer-links">
Home
·
About us
·
Contact
·
Login
·
Sign up
·
Feedback
</p>
<p class="footer-company-name">websiteName © 2019</p>
</div>
<div class="footer-right">
<form id="form2" runat="server" method="get" action="#">
<input placeholder="Search our website" name="search" /><asp:LinkButton runat="server" ID="btnSubmit" class="btn btn-mini" OnClick="Page_Load">
<i class="fa fa-search" aria-hidden="true"></i></asp:LinkButton>
<%--<i class="fa fa-search"></i>--%>
</form>
</div>
</footer>
</body>
</html>
Content-page
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm5555555555555555.aspx.cs" Inherits="WebApplication2.WebForm5555555555555555" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<%--<form is="form1" runat="server">--%>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
<%-- </form>--%>
</asp:Content>
footer-distributed-with-search.css
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
font: bold 16px sans-serif;
text-align: left;
padding: 50px 60px;
margin-top: 80px;
overflow: hidden;
}
/* Footer left */
.footer-distributed .footer-left{
float: left;
}
.footer-distributed .footer-links{
color: #ffffff;
margin: 0 0 10px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer right */
.footer-distributed .footer-right{
float: right;
}
/* The search form */
.footer-distributed form{
position: relative;
}
.footer-distributed form input{
display: block;
border-radius: 3px;
box-sizing: border-box;
background-color: #1f2022;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
border: none;
font: inherit;
font-size: 14px;
font-weight: normal;
color: #d1d2d2;
width: 500px;
padding: 18px 50px 18px 18px;
}
.footer-distributed form input:focus{
outline: none;
}
/* Changing the placeholder color */
.footer-distributed form input::-webkit-input-placeholder {
color: #5c666b;
}
.footer-distributed form input::-moz-placeholder {
opacity: 1;
color: #5c666b;
}
.footer-distributed form input:-ms-input-placeholder{
color: #5c666b;
}
/* The magnify glass icon */
.footer-distributed form i{
width: 18px;
height: 18px;
position: absolute;
top: 16px;
right: 18px;
color: #d1d2d2;
font-size: 18px;
}
/* If you don't want the footer to be responsive, remove these media queries */
#media (max-width: 1000px) {
.footer-distributed form input{
width: 300px;
}
}
#media (max-width: 800px) {
.footer-distributed{
padding: 30px;
text-align: center;
font: bold 14px sans-serif;
}
.footer-distributed .footer-company-name{
margin-top: 10px;
font-size: 12px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-right{
float: none;
max-width: 300px;
margin: 0 auto;
}
.footer-distributed .footer-left{
margin-bottom: 20px;
}
.footer-distributed form input{
width: 100%;
}
}
CSS template I've used
Beautiful and Responsive Footer Templates
In your case, the style sheets included in your master page are using relative paths. Specify your style sheet links with runat=server and prefix them with the virtual web root path (~).
An example:
<link rel="stylesheet" href="~/css/demo.css" runat="server"/>
<link rel="stylesheet" href="~/css/footer-distributed-with-search.css" runat="server"/>
Do this for all your style sheets on your page (obviously not the CDN links) and place your <form> after <body> and please ensure that the <head> element also needs to be runat=server. Using the virtual web root path (~) will work when you publish your site in a virtual directory so you don't encounter problems as such.
i am making simple website and i made a menu and i want do redirect other views when i clicked links which is on menu
<!DOCTYPE html>
<html>
<head>
<title>#Page.Title</title>
#RenderSection("head", required: false)
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #555;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: white;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: #000;
}
li a:hover:not(.active) {
background-color: #f1f1f1;
color: #000
}
</style>
</head>
<body>
<div>
<ul>
<li>Kitapları Görüntüle</li>
<li>Kitap Kiralama</li>
<li>Öğrencileri Görüntüle</li>
<li>Öğrenci Ekle</li>
<li>Kitap Ekle</li>
<li>Kiralanmış Kitap Listesi</li>
<li>Görevli Atama</li>
<li><img src="~/img/tpl_logo.gif" style="height:130px;width:325px;margin-left:5px" /></li>
</ul>
</div>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
#RenderBody()
</div>
</body>
</html>
this is my master page. when i add #Url.Action Url does not exist in the current context. when i clickedd on for example "KitapGoruntule" i want to open view in home name is KitapGoruntule
Using an ActionLink will create the <a> tag for you.
In your case:
#Html.ActionLink("Kitapları Görüntüle", "KitapGoruntule", "Home")
Creates:
Kitapları Görüntüle
It should work, it looks like reference to System.Web.Mvc is missing, please confirm the reference of that DLL in your project.
EDIT:
Also confirm the the below tag in your MAIN web.config:
<add key="webpages:Version" value="3.0.0.0" />
You can use the link button like this
Kitapları Görüntüle
I have a view displays review from the database Reviews Table. Brief information for each item is display at first (ReviewID, Author and Date Create), then if you click on the ReviewID, the Rating and Feedback is displayed in a pop-up. The problem is pop-up gives the same details(Rating and Feedback) as the first item displayed. The pictures below give a visual representation of the problem
When on you click on Review Number: 5002(This is the ReviewID (ID:5002) in the table) a pop up is produced display the ReviewID's Rating and Feedback
However if you click on Review Number: 5006 (ID:5006), the content on the pop-up is not the corresponding to 5006 but to 5002
Here is my code for the View
#{
ViewBag.Title = "Index";
Layout = "";
}
#model PagedList.IPagedList<Siza.Models.Review>
#using PagedList.Mvc;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon"s
type="image/png"
href="~/Content/favicon.ico" />
<title>Siza</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Demo-->
<link rel="stylesheet" type="text/css" href="~/Content/css/normalize.css">
<style>
textarea {
overflow-y: scroll;
height: 100px;
resize: none;
}
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
</head>
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li href="#reviewpopup">
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
<table class="table text-center width:50%">
<tr>
<td>
#Html.PagedListPager(Model, Page => Url.Action("StudentWellnessReviews",
new { Page, pageSize = Model.PageSize }))
Showing #Model.FirstItemOnPage to #Model.LastItemOnPage of #Model.TotalItemCount Reviews
</td>
</tr>
</table>
I really not sure how to solve this issue. Help would be greatly apprececiated
On HTML page there can be only one element with specific id. In your case I would add Model.ReviewId to the id attribute of your popup and href attribute of your <a> element.
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup_#Model.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
Also href attribute in <li> element is invalid, so you should remove it.
Desired result would be
<div id="reviewpopup_1">
//div content here
</div>
and later
Review Number: #Html.DisplayFor(modelItem => item.ReviewID)
I managed to figure it out:) You can use the item.ReviewID as a div ID
{
//Popup window content
<div id="#item.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: </h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
I am trying to build a master page for a website in ASP.NET, and after several trials, I couldn't display the page in my web browser. I have changed browsers thinking that source of the problem might be that. However the same problem is occurring: I get exactly a blank page without anything on it: In the designer of visual Studio, I can see a sample view of how the website will look like (I have all the files needed for the pictures of the background and the profile picture.)
What might be the problem?
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<link href="/normalize.css" rel="stylesheet">
<style>
header {
text-align: center;
background-image: url("/Pictures/Harvard-widerBlurred.jpg");
background-size: cover;
color: white;
}
a {
color: white;
}
h1 {
font-size: 70px;
}
img {
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 20px;
}
ul {
padding: 10px;
background: rgba(0,0,0,0.5);
}
li {
display: inline;
padding: 0px 10px 0px 10px;
}
article{
max-width: 500px;
padding: 20px;
margin: 0 auto;
}
#media (max-width: 500px){
li{
display: block;
padding: 5px;
}
h1{
font-size: 36px;
}
body {
background: red;
}
}
</style>
<header>
<img src="/Pictures/GoExchangelogo.jpg">
<h1>GoExchange!</h1>
<ul>
<li>AboutUs</li>
<li>My Appointment</li>
<li>My Application</li>
</ul>
</header>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Thank you