I have a default _siteLayout.cshtml file with a call to #RenderBody() in the centre of it, in between some markup and Razor code.
I have a complex .aspx page which has some markup that I wish to render where this call to #RenderBody() is made.
Essentially, I would like to make a call like this inside of a new file :
#{
Layout = "/Shared/_SiteLayout.cshtml";
#RenderPage(Default.aspx);
}
However, it is not possible to make a call to a .aspx page in this case.
Is there any simple solution to this ?
Default.aspx :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="Styles/dark-hive/jquery.ui.all.css" rel="stylesheet" type="text/css" >
<link href="Styles/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css" />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
<script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<script src="jquery/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div id="updatedialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 50px;"
title="Update or Delete Event">
<table cellpadding="0" class="style1">
<tr>
<td class="alignRight">
Name:</td>
<td class="alignLeft">
<input id="eventName" type="text" /><br /></td>
</tr>
<tr>
<td class="alignRight">
Description:</td>
<td class="alignLeft">
<textarea id="eventDesc" cols="30" rows="3" ></textarea></td>
</tr>
<tr>
<td class="alignRight">
Start Time:</td>
<td class="alignLeft">
<span id="eventStart"></span></td>
</tr>
<tr>
<td class="alignRight">
End Time: </td>
<td class="alignLeft">
<span id="eventEnd"></span><input type="hidden" id="eventId" /></td>
</tr>
</table>
</div>
<div id="addDialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 50px;" title="Add Event">
<table cellpadding="0" class="style1">
<tr>
<td class="alignRight">
Name:</td>
<td class="alignLeft">
<input id="addEventName" type="text" size="50" /><br /></td>
</tr>
<tr>
<td class="alignRight">
Description:</td>
<td class="alignLeft">
<textarea id="addEventDesc" cols="30" rows="3" ></textarea></td>
</tr>
<tr>
<td class="alignRight">
Start Time:</td>
<td class="alignLeft">
<span id="addEventStartDate" ></span></td>
</tr>
<tr>
<td class="alignRight">
End Time:</td>
<td class="alignLeft">
<span id="addEventEndDate" ></span></td>
</tr>
</table>
</div>
<div runat="server" id="jsonDiv" />
<input type="hidden" id="hdClient" runat="server" />
</form>
</body>
</html>
You could externalize the sections that you want to reuse from this .aspx page into .ascx partials and then render them:
#{
Layout = "/Shared/_SiteLayout.cshtml";
}
<div>
#Html.Partial("foo.ascx")
</div>
some other contents
And if you want to use a WebForms view with a Razor Layout, I am afraid that it's not possible. The contrary though is possible: using a Razor view with a WebForms masterpage.
The simplest solution - render that page in an iFrame from within a partial view. Its an option but in general, bad practice in cases like this (see: Are iframes considered 'bad practice'?)
The right way to handle this is to break up that aspx into modules you can use - as Darin responded with.
Related
I'm trying to use the DataTables js addon from DataTables.net in a project of mine that uses Razor Pages. However, it just doesn't want to work and I can't figure out why. I set it up in VS Code to test it out, and it worked just fine for the test. Here is the code and a screenshot of the output:
<html>
<head>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myTable').DataTable();
});
</script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
However, when I try to do the same thing in VS 2019 using Razor Pages, nothing happens, it just prints the unformatted table. Here is the code and a screenshot I have for that.
#page
#model CustomerPageTest.Pages.Customer.ListModel
#{
ViewData["Title"] = "List";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').dataTable();
});
</script>
<table id="myTable">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
As you can see, the two programs are very similar, just a little bit of a different syntax. Does anyone have any ideas on how to fix this?
Here is a snippet from the default _Layout.cshtml file:
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - RazorPages.Test - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
The view you are editing gets injected into the final HTML file when #RenderBody() is called. However, this is above a handful of scripts at the bottom of the file.
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
The first script in the list is another instance of JQuery. This means that in the resulting HTML file, you are loading JQuery two different times. When the second instance of JQuery gets loaded, it is clearing out the additional functions that the DataTables -script adds onto the JQuery object, which is why the table is not loading as expected.
To fix this issue, you can load your scripts in the view in a Razor section.
#section Scripts
{
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
}
Or, you can leave the view as is and remove JQuery from _Layout.cshtml.
I'm trying to figure out how to center this table without taking into account the third column, which is for data validation. I have it rendering exactly how I want it now with the display none attributes on the third column but then my error text won't show. What is the simplest way to go about this? Thanks!
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="budgetTracker.Login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="content/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="content/custom.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="container center">
<div class="center">
<div class="vert">
<table style="margin-left: auto; margin-right: auto;">
<tr>
<td colspan="2">
<h1>Budget Tracker Login</h1>
</td>
</tr>
<tr>
<td>
<asp:Label ID="userNamelbl" runat="server" Text="User Name"></asp:Label></td>
<td>
<asp:TextBox ID="userNameBox" class="form-control" runat="server"></asp:TextBox></td>
<td style="display: none;">
<asp:RequiredFieldValidator ID="userNameRequired" runat="server" ErrorMessage="Username is Required" ControlToValidate="userNameBox" ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>
<asp:Label ID="passwordlbl" runat="server" Text="Password"></asp:Label></td>
<td>
<asp:TextBox ID="passwordBox" class="form-control" runat="server" TextMode="Password"></asp:TextBox></td>
<td style="display: none;">
<asp:RequiredFieldValidator ID="passwordRequired" runat="server" ErrorMessage="Password is Required" ControlToValidate="passwordBox" ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="Button1" runat="server" class="btn btn-primary btn-space" Text="Login" OnClick="loginButton_Click" /></td>
</tr>
<tr>
<td colspan="2">Not yet a member? Click HERE to register!</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
Marco is right, table should be used for tabular data not for layout.
To answer your question, you can remove the "display: none;" in your td tag.
Add a label control for your error message (I'd call it "ErrorLabel") then add this code on in your "error area" (that would be inside your loginButton_Click method)
ErrorLabel.Visible = true;
In your PageLoad, add this:
if (!IsPostBack){
ErrorLabel.Visible = false;
}
I want to save information from a webpage. The user selects a frequency (530 to 1700) from a drop-down and then submits and gets a list back for that frequency. I want to loop through each value, run the query, and (after some parsing and clean-up) save the results to a file. Would prefer to do it in a C# app, but VB or Java are OK, too. I've found a number of ways to get and save the original form page. But nothing about how I can take that page in code and then submit against it to get results back. Here's the link I'm trying to query and a stripped-down look at the HTML.
http://www.topazdesigns.com/ambc/amsearch96a.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" href="aminfo.css" rel="STYLESHEET">
<title>AM Station Search</title>
</head>
<form action="/cgi-bin/amsearch96a.pl" method="post" target="amoutput">
<table style="background-color: rgb(135, 206, 250); width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td><b>AM Frequency:
<select size="1" name="freq">
<option>530
</option>
<! etc X 10>
<option selected="selected">1200
</option>
<! etc X 10>
<option>1700
</option>
</select>
</b> </td>
<td align="right"><input value="Show All Stations" name="B4" class="button" type="submit"> </td>
</tr>
</tbody>
</table>
</tbody>
<table style="background-color: rgb(135, 206, 250); width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="text-align: left;">Include power/antenna info: <input checked="checked" name="pwrant" value="on" type="checkbox"></td>
<td style="text-align: right;">Include low power (<100W) stations: <input name="lowpwr" value="on" type="checkbox"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
I have a below html code in my aspx page. I want to set the table width to 100% and it doesn't seems to work. Am I doing wrong anywhere?
<table style="width:100%">
<tr>
<td height="15">
<div id="menu">
<ul>
//page menus are being placed here
</ul>
</div>
</td>
</tr>
</table>
Also I have a grid below this table. The gridview stretches to right, but this table doesn't equally come with the gridview.
Make sure you have a proper html document:
<!doctype html>
<html>
<head>
<title>Test</title>
<style>
*{margin:0;padding:0;}//clear default browser margin & padding from all elements
html,body{width:100%;position:relative;}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td height="15">
<div id="menu">
<ul>
//page menus are being placed here
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
EDIT:
The tag does not have any CSS rules automatically applied to it. But the tag has default margins on all browsers, so all you need to do is shave them off by using the following CSS:
body {
margin: 0px;
}
Click the Run code snippet button below to check it.
body {
margin: 0px;
}
<table style="width:100%; border:1px solid black;">
<tr>
<td height="15">
<div id="menu">
<ul>
//page menus are being placed here
</ul>
</div>
</td>
</tr>
</table>
using VS 2010, C#, asp.net
I have timer control in my master page and I want to access it from my master page .cs file
But it didn't work, even when I used this code
((System.Web.UI.Timer)this.FindControl("Timer1")).Enable = false;
it look like VS don't know what is tiemr control ?!!!
please advice,
my first try was just,
Timer1.Enable=false;
and it didn't work and got this in when I run the web
"Compiler Error Message: CS1061: 'System.Web.UI.Timer' does not contain a definition for 'Enable' and no extension method 'Enable' accepting a first argument of type 'System.Web.UI.Timer' could be found (are you missing a using directive or an assembly reference?)"
here is my asp.net code
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Ads_master.master.cs" Inherits="Ads_master" %>
<!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 id="Head1" runat="server">
<title>Every200</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 22%;
}
.style2
{
width: 263px;
}
.style3
{
width: 49px;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<div class="page">
<div class="header">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="title">
<h1 style="font-family: Tahoma">
EVERY200.com
</h1>
<p style="color: #FFFF66; font-weight: 700; font-family: Tahoma;"> stop hunt cents, start hunt dollars</p>
</div>
<div class="loginDisplay">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<table class="style1">
<tr>
<td class="style2">
</td>
<td class="style2">
</td>
<td class="style2">
<asp:Label ID="Label_counter" runat="server" Font-Bold="True"
Font-Size="XX-Large" Text="0"></asp:Label>
<asp:Label ID="Label_message" runat="server" Font-Bold="True"
Font-Size="Medium"></asp:Label>
<asp:Label ID="AdsCaptchaHolder" runat="server" Visible="False"></asp:Label>
</td>
<td class="style3" style="text-align: left">
</td>
<td class="style3" style="text-align: left">
<asp:Button ID="Button_verify" runat="server" BackColor="#0033CC"
BorderStyle="Solid" Height="100%" onclick="Button1_Click" Text="Verify"
Visible="False" Width="100%" />
</td>
<td class="style3" style="text-align: left">
</td>
<td>
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="http://images.neobux.com/imagens/banner5.gif"
PostBackUrl="http://www.neobux.com/?r=amrosama77" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="10000" ontick="Timer1_Tick">
</asp:Timer>
</div>
<div class="clear hideSkiplink">
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer" align="left">
</div>
</form>
</body>
</html>
try this,
Timer tm = Master.FindControl("Timer1") as Timer;tm.Enabled = false;
If you have added timer control in Master Page file, you can access timer control directly in Masterpage code behind file.
Please refer below code:
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<asp:Timer runat="server" id="Timer1">
</asp:Timer>
</asp:ContentPlaceHolder>
Code behind file :(.cs file)
Timer1.Enabled = false;
Please check if you have added the ScriptManager code.
Hi,
Please try this code and check.
((Timer)this.FindControl("timer1")).Enabled = false;