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.
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>
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;
}
This is webform1 code.I want to change the class of button after button click
i call the javascript function on button click...
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="valid_try2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="JavaScript1.js"></script>
<link rel="stylesheet" href="StyleSheet1.css"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btn" class="xx" name="btn" onclick="abc()">Button</button>
</div>
</form>
</body>
</html>
This is stylesheet file where i create class
.xx {
border: 5px solid green;
}
.yy {
border: 5px solid red;
}
This is javascript file
function abc() {
$("#btn").removeClass("xx");
$("#btn").addClass("yy");
}
Your button will trigger a form post (PostBack), so all the things you do with abc() will be lost.
But since your tag is asp.net you can do this:
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="xx" OnClick="Button1_Click" />
And then in code behind:
protected void Button1_Click(object sender, EventArgs e)
{
//change the class and do other stuff after the button click
Button1.CssClass = "yy";
}
If you mislabeled your question and you want a pure javascipt/css solution, add type="button" to the button and no form post will be performed.
Please Try below code snipped hope it will help.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").toggleClass('classB');
});
});
</script>
<style>
.classA{color:red;}
.classB{color:yellow;}
</style>
</head>
<body>
<h2 class="">Click the button to change the class</h2>
<p id="p1" class="classA">I will be changed when you pressed click me</p>
<button>Click me </button>
</body>
</html>
Everything looks OK. Just add JQuery reference to aspx file.
Before add the following line.
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
I think you need something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="../js/jquery.js" type="text/javascript"></script>
<title></title>
<style>
.xx {
border: 5px solid green;
}
.yy {
border: 5px solid red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btn" class="xx" name="btn">Button</button>
</div>
</form>
<script>
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var a = $(this).attr('class');
console.log(a);
if (a === 'xx') {
$(this).removeAttr('class');
$(this).addClass("yy");
} else {
$(this).removeAttr('class');
$(this).addClass("xx");
}
});
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<script>
$(document).ready($(function() {
//Dialog box
$("#dialog").dialog({
autoOpen: false
});
//button to open dialog box
$("#button").click(function(event) {
$("#dialog").dialog("open");
});
});
</script>
<body>
//div containing info about the dialog box
<div id="dialog">
<p>This is supposed to be a calculator</p>
</div>
<input id="button" type="submit" value="Open">
</body>
</html>
Change $(document).ready($(function() { to $(document).ready(function() {
and also check if the braces are properly closed
HERE Maps JavaScript API errors in Firefox and Chrome (but not IE) when there are style sheets in the body.
Working example:
<!DOCTYPE html>
<html>
<head>
<title>Working</title>
<script type="text/javascript" src="http://js.api.here.com/se/2.5.3/jsl.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/2008/site/css/minimum" />
</head>
<body>
<div id="map" style="height: 500px; width: 500px"></div>
<script type="text/javascript">
nokia.Settings.set('appId', *REMOVED*);
nokia.Settings.set('authenticationToken', *REMOVED*);
new nokia.maps.map.Display(document.getElementById('map'));
</script>
</body>
</html>
Failing Example:
<!DOCTYPE html>
<html>
<head>
<title>Failing</title>
<script type="text/javascript" src="http://js.api.here.com/se/2.5.3/jsl.js"></script>
</head>
<body>
<div id="map" style="height: 500px; width: 500px"></div>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/2008/site/css/minimum" />
<script type="text/javascript">
nokia.Settings.set('appId', *REMOVED*);
nokia.Settings.set('authenticationToken', *REMOVED*);
new nokia.maps.map.Display(document.getElementById('map'));
</script>
</body>
</html>
The problem appears to be from the following logic:
var f = c.styleSheets, p = f.length, a, k, m = c.createElement("style");
m.setAttribute("type", "text/css");
c.getElementsByTagName("head")[0].appendChild(m);
a = f[f.length - 1];
It looks like what's happening is document.styleSheets will have elements in the body after elements in the head, so this tries to manipulate an external style sheet instead of the style element it just created.
According to the HTML5 specification on link:
If the rel attribute is used, the link element is restricted to the head
element....
Therefore your HTML5 markup is invalid, since the link should not occur within the body, this is metadata content which should be placed in the head. Obviously IE is being more lenient for some reason (I guess there must be some sort of IE specific code being used here to try and get it to be standards compliant, which happens to accept the link in a body as a by-product)