I have an ASP.NET MVC 4.x application that I'm rewriting to make use of Angular2.
Due to compatibility and time constraints it isn't possible to make it a single page application and therefore I need to use the routing of ASP.NET. Due to the fact that parts of the page will still be generated serversided by ASP.NET.
Basically what I want to do is sprinkle angular2 components in a static website(as far as Angular is concerned).
An example:
<html>
<body>
<my-appmenu>Loading menu...</my-appmenu>
some static text
<my-appselectproduct>Loading the select product</my-appselectproduct>
</body>
</html>
Would be one page, but another would look like this:
<html>
<body>
<my-appmenu>Loading menu...</my-appmenu>
some other static text
<my-appselectuser>Loading the select product</my-appselectuser>
</body>
</html>
Angular2 will crash doing this because it can't find the my-appselectuser selector in the first page and the my-appselectuser selector in the second page.
I found this earlier question which the answer seems to make it work, but it will still show a lot of errors like:
EXCEPTION: Error in :0:0 caused by: The selector "my-appselectuser" did not match any elements
Does anyone know how to fix these errors? I would really like to do this withouth having to create seperate angular2 apps for each component.
Thanks in advance, Victor
Related
I am facing a weird behavior in the wicket pages of the below hierarchy.
RootPage with few Abstract tabs added and In few Abstract tabs, based on the use case we have TabbedPanel of wicket UI Jquery. like this http://www.7thweb.net/wicket-jquery-ui/tabs/TabbedPanelPage?2. To navigate between tabs, I use AjaxTabbedPanel.
Issue1: Even the Default Jquery file is getting added to the page. But the UI components are not rendered with respect to Jquery
<script type="text/javascript" src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-2.2.4-ver-F9EE266EF993962AD59E804AD9DEBE66.js"></script>
<script type="text/javascript" src="./wicket/resource/com.googlecode.wicket.jquery.ui.resource.JQueryUIResourceReference/jquery-ui-ver-0A819924D70A18322660DEE759225D2B.js"></script>
To overcome the above issue I have added the Jquery file by overriding renderHead method in RootPage. which only works on manual page refresh.
RootPage.renderHead:
#Override
public void renderHead(IHeaderResponse response){
super.render(response);
response.render(JavaScriptHeaderItem.forReference(new PackageResourceReference(RootPage.class, "jquery.min.js")));
response.render(JavaScriptHeaderItem.forReference(new PackageResourceReference(RootPage.class, "jquery-ui.min.js")));
}
Issue2: But since I made Ajax to navigate between tabs, refreshing page usingsetResponsePage() seems to be an unexpected way.
To solve the Issue1, I explicitly added jquery which lead to another problem of an explicit refresh.
Am I missing anything in the Issue1 which can solve the issue?
or Is there any way to refresh only my panels? to fix Issue2
Why do you contribute jquery.js yourself?
I'm not sure whether this is the cause of your problem but since Wicket also adds jQuery to the DOM I think you might have Javascript errors. Check the browser's DevTools console.
I have a plugable scenario on asp.net mvc. My Layout file contains a method for Head and body. Methods are rendering related plugin. So I have only one Controller/Action (Page/Index) and I dont need any view file for this action. Is that posible working without View file or only Layout file?
Thanks.
Layout example.
<html>
<head>
<title></title>
</head>
<body>
<div> MENU </div>
<div>
Plugin.Render("body"); //Render plugin method.
</div>
</body>
</html>
It seems an odd situation, but regardless:
It all depends on what you expect your one method to return. If it returns non-HTML (e.g. JSON, any primitive type, ...), you don't need it, obviously.
A HTML-layout is generally rendered via Views. I'm not sure if you can address your Master/Layout page as a view in and of itself. What I would suggest is adding a View file, setting it up with the correct Master/Layout page, and then basically empty out the view file.
So you'd have a View file, but it wouldn't have any content in it (except for the Master/Layout page setting).
It'd be slightly more understandable for future developers (although not that much), and I don't see any real downside to this (performance-wise or other).
At first If something similiar to this already has been asked, I am sorry, but that is my first question here and i didn't find anything that could had helped.
Since i dont know if it's important, my doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="container"> /* container i which everything is nested */
<div id="header">
</div>
<div id="Navigation">
<a onmouseover="Bildwechsel('Galerie','HGalerie.png');"onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> //one of the links which is causing trouble
</div>
<div id="content"></div>
</div>
and that is the mouseover function (hope you don't mind the names, i'm German):
function Bildwechsel(Bild, BildSource) {
document.images[Bild].src = BildSource; /* function i use to change pictures on mouseover */
}
In my header, i have also included two versions of jQuery (that is because a plugin needs an older version to work properly) and lightbox v2. I have implemented them with var something=jQuery.noConflict();, also inserting true in one of these declarations because otherwise it wouldn't work but since everything works fine, I think there shouldn't be a problem.
My problem know is that when i click the link with href="Galerie.htm" every browser I mentioned at the beginning excluding opera (I am using version 11.62) is navigating to Galerie.htm. But in Opera it's like the Browser's only refreshing the site, so he always stays on the same page no matter what link i click. Maybe good to know: When i right-click on the link and open it in a new tab, everything works fine.
And the second question is: Although i know what doctypes are good for, how do i know which one is best to use in my case? i already did check my html markup, getting about 50 results(?) with errors like :link rel="stylesheet" type="text/css" src="something.css" > missing slash between [...] .css" and >, but when i look it up in selfhtml it's written that way. I know that i depends on the doctype if the slash is needed or not ,but do i have to look every single slash up or is it not that important? If yes how can i achieve a valid html with 0 errors?
Since I always thought a (anchor?) links are the last thing i will have problems with I have really no clue whats going on here.
Any help would be appreciated ;)
without firing up Opera and playing with all this myself.. first, in that link you need a space between your onmouseover and onmouseout attributes.
e.g.
<a onmouseover="Bildwechsel('Galerie','HGalerie.png'); "onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> <!-- btw, "//" starts a javascript comment, but not so in HTML. //one of the links which is causing trouble -->
Does that help?
This is driving me round the bend. I'm a long time VB.NET forms developer, quite new to ASP.NET and completely new to MVC. I'm creating vbhtml pages that use the VB.NET Razor syntax, and I seem to be constantly fighting against the UI which is trying to indent my code incorrectly. Take the following example, based on the template page for a new Razor view:
#Code
Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
#If True Then
#<ul>
#For x = 1 To 2
Next
</ul>
End If '<-- Randomly indented too far
</div>
</body>
</html>
In the above example, as soon as I hit return after Next, End If two lines below randomly jumps two tabs forward from where it should be. In other examples I've hit a circle where pushing one line to the correct place throws another line out of position and vice versa.
I'm so annoyed at this point I'd be happy to disable auto-indentation completely and just manage it myself, but I can't even find out how to do that! Following advice on another thread I disabled indentation for HTML pages but all that stops is indentation of HTML tags - the code blocks still slide around all over the place.
I thought an extension might be causing the problem but I disabled them all and restarted and the problem remains. Am I doing something fundamentally wrong? I find it hard to believe Microsoft would release something so poor so it seems more likely I'm just not using it right.
I found a solution (of a fashion) on another question (I really did search hard before posting this question and couldn't find anything): Why doesn't Visual Studio code formatting work properly for Razor markup?
Essentially the solution seems to be to ensure that your code uses spaces instead of tabs for the whitespace. Whilst increasing the overall size of the page because of increased whitespace, it does lessen the problem (whilst not eliminating it completely). On the linked thread, someone who appears to be connected with Microsoft has acknowledged it is indeed a bug related to the overlapping formatters for HTML and VB.NET which they hope to improve in a new release. I've dropped to 2 spaces per indent to lessen the bandwidth impact.
Thanks to the guys who contributed.
A better alternative here(rather than using spaces for tabs), is to change the block indenting for HTML and C#/VB to "Block" instead of "Smart". This isn't a full solution, but IMO is a far less painful work-around than using spaces!
I used PHP years ago but have since been developing in C#/VB.Net.
In ASP.Net MVC 2, you can provide a master page which defines content areas eg:
<html>
<head>
<title>Overshare | <?=$Title?></title>
<ContentArea name="Head"/>
</head>
<body>
<ContentArea name="Body"/>
</body>
</html>
Your view would then have something like:
<Content name="Head">
<!-- Some Head Content -->
</Content>
<Content name="Body">
<h1>Some Body Here</h1>
</Content>
I don't seem to be able to emulate the same functionality with Code Igniter. The options seem to be:
manually pre-set some associative array of variables (eg in the controller) and then simply substitute the values into a template file - This is a lot of code to repeat in each view and doesn't belong in the controller. It also means it's a real pain to put large bodies of html into one of the ContentAreas - It's either string concatenation or something equally nasty with almost no chance of HTML intellisense in any IDE.
Use a templating library - I haven't found one which doesn't fundamentally work as described above
Now, I haven't used CodeIgniter before and am about to start a large PHP project so want to make sure it's the correct tool before actually starting work. Am I missing something obvious or is this templating functionality difficult to replicate?
Edit: Libraries tested:
Phil Sturgeon's Template Library
CI Smarty
PHXView
If you have a good idea of how your pages are to be built then you can write a set of functions to deal with it either in a MY_Controller.php file or in a library.
So you could have a routine which calls
$this->mypagetemplates();
Which calls data out of a class's properties eg $this->page->title;
I split my data as I create it into
$this->page->head,
$this->page->header,
$this->page->content,
$this->page->aside
$this->page->footer
Which corresponds with the HTML5 sections we use in 90% of our projects
My $this->mypagetemplates() function (or method if you prefer) can take a number of arguments and calls various views as a result eg:
$contentview = 'shop/products';
$asideview = 'shop/basket';
Which, if populated, are then called thus
If ($asideview) {
$this->load->view($asideview, $this->page->aside);
}
Overall Though, I'd say don't design your biggest ever project on a framework that us new to you. Play around first.
I ended up creating 3 files which represented the following
OpenHeader:
<html>
<head>
<Head Stuff/>
OpenBody:
</head>
<body>
<html>
<Templating Stuff>
Close:
</Templating Stuff>
</html>
</body>
</html>
And then modified my views to include these three at the appropriate time.
It's inelegant but flexible and powerful so it'll do for now - especially since I can pass varuables eg Page title into the files during the include if I use the CodeIgniter view engine to retrieve them