MVC How to create tiles (?) in a view - asp.net-mvc

I'm sorry for what I think is a bad question. Would anyone have an example of how to create something like on the picture, so some sort of tiles, within MVC? This used to be available on https://www.exceptionnotfound.net/asp-net-mvc-demystified-display-and-editortemplates/ but it isn't anymore, and I need to know how to create something like that but haven't been able to find it.
Any help would be appreciated even if it's just the correct name of the above!

It really doesn't matter too much if its in ASP, Java Spring or plain old HTML, this is more related to CSS and Bootstrap rather than ASP.NET MVC.
This is what I would do.
Open up your Views\Home\index.html and you can delete everything and paste something like below (which makes a good starting template) - grabbed from here.
#{
ViewBag.Title = "Home Page";
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
</div>
</div>
You will get thumbnail style grid which you then need to refine (with CSS) to give it the look and feel that you're after (make you to read bootstrap's documentation).

You don't need to use MVC to create tiles. You can use CSS or Javascript. There are a number of JS/CSS libraries that will allow you to tile your HTML.
I'd post some here, but honestly you should probably just use google to find some js/css tile layout libraries so that you can find one that best fits your needs.

Related

TYPO3 - Change Layout according to amount of entrys

I want to change my Page Layout according to how many files are existing.
I developed the following code:
<f:for each="{files}" as="file">
<div class="ce-textpic-file-download-wrapper">
<a href="/fileadmin/{file.identifier}" target="_blank">
<div class="filesize">({file.originalFile})</div>
</a>
</div>
</f:for>
Now there are different cases:
No files given -> empty div
1 File given -> Just show the one File
2 Files given -> Add Row with two columns, each column is col-6 and contains the file
3 Files given -> row(col-6, col-6), row(col-6)
4 Files given -> 2 rows, each with 2 col-6
5 or more files -> Just show the first 4 Files (as described in "4
files given")
How can i accomplish something like this.
I am using Typo3-9.5.5 btw
Is this a possible solution?
<f:switch expression="{files -> f.count()}">
<f:case value="0">EMPTY</f:case>
<f:case value="1">ONE</f:case>
<f:case value="2">TWO</f:case>
<f:case value="3">THREE FILES</f:case>
<f:case value="4">FOUR</f:case>
<f:defaultCase>MORE THAN FOUR</f:defaultCase>
</f:switch>
How can i address for exmaple the third element in {files} does it work like this: {files}[2]?
EDIT:
I solved it like this (There was no need for more than one row class):
<f:if condition="{files}">
<f:if condition="{files->f:count()} == 1">
<f:then>
<div class="row download-row">
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="ce-textpic-file-download-wrapper ">
<a href="/fileadmin/{files.0.identifier}" target="_blank">
<div class="fileinfo">
{files.0.originalFile.properties.name}<br>
({files.0.originalFile.properties.size})
</div>
</a>
</div>
</div>
<div class="col-6"></div>
</div>
</f:then>
<f:else>
<div class="row">
<f:for each="{files}" as="file" iteration="iterator">
<f:if condition="{iterator.index} < 4">
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="ce-textpic-file-download-wrapper">
<a href="/fileadmin/{files.iterator.identifier}" target="_blank">
<div class="fileinfo test">
{file.originalFile.properties.name}<br>
({file.originalFile.properties.size}
</div>
</a>
</div>
</div>
</f:if>
</f:for>
</f:else>
</f:if>
</f:if>
Depending on your variety of cases you might use different f:for viewhelper or change just the rendering inside of one single f:forviewhelper for all.
But you also should make use of the information an iterator will give you inside the f:for viewhelper.
You also might use a f:cycle viewhelper, so you do not need to caclulate modulo.
Number of files: {files->f:count()}<br />
<f:for each="{files}" as="file" iteration="iterator">
<f:cycle values="{0: 'odd', 1: 'even'}" as="cycler">
<f:debug title="inside the loop">{file:file, iterator:iterator, cycler:cycler}</f:debug>
</f:cycle>
</f:for>
EDIT:
regarding your cases I think you must consider two variants:
<f:if condition="{files}">
<f:if condition="{files->f:count()} == 1">
<f:then>
<f:render section="item" arguments="{file:file}" />
</f:then>
<f:else>
<f:for each="{files}" as="file" iteration="iterator">
<f:if condition="{iterator.index} < 4">
<f:if condition="iterator.isOdd"><div class="row"></f:if>
<div class="col-6">
<f:render section="item" arguments="{file:file}" />
</div>
<f:if condition="iterator.isEven"></div></f:if>
</f:if>
</f:for>
<f:if condition="{files->f:count()} == 3"></div></f:if>
</f:else>
</f:if>
</f:if>
<f:section name="item">
<div class="ce-textpic-file-download-wrapper">
<a href="/fileadmin/{file.identifier}" target="_blank">
<div class="filesize">({file.originalFile})</div>
</a>
</div>
</f:section>
EDIT2:
<f:section name="item">
<div class="ce-textpic-file-download-wrapper">
<f:link.typolink parameter="{file.publicUrl}" target="_blank">
{file.identifier}
<span class="filesize"> ({file.size->f:format.bytes()})</span>
</a>
</div>
just remember: aside of the properties visible in a <f:debug title="file">{file}</f:debug> you have a lot of other properies, given by the getters you could see in the API

Boostrap Carousel not appearing in Rails App

I'm attempting to use a basic Bootstrap carousel in my Rails app and I've copied it over as is:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
This is currently on a partial page, but I have also tried using the carousel in different HTML pages but to no effect. I also tried using the line of javascript offered on the Bootstrap site:
$('.carousel').carousel()
...but this also made no difference. I was expecting to get something resembling an empty Bootstrap Carousel, but what I get in my page is three failed image icons with 'first slide', 'second slide' and 'third slide' next to them. It looks as though Bootstrap is not working at all, but I have already used it in this app for a Navbar and a Jumbotron, which were both successful.
This may be something quite simple, but I'm unable to find out what the problem is, so I would really appreciate some help :-)

googleads.g.doubleclick.net/pagead/id aborted

I have embedded youtube video on my webpage. Every time I visit the page, I am seeing error message "https://googleads.g.doubleclick.net/pagead/id aborted" in browser console.
Code :
<div class="channel-view-featured">
<h2>Featured Video</h2>
<a href="#" onclick="jQuery(this).next().show(); return false;" class="video-image">
<div class="play"><i class="fa fa-youtube-play"></i></div>
<img src="//img.youtube.com/vi/[youtube video id]/0.jpg" />
</a>
<div class="video-embed" style="display: none;">
<div class="video-overlay"></div>
<div class="video-wrap">
<div class="close"><i class="fa fa-times"></i></div>
<h2>[video name]</h2>
<iframe id="youtube-[youtube video id]" src="https://www.youtube.com/embed/[youtube video id]?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe> </div>
</div>
<div class="details">
<h3 class="video-name">[video name]</h3>
<ul class="video-details">
<li>Mar 04, 2016</li>
<li>1 minute 21 seconds</li>
<li>2060 views</li>
</ul>
<p class="video-description">[video description]</p>
</div>
</div>
Does any one has any idea, what can be the probable issue here and how this can be solved?
Seems Like an AdBlocker extension in enabled. you can see the same types of errors on the YouTube page itself. These Extensions block certain Web-requests if they match some sort of ad related URI.

Semantic UI - Avoid repeat links (SEO trouble) using responsive classes

I'm developing a web site, and I'm using SemanticUI.
I prepared this example to explain the problem:
<header>
<div class="ui vertical large menu red item page fluid grid">
<div class="mobile only row">
<div class="ui icon dropdown fluid center align massive button">
<i class="content icon"></i>
Menú
<div class="ui vertical menu">
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</div>
</div>
<div class="ui six menu red item fluid grid">
<div class="tablet only row">
<img src="http://goo.gl/ToQcwM" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
<div class="computer only row">
<img src="http://goo.gl/ljDWQ7" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</header>
The trouble (SEO problem) is that I have to duplicate the three links above and of course, I don't want to do it. Actually, the site is build with PHP and I don't really doubled code (it's an include in PHP).
I prepared also a fiddle. To test it, you have to redimension the window in order to see the effects.
Of course, this is not the real situation. You can see the real web if you want.
So, anyone with a solution? best practices about this?
PD: Sorry for my english! :)
Finally, I just maintain one div with all links not repeated and then with CSS style that menu for mobiles.

Create Help and Manual for MVC Application

I have a small application that needs to have a professional looking Help/Manual section. The help would consist of:
HowTos
FAQ
References
I am wondering if there is a free (Easy to learn) tool that can help me produce these documents in HTML format? Any suggestions?
Thanks for the help
for a new MVC application we are designing right now we plan to use an external help site in a wiki form. There are wiki engines like mediawiki and others, the idea is to have context sensitive help ( different help page opened from different application pages ) and also to allow users to add content like formulas and examples afterwards.
The cool thing is that a wiki track changes and does the versioning for us and for free so help can grow being fully decoupled from our application source code and users can see who has added what if they want.
in our case, it's only an Intranet application so in fact we have no security issues in the internal network.
You have to create more or lesss that has MSDN for instance.
It has two columns
The firsrt column has list of descriptions
The second column is text + images + video + links.
https://learn.microsoft.com/en-US/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-3.1&tabs=visual-studio
Simplest approach is to use static files and resources. Try it.
In ASP .Net MVC you can create special _LayoutFAQ.cshtml and apply it to IFRAME pages.
The Index FAQ page could look like following
#{
ViewBag.Title = "FAQ";
Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
<div class="container-fluid">
<h5 class="mt-1 text-center text-success mb-0">My mega FAQ</h5>
<hr class="mt-1" />
<div class="row">
<div class="col-sm-3 overflow-auto pl-0">
<ul class="">
<li><a onclick="NavigateIframe('#Url.Content("~/FAQ/Page1")');" href="#">Page 1</a></li>
<li><a onclick="NavigateIframe('#Url.Content("~/FAQ/Page2")');" href="#">Page 2</a></li>
</ul>
</div>
<div class="col-sm-9 border-left">
<div class="embed-responsive embed-responsive-16by9">
<iframe style="height:80vh!important;" id="pageContainer" class="embed-responsive-item" src=""></iframe>
</div>
</div>
</div>
</div>
<nav class="navbar fixed-bottom navbar-expand-lg navbar-light bg-light border-top border-secondary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<i class="fa fa-angle-left"></i> Back
</li>
</ul>
</div>
</nav>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(function () {
});
function NavigateIframe(url) {
event.preventDefault();
$("#pageContainer").prop("src", url);
return false;
}
</script>
}
#section head{
<style type="text/css">
</style>
}
But if your FAQ changes often you probably have to replicate backend and frontend like this https://learn.microsoft.com/en-US/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-3.1&tabs=visual-studio

Resources