Can I still use `.cshtml` files in a hybrid mobile project? - html

All the resources use only HTML, but stuff like Cordova and Ionic work on the client, with HTML pages (and JavaScript and CSS of course), and once MVC has served a page, that page is HTML, so the hybrid tooling should be able to use it.
The only problem is that once it's served, it lacks the .html extension, but maybe I can figure a way to add this.
The reason I'd like to stick to .cshtml for my layout is that I can scaffold views from my sever-side view models, and this adds quite a lot of value for me.

If the question is: can you have .cshtml files on your mobile device, the answer is no. .cshtml file is processed on server by the Razor view machine, so plain HTML can be generated. Obviously you don't have MVC, Razor and such on your hybrid ionic app.
You can however work around it by taking your angular templates to be generated on your server by MVC. So, when you setup your templateUrl somewhere, instead of taking the relative path to your local template .html file, you can point to the controller on your server, giving the full path, with http:// and so. The controller will then generate your template for you and return as plain HTML.
Bear in mind, that angular will cache this, so it will be loaded only once.

Related

Modularization of html content in Electron app

I know a typical practice to build an Electron app is to follow SPA (Single Page App). I still would like to split my html content into separate files for easy maintenance. There is still the main index.html file which is to be loaded on startup.
My question is: is there a protocol for inserting a part of html content from a different files? For eg. in Django, there is a include and extend tags where you can insert an entire html file into the body of another parent html file or retain certain features from another html file.
There's no way to do this directly. Django is a server-side framework, so you can assemble your HTML on the server, and the completed HTML is sent to the client/browser. With Electron, you're basically running Chromium with Node.js APIs added, loading your HTML from the filesystem, so there's no server to do any HTML assembly in.
However, if you just want to break up your HTML into pieces for easier maintenance, but you're not doing any of your include/extend dynamically, theoretically, you could use some kind of templating system or a static site generator to combine your HTML files statically at build time.
Here's an list of some JS templating engines: https://expressjs.com/en/resources/template-engines.html
Here's a list of some static site generators (filter language by JavaScript): https://jamstack.org/generators/

Isn't the html of the form Django displays on the screen?

Django shows you forms when you do basic coding, right?
Where is the html of the automatically generated form in windows?
So instead of looking for a template folder, once the developer writes the url or views code, he finds the location of the skeleton-only html that Django shows.
In my opinion, it looks like it's built somewhere like an "anaconda/envs" contains a separate virtual environment, but I can't find it.
it's maybe path?
It's well documented:
https://docs.djangoproject.com/en/2.2/ref/forms/renderers/
It loads templates first from the built-in form templates directory in
django/forms/templates
unless you have 3rd party libraries included that override these templates.
However, a quick check in https://github.com/django/django/tree/master/django/forms/templates/django/forms/ shows that this directory is empty.
tl;dr
Django does not render any forms from scratch (unless it's the Admin which of course creates its whole UI automatically). It just enables you to quickly create a template that can render your form but you will still have to provide a basic template (aka HTML markup with dynamic parts) yourself.

Rendering a portion of a PUG template without refreshing page

I have a pug template index.pug for my project. I have also made navbar.pug, footer.pug, sidenav.pug. These files are included in the index.pug.
For server side I am using node.js, express.js and socket.io. Now I want to update only the navbar.pug file according to server response. But when I tried to do that I found some solution. But all of them refresh the full index page.
Is there any method that can help to update an specific portion of the webpage(in PUG) without refreshing the whole page?
Thanks in advance...
No, pug is a server-side only HTML processor. As such there is no way to do what you describe here - to get pug to process more means another round trip to the server to re-render the page.
Although technically you could do this with plain JavaScript, you should look into a client-side library like jquery, React, Angular, or Vue to do what you want. A lot of us use pug in combination with those toolsets to build modern web apps, but with those frameworks pug becomes a quicker way to write HTML and is no longer a server-side pre-processor.

How to emulate the behavior of master page in Net.Core and VS Code

When building an MVC project, there's a shared folder automatically provided in which I have Layout.cshtml page that's used like the holder or master page (as it was called in Web Forms). So, all the banners, navbars, footers etc. go in there, while the acutal pages being developed refer to it in the source code and got pasted together upon rendition. This far I'm following.
Now, I have a set up and AspNet website using Yeoman and the only thing I have is wwwroot directory in which I put the file start.html. (It's the same as index.html - I just wanted to try out if I have full control over default files.)
I'm unsure how to proceed. I.e. I'd like the links on the start.html to point to files like uno.html, duo.html etc. and read those into a designated part of the landing page (i.e. start.html).
Is it doable without using the magic of templates? I want to have full control over the rendition process.
There's no point googling it, I noticed, because anything I've got the last two hours leads to how to create master page not to how to emulate master page.
Well, the static files middleware is just for that: static files.
You roughly have two options:
Do everything client sided, i.e. rather than having normal links use javascript/ajax calls and embed the content of the static file in your start.html using javascript.
It should work, but has several down-sites like it requires javascript to work (not a big issue these days, except for the paranoids who use no-script browser extensions) and that web crawler still may have issues properly indexing ajax heavy web pages
Wait until ASP.NET Core 1.2 (scheduled for Q1-Q2 2017), which will add Razor Pages. Pages rendered with Razor template engine, but without the need of a controller.
1.2
WebSockets
SignalR
Razor Pages (Views without MVC controllers)
Web API security
If you don't wanna wait, try RazorLight, which is 3rd party open source library for rendering Razor views.
But all except the first one require some "magic template engine".
You could of course write an server-sided includes (SSI) middleware which would be based on UseStaticFiles middleware and parse the file and include the html files server sided before returning it. There is nothing out of the box for it as far as I know.

Why symfony2 it rendering the whole page?

I’m working with Symfony2, and I have a base.html.twig view which includes a navbar and a logo. Also I have other views which extend the base.
When I go from one page that extends the base to another one, the whole page is being rendered in Safari even the navbar and the logo, the same when I reload the page.
Firefox works fine.
So, is there any option in symfony2 to force safari browser to reload just what the code says? (I don’t want to ask the user to install or configure anything in his/her computer).
I think I'm looking for something like that (but for Symfony2): Livereload
There are many ways to make an AJAX requests to load only part of the whole page. You can use pure JavaScript or frameworks like jQuery, Dojo, Backbone.js, Ember.js, AngularJS, Spine.js, KnockoutJS, YUI, Batman.js, Closure, Agility.js, Knockback.js, React.JS. You can use any of them. They all contain AJAX-functionality.
But you need not only JS-framework to work with partial loading. You need also to organise your controllers on the server-side. Your controllers must not extend your base.html.twig but send in response only html-part or JSON-object that represent this html-part.