I am making a Carousel
using Bootstrap
.
The dados
that fed this Carousel
will be modified a few times, so I decided to create a dados.json
file to serve as the basis for these files.
I made a classe
called Template
with the required information, and a classe
called TemplateViewModel
to be able to make a list of the data contained in the file and show in Carousel
Follow the two classes below:
public class Template
{
public string Titulo { get; set; }
public string SubTitulo { get; set; }
public string Chapeu { get; set; }
public string UrlImage { get; set; }
public string UrlNoticia { get; set; }
}
public class TemplateViewModel
{
public IList<Template> Carroussel { get; set; }
}
In my Action
call ManageTemplate
I do the following:
public ActionResult ManageTemplate()
{
// Lê o arquivo dados.json
var json = System.IO.File.ReadAllText(Server.MapPath("~/Templates/") + "dados.json");
// Deserializa os dados json para o objeto
var model = JsonConvert.DeserializeObject<TemplateViewModel>(json);
// Envia o objeto para a View
return View(model);
}
In my View
I get the data and list right in Carousel
as follows:
<div id="carousel-destaque" class="carousel slide" data-ride="carousel">
@{ var count = 0;}
<ol class="carousel-indicators">
@for (var i = 0; i < 4; i++)
{
<li data-target="#carousel-destaque" data-slide-to="@i" class="@(count <= 0 ? "active" : "")"></li>
}
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
@for (var i = 0; i < 4; i++)
{
<div class="item @(count <= 0 ? "active" : "")">
<div class="featured-article">
<a href="@Model.Carroussel[i].UrlNoticia" class="foto inner-border" contenteditable="true">
<span></span>
<img height="297" width="555" src="@Model.Carroussel[i].UrlImage" class="img-responsive" alt="">
<div class="block-title">
<div class="title">
@Model.Carroussel[i].Titulo
</div>
</div>
<div class="overlay"></div>
</a>
<div class="btn-editable hide">
<a href="javascript:void(0)" class="btn btn-xs btn-success" title=""><span class="glyphicon glyphicon-ok"></span></a>
<a href="javascript:void(0)" class="btn btn-xs btn-default change-url" title=""><span class="glyphicon glyphicon-link"></span></a>
<a href="javascript:void(0)" class="btn btn-xs btn-primary change-pic" title=""><span class="glyphicon glyphicon-picture"></span></a>
</div>
</div>
</div>
count++;
}
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-destaque" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-destaque" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Carousel
is within <form>
and atributos
Html
of Carousel
is ContentEditable
, is there any way to get the changed data and send it to Action
HttpPost
to save the new data in the json file?