Making templates for passing model to in ASP.NET MVC - asp.net-mvc-5

I'm using bootstrap and attempting to use the panel component for rendering lookup items. It renders perfectly fine, but this was all hand coded.
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
Item Number 1
</div>
<div class="panel-body">Image Carousel Goes Here</div>
<div class="panel-footer">
<table>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
<!-- etc. -->
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
Item Number 1
</div>
<div class="panel-body">Image Carousel Goes Here</div>
<div class="panel-footer">
<table>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
<!-- etc. -->
</table>
</div>
</div>
</div>
</div>
A JSFiddle is here.
I'm wondering how it'd be possible to do something like:
<div class="row">
#(foreach Item item in items)
{
#RenderItemView(item);
}
</div>
where I could dump all of the "div.col-md-4 ... slash div" code into another cshtml file and use it as a component and just pass the model to it?
I know that I could do this, but would prefer to make this a reusable component.
<div class="row">
#foreach(Item item in items)
{
// instead of using a component, setting the panel-heading off item.Number,
// panel-body by a foreach on item.ImageUrls, etc.
}
</div>
Basically, the subcomponent will be a partial view, I think, but what is the normal way of passing a model to it and it rendering at that spot (basically, like #RenderBody works on layout)

You could create a partial view which holds this content:
#model IEnumerable<ItemType>
<div class="row">
#foreach(var item in Model)
{
// instead of using a component, setting the panel-heading off item.Number,
// panel-body by a foreach on item.ImageUrls, etc.
}
</div>
Save the partial view in the Views/Shared folder, so that it's available everywhere. Then to use it:
#{Html.RenderPartial("YourPartialView", Model.Items);}

Related

how can I show car's details When click on their names

I am making a website with node.js and I am new ,I want to learn a method if there is.I list cars using ul and when I click on a car name i want to show car's details. How can I do it.
html
<template name="vehicles">
<section id="vehicles" class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title wow fadeInDown" data-wow-offset="200">Vehicle Models - <span class="subtitle">Our rental fleet at a glance</span></h2>
</div>
<!-- Vehicle nav start -->
<div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
<div id="vehicle-nav-container">
<ul class="vehicle-nav">
{{#each showcarnames}}
<li class="active">{{aracmarka}}<span class="active"> </span></li>
{{/each}}
</ul>
</div>
<div class="vehicle-nav-control">
<a class="vehicle-nav-scroll" data-direction="up" href="#"><i class="fa fa-chevron-up"></i></a>
<a class="vehicle-nav-scroll" data-direction="down" href="#"><i class="fa fa-chevron-down"></i></a>
</div>
</div>
<!-- Vehicle nav end -->
<!-- Vehicle 1 data start -->
<div class="vehicle-data" id="vehicle-1">
<div class="col-md-6 wow fadeIn" data-wow-offset="100">
<div class="vehicle-img">
<img class="img-responsive" src="img/vehicle1.jpg" alt="Vehicle">
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-offset="200">
<div class="vehicle-price">$ 37.40 <span class="info">rent per day</span></div>
<table class="table vehicle-features">
<tr>
<td>Marka</td>
<td>{{carmark}}</td>
</tr>
<tr>
<td>Model</td>
<td>{{carmodel}}</td>
</tr>
</table>
<span class="glyphicon glyphicon-calendar"></span> Reserve now
</div>
</div>
js
Template.vehicles.helpers({
showcarnames: function() {
return cars.find();
}
});
I would approach this problem using Session. You could target the data using a click event:
Template.vehicles.events({
'click .vehicle-nav li': function(){
Session.set('selected-vehicle', this._id); // or however you id the docs in your app.
}
});
then create an event helper that gets the selected doc and returns it to the template.
Template.vehicles.helpers({
getSelectedVehicle: function() {
var selectedId = Session.get('selected-vehicle');
return cars.findOne(selectedId);
},
});
Session is a great and simple tool to manage user state, like what vehicle they have selected.
Finally, you would then need to get the values in your template somewhere
<!-- html-->
{{#if getSelectedVehicle}}
{{#with getSelectedVehicle}}
<!-- mark up, when using with you can access doc atts directly. -->
{{/with}}
{{else}}
<!-- tell the user to make a selection -->
{{/if}}
using with in this context can lead to more readable markup. But there are other ways to achieve the same result.
To recap, at a high level, You are targeting the users interactions with the UI, to set a global variable as a way to simplify managing state. Be sure to check out Session in the meteor docs, its very simple and powerful. (the above code is not tested, but hopefully conveys the idea)

How to show Multinode tree picker value on its Parent Node

Hi please need help how to render my multinode tree picker value (http://screencast.com/t/NTu1NqXsTmBz) to show it on its parent node named PORTFOLIO ..
i want the multinode picker value should be placed between the Portfolio and About section (http://screencast.com/t/F0Dnnv9a) but I don't know how yet i tried render it and still not work ..
here is the finish template : screencast.com/t/ar1zeZ43Pf6J
Node tree picker code:
#if (Model.Content.HasValue("mntp_pickContent"))
{
var bannerListValue = Model.Content.GetPropertyValue<string>("mntp_pickContent");
<div id="container" class="container-portfolio">
#foreach (var item in bannerListValue.Split(','))
{
var page = Umbraco.Content(item);
<div class="col-md-4 element branding">
<div class="portfolio-item flip ">
<div class="flip-content">
<div class="front">
<img width="360" height="249" src="#page.Url" class="attachment-project-thumb wp-post-image" alt="background4" />
</div>
<div class="back">
<div class="back-content">
<h4>#page.contentTitle</h4>
<div class="txt-project">
<p>#page.contentsubTitle</p>
</div>
<i class="fa fa-plus"></i> More
</div>
</div>
</div>
</div>
<!-- flip container -->
</div>
}
</div>
}
Parent Node Portfolio.cshtml
#{ if (Model.Content.HasValue("port_backImage"))
{
var bgport = Umbraco.TypedMedia(Model.Content.GetPropertyValue<string>("port_backImage"));
<section class="section-wrap section-portfolio" style="background-image: url(#bgport.Url)" id="portfolio">
<div class="container">
<div class="container-wrap row portfolio">
<div class="container-wrap-title col-md-6">
<h2>#Model.Content.GetPropertyValue("pageTitle")</h2>
<h6>#Model.Content.GetPropertyValue("subTitleText")</h6>
</div>
<div class="container-wrap-subnav col-md-6">
<ul class="subnavigation" id="filters">
<li class="active">show all</li>
#foreach (var portMenu in Model.Content.Children)
{
<li>#portMenu.Name</li>
}
</ul>
</div>
</div>
</div>
</section>
}
}
This all depends on the Templating Engine you are using.
If you are using MVC, then you need to add your MNTP logic to a partial view.
See the following link:
https://our.umbraco.org/documentation/Reference/Templating/Mvc/partial-views
If you are using WebForms, then you will need to add your logic to a Razor file OR alternatively a UserControl (.ascx) file. See the following links:
https://our.umbraco.org/documentation/reference/templating/macros/
https://our.umbraco.org/documentation/reference/templating/macros/Razor/
http://umbraco.com/help-and-support/video-tutorials/introduction-to-umbraco/developer-introduction/using-net-user-controls

How to hide content zone on a page if body is empty?

I have some pages which don't always have content in the body and would like to then treat the zone as empty and have it hidden.
Normally I'd use
#if (Model.Content != null)
{
<section id="layout-content">
<div class="container">
<div class="row">
<div class="col-md-12">
#Zone(Model.Content)
</div>
</div>
</div>
</section>
}
Problem is that Content zone is never null on the Page, there's title and metadata. Even if I hide those with placement, it's still not null so it just displays empty tags.
<section id="layout-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="zone zone-content">
<article class="page content-item">
<header> </header>
</article>
</div>
</div>
</div>
</div>
</section>
Can I somehow check for empty body in my layout or would you suggest better approach?
Don't hide the top-level content zone from layout. Instead, override Content.cshtml and hide local zones from there.

expressionengine search {auto_path} wrong entry

I'm having trouble configuring the search results, linking to that specific result.
I've set the channel search preferences so that {auto_path} links to the relevant template group and template and I have had no trouble with this whatsoever.
The only trouble I am having is that when you click on the title of the result, when you are sent to the page that displays the specific entry, rather than display that specific entry, it shows you the most recent entry posted on that channel.
I’ve also noticed that when you click the result, the url which should display as this:
http://www.mywebsite.com/ee_site/index.php?/template_group/template/entry
actually renders as this:
http://www.mywebsite.com/ee_site/index.php?/template_group/template/?/entry
Whats up with the extra ‘?/’ inbetween the template and the entry?
Here is the code for the results page:
{embed="embeds/html-head" page_title="Blog"}
<body>
<div id="container">
{embed="embeds/header"}
{embed="embeds/navigation"}
<div id="hero">
<div id="heading">
<div id="title">
<h2>{exp:search:total_results} RESULT(S) FOR {exp:search:keywords}</h2>
</div>
</div>
<div id="blog">
<ul>
{exp:search:search_results}
<div class="blog">
<li class="search_results"><strong>{title}</strong> from <em>{channel}</em>
<br/>
{excerpt}
<br/>
</li>
</div>
{/exp:search:search_results}
</ul>
</div>
</div>
{embed="embeds/footer"}
</div>
</body>
</html>
and here is the code for a gallery entry
{embed="embeds/html-head"}
<body>
<div id="container">
{embed="embeds/header"}
{embed="embeds/navigation"}
<div id="hero">
<div id="heading">
{exp:channel:entries channel="gallery" limit="1" disable="pagination"}
<div id="title">
<h2>Gallery</h2>
</div>
<div id="story_title">
<h2>{title}</h2>
</div>
</div>
<div id="video_main">
<img class="image" src="{image}" alt="{title}">
</div>
<div id="featured" class="main">
<p>{info}</p>
<p class="url">{source}</p>
</div>
{/exp:channel:entries}
{embed="embeds/footer"}
</div>
</body>
</html>
On a category page, when you click an entry and are taken to this page, it displays the specific entry clicked on, so I know that there is nothing wrong with that aspect.
Any suggestions/solutions would be much appreciated, i'm sure it's something minor that i'm just not spotting!

Error in Expression Engine Embed

I have a site I'm working on at the moment, in which I have a sidebar displaying the 10 most recent posts (titles as links). I'm calling this in with the Embed function.
Though when I am looking on the individual post itself, the list only displays the post title that I'm on.
My embedded code calls all 10 of the recent posts in a exp:channels entry normal way.
Is there something I've done wrong? Below is the code for the main blog page:
{embed="embeds/html_header"}
<!-- content -->
{embed="embeds/html_blog_top"}
<div class="container">
<div class="row">
{embed="embeds/html_blog_sidebar"}
{exp:channel:entries channel="blog" limit="1"}
<div class="span8">
<article>
<header class="postHeader">
<div class="row-fluid">
<div class="span3 postDate">{entry_date format="%d"}<span>{entry_date format="%F"}</span></div>
<div class="span9 postPic">
<div class="imgWrapper">
{blog_image}
</div>
</div>
</div>
</header>
<div class="row">
<section class="span6 offset2">
<h2>{title}</h2>
<p>{full_entry}</p>
<p><span class='st_sharethis' displayText='ShareThis'></span>
<span class='st_facebook' displayText='Facebook'></span>
<span class='st_twitter' displayText='Tweet'></span>
</p>
</section>
</div>
</article>
</div>
{/exp:channel:entries}
</div>
</div>
</section>
<!-- footer -->
{embed="embeds/html_footer"}
This is the sidebar embed:
<aside class="span4" style="float:right;">
<section class="widget search clearfix">
<h3>news</h3>
<p>
{exp:channel:entries channel="blog" limit="10" orderby="date"}
{title}<br>
{/exp:channel:entries}
</p>
</section>
<section class="widget">
<h3>Archives</h3>
<ul>
<li>
{exp:channel:month_links channel="blog"}
{month} {year}<br>
{/exp:channel:month_links}
</li>
</ul>
</section>
</aside>
Its just the bit with the news section that I can't seem to get as a full list on the individual page.
Add dynamic="no" to your embed entries loop and you should be good.
Also, if you want answers on ExpressionEngine questions more quickly, try posting to expressionengine.stackexchange.com

Resources