This is my _ViewStart.cshtml:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
This is my _Layout.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Lots of tags for dependencies -->
</head>
<body>
<div class="container body-content">
#RenderBody()
<div class="divider row top-buffer"></div>
<footer>
<p>© #DateTime.Now.Year - MyApp</p>
</footer>
</div>
</body>
</html>
This is my Index.cshtml:
#Html.RenderApiEndpoints()
<script type="text/javascript" src="~/Content/index.js"></script>
<div ng-app="app">
<div ng-view ></div>
</div>
I am fetching Index.cshtml like:
public class HomeController : Controller
{
[Route("")]
public ActionResult Index()
{
return View();
}
}
Since I am using client-side routing with Angular $routeProvider, I am always in Index.cshtml. Furthermore, I don't need a Layout, I just need my Index.cshtml.
How can I avoid using a Layout-File and directly start with my Index.cshtml when going to localhost in browser?
You can make Layout null then you will just see Index.cshtml view
#{
Layout = null;
}
Use null layout in the following way:
#{
Layout = null;
}
Related
I have a very large tree menu that will always be the same. Is it possible to create a custom css attribute (I don't know the technical term) so I can create the menu in an html file and only type a few characters in every page's source code to make the appear? Something like this:
// index.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing><!-- Nav menu appears here --></css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
// page_style.css
body {
body stuff
}
css_nav_thing {
src: (url="menu.html")
position: stuff;
margin: stuff'
}
.content_div {
position: stuff;
margin: stuff;
andstuf: stuff;
}
// nav_menu_style.css
body {
stuff: stuff;
]
a {
color: #374;
andstuff: stuff;
}
// content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// some_other_content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
Or can we do this with a <link src="menu.html" /> tag???
Is this possible to make adding the same menu to a bunch of pages easier than copy/pasting all of the menu's li's and ul's in to every single page? The site I'm building's going to have hundreds of pages. Hooray if I can make it easier and faster to do if this is possible!
If it is possible...how would I do it?
Use Jquery
menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
some_other_content_page.html
<html>
<head>
</head>
<body>
<div id="includedContent"></div>
//some_other_content_page.html content
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("menu.html");
});
</script>
</body>
</html>
Download Jquery
.load() documentation
I would name your menu menu.php then you can do below. This always works for me and you can always do this on any separated slides or gallery or whatever really you want to insert inside a particular page.
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<--THIS IS WHERE YOUR MENU GO-->
<?php include 'menu.php';?>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
I our project we are working with different bounded context and I am assign to one area of the domain.
We have _MasterLayout.cshtml that is our default layout in which doesn't implement twitter bootstrap and I have a _SubLayout.chstml in which I implement bootstrap.
The problem is that the style from _MasterLayout was override by the style from the _SubLayout.
Edit: Here is how I render the view.
~/Views/_MasterLayout.cshtml - no bootstrap implementation
<!DOCTYPE html>
<html>
<head>
#RenderSection("styles", false)
</head>
<body>
<div class='siteMapMenuItems'></div>
#RenderSection("SubSection")
#RenderBody()
</body>
</html>
~/Views/_SubLayout.cshtml
# {
Layout = "~/Views/_MasterLayout.cshtml";
}
#section styles
{
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Areas/xxx/css/bootstrap.css")" />
}
<div>
#section SubSection {
<h1>Title</h1>
}
#RenderBody()
#section ContentSection{
#RenderSection("ContentSection")
}
</div>
~/Views/Content.cshtml
# {
Layout = "~/Views/_SubLayout.cshtml";
}
<div>
<p>Main Content</p>
#section ContentSection{
<div>Footer<div>
}
</div>
Is there a way to prevent the _MasterLayout to adopt the bootstrap from the _SubLayout?
I am having some difficulty trying to style some of my controls in my application. I do not want the input to stretch accross the entire width of the screen, so I am trying to set the width. Below is my form.
I have a form like this:
#using (Html.BeginForm("Action", "Controller", FormMethod.Post))
{
#Html.AntiForgeryToken()
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
<label>Email</label>
<input class="form-control input-width" placeholder="email" type="email" />
</div>
}
Here is my style "input-width":
.input-width{
width:300px !important;
}
And my BundleConfig:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate.min.js"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/Model Scripts/Main/Main.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"));
bundles.IgnoreList.Clear();
BundleTable.EnableOptimizations = false;
}
And here is my master layout page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/css")
</head>
<body>
#{Html.RenderPartial("_NavBar");}
<div class="container" id="MainBody">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", false)
</body>
</html>
Why is none of my styles added to my controls? Is my order in which I load my style sheets wrong?
As far I understand styles which are expected to override default bootstrap values are located in 'Site.css'. Try to add it without bundle usage, like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/css")
<link rel="stylesheet" href="/Content/Site.css">
</head>
<body>
#{Html.RenderPartial("_NavBar");}
<div class="container" id="MainBody">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", false)
</body>
</html>
I suppose that ASP Bundle engine renders your css earlier that bootstrap's.
I am not quite sure why, but changing the order of "#Styles.Render("~/Content/css")" and "#Scripts.Render("~/bundles/modernizr")" seems to have solved my issue. My Master Layout file looks like this now.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#{Html.RenderPartial("_NavBar");}
<div class="container" id="MainBody">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", false)
</body>
</html>
Il you add .form-control this add to the input display: table-cell forcing the width to 100%.
If you don't want to delete this class, check the specicficity of your css rules, try this:
.form-group .form-control.input-width
I am a noob to ASP.NET and MVC so please bear with me, and thank you in advance for the help! --
I am trying to link to a KML file that is stored in the application's root and I cannot get it to work, see below:
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = '~/cngKml.kml'
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
It works when I point it to ther 'href' variable, but when I point it to the 'href2' variable it does not load anything.
The full index.cshtml is below:
#{
ViewBag.Title = "STI";
string path = HttpUtility.JavaScriptStringEncode(HttpContext.Current.Server.MapPath("~/kml_example2.kml"));
}
<head>
<title>CNG</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
var ge;
var placemark;
var kmlObject;
google.load("earth", "1", { "other_params": "sensor=false" });
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = '#path';
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
function kmlFinishedLoading(obj) {
kmlObject = obj;
if (kmlObject) {
if ('getFeatures' in kmlObject) {
kmlObject.getFeatures().appendChild(placemark);
}
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView())
ge.getView().setAbstractView(kmlObject.getAbstractView());
}
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
</div>
</section>
}
<div id="gearth">
<div id="map3d" style="width:960px; height:640px; align-self:center;"></div>
</div>
Resulting HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>STI</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">sti</p>
</div>
<div class="float-right">
<section id="login">
Hello, <a class="username" href="/Account/Manage" title="Manage">reecea</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="J0EkwX2027gRZ-gDCvH1WMHGpGUnW-Sl2m3jEOpKw2684DUjjywYCFBQ9pPNfJ93pyJIZ9XH9HLMYdFNiVcHohtNsvKA1sIiKf3tL3EekGI1" /> Log off
</form>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>Admin</li>
<li>My Account</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>STI.</h1>
<h2>CNG Stations Map</h2>
</hgroup>
</div>
</section>
<section class="content-wrapper main-content clear-fix">
<head>
<title>CNG</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
var ge;
var placemark;
var kmlObject;
google.load("earth", "1", { "other_params": "sensor=false" });
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = 'c:\\users\\reecea\\documents\\visual studio 2013\\Projects\\CngStationMap\\CngStationMap\\kml_example2.kml';
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
function kmlFinishedLoading(obj) {
kmlObject = obj;
if (kmlObject) {
if ('getFeatures' in kmlObject) {
kmlObject.getFeatures().appendChild(placemark);
}
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView())
ge.getView().setAbstractView(kmlObject.getAbstractView());
}
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<div id="gearth">
<div id="map3d" style="width:960px; height:640px; align-self:center;"></div>
</div>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2014 - STI</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-1.8.2.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"9f6ba0e6c2d041d29dcc37b58bbb4ef4"}
</script>
<script type="text/javascript" src="http://localhost:54165/39bfdebe74ed45968bc576a815347820/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Web.Config File:
<system.webServer>
<staticContent>
<remove fileExtension=".kml"/>
<mimeMap fileExtension=".kml" mimeType="application/vnd.google-earth.kml+xml"/>
</staticContent>
Try simply var href2 = '/cngKml.kml'
You can't use physical file paths for links (i.e. Server.MapPath("~/cngKml.kml")).
You can't use paths in client side code that the server needs to resolve either (i.e. "~/anything").
You can't declare a variable in C# and then use it in JavaScript like you attempted. In the case above, you'd need to at least use '#path' (though it still wouldn't work).
Also, please verify that navigating to a kml file on your web server will even work, as unknown file types typically aren't served up by IIS. If this is a problem, you can fix with a web.config entry similar to this SO post, more ref.
Try changing that:
var href2 = path;
to that:
var href2 = #path;
Without # char it is treated as simple JS variable
By the way, if you define variable in C# and then use it in JavaScript, don't forget to use HttpUtility.JavaScriptStringEncode:
string path = HttpUtility.JavaScriptStringEncode(HttpContext.Current.Server.MapPath("~/cngKml.km"));
i want to use Ext.net control in aspnet mvc 3 but i can not do that. Can you help me?
<h2>List</h2>
<div>
<% Ext.Net.TabPanel tb = new TabPanel() { ID="tb1", Height = 300 };
tb.Items.Add(new Ext.Net.Panel() { ID = "1", Title = "Test" });
%>
</div>
But no result return to me if i look page source result:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/WebResource.axd?d=yZr1qXAiAzbIyuMwWFg4QLahCw7ja-r5MvwrWaYGNYBiSLompC1t3Dre6yVT_nX3dE_5QRW8Pq_M_mf3ckpaRofaHZG9JTWR4XNA3Qlk1l0lrRtAk7_XdSqezLOHVVzNAnFsM_Xvd-_Jkz3oAxnZR52Pj2Gx6OQ6XgRMpjV7wg41&t=634661604900000000" />
<title>
List
</title>
<style type="text/css">
html
{
background-color:Gray;
}
.column
{
float:left;
width:75%;
border:solid 1px black;
margin-right:10px;
padding:5px;
background-color:white;
min-height:750px;
}
</style>
<script type="text/javascript" src="/WebResource.axd?d=EEB3ci-aaYX0YFB1eKO9bNJxz21l7U6Xgp6gafhX-ELA3dqrXi0vJChPyMcsY02FqNHlDFzFUXhC1Wr20e23KQDHybExiJcMtk25sY6H14MJWhlFGE-pP5O0yfnfTY5rqctCxUyaF0PEA-FTaqBmsMnVHTwakoGf9vavE-17ugQ1&t=634661604900000000"></script>
<script type="text/javascript" src="/WebResource.axd?d=MC7em5dhNLnBAdrW93hZYkG4dXWQcASL6iXw2IQb1NzxHMGA11tPZfow93hy4T_4dZqotlxW-YF95RJptzY352oINWGWb6cJr4JvBvRDC0amtlBU65lPTxvQeag4qmgoBXQ3Y-KW6mtrxsiGMKkIRQ2&t=634661604900000000"></script>
<script type="text/javascript" src="/WebResource.axd?d=hG2uE2_g7tabtfNStz4lSLSwuXYXbXisubF7Fk7ezPJp9TZl2fyBJu3H-wYG-DS9JithBK3TA4ThRCkhX53y2HlV02jYOaX-dL8EVSpL2hvpa6PYag6EVudAnf_JzCoPcMqKXc2dJ0PFK5qP7XXZeQ2&t=634661604900000000"></script>
<script type="text/javascript">
//<![CDATA[
Ext.net.ResourceMgr.init({id:"ctl00$ResourceManager1",BLANK_IMAGE_URL:"/WebResource.axd?d=SanxrxztuPyOAwG7dcFi5HvB6yOoIwnKJN3sevUiXssgue_dNhgx0KWC2p7tE4ygV4N6_n3aqstZCgfhUs4nL5nCZggPLeFdFhYYgXln5EK0OaMOfRO77y22sclo4saMp9irYOG5hNb8NvsMMkgeqm9TCwonBfPgYchN-BVRq4c1&t=634661604900000000",theme:"blue"});Ext.onReady(function(){Ext.QuickTips.init();});
//]]>
</script>
</head>
<body>
<div class="column">
<h1>Job Schedule </h1>
<h2>List</h2>
<div>
</div>
</div>
</body>
</html>
The code you have posted is WebForm syntax.
If you are using ASP.NET MVC Razor and the latest Ext.NET v2.x release, you can render all/any of the Ext.NET Components using Razor syntax.
The following sample demonstrates rendering a very simple TabPanel.
Example
#{
Layout = "";
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET Examples</title>
</head>
<body>
#Html.X().ResourceManager()
#(Html.X().TabPanel()
.Height(300)
.Items(items => {
items.Add(Html.X().Panel().Title("Test"));
}));
</body>
</html>
Hope this helps.
Page.Controls is present only in web forms. I suspect that your control is for web forms, therefore it won't work with MVC.