1
Following the instructions of this post (Return the data to the View using Json.net or javascript-Asp.net mvc) answered by Loudenvier
was like this:
Class:
public class TB_RECEBE_IMAGENS
{
public int Id { get; set; }
public string Url { get; set; }
public string Name { get; set; }
public long Size { get; set; }
}
Controller:( here I need to bring the records , path of the images that is in the database, the doubt is here, the data of the "list")
//.......................................................
public ActionResult VisualizaImagens()
{
var tbuscar = new CadastroImagemAplicacao();
var listar = tbuscar.ListarTodos();
//preencer os dados a baixo com o que vem do banco,
var model = new HomeViewModel
{
PreviewImages = new List<TB_RECEBE_IMAGENS> {
new TB_RECEBE_IMAGENS { Id = 1, Url = Url.Content("~/Content/img/galeriaimagens/sl1.jpg") },
new TB_RECEBE_IMAGENS { Id = 2, Url = Url.Content("~/Content/img/galeriaimagens/sl2.jpg") },
new TB_RECEBE_IMAGENS { Id = 3, Url = Url.Content("~/Content/img/galeriaimagens/sl3.jpg") },
new TB_RECEBE_IMAGENS { Id = 4, Url = Url.Content("~/Content/img/galeriaimagens/sl4.jpg") },
},
// size será preenchido depois (mas se vier do banco de dados, PREENCHA aqui para evitar perda de performance
InitialPreviewConfigImages = new List<TB_RECEBE_IMAGENS> {
new TB_RECEBE_IMAGENS { Id = 1, Url = Url.Content("~/Content/img/galeriaimagens/sl1.jpg"), Name = "Food-1.jpg" },
new TB_RECEBE_IMAGENS { Id = 2, Url = Url.Content("~/Content/img/galeriaimagens/sl2.jpg"), Name = "Food-2.jpg" },
new TB_RECEBE_IMAGENS { Id = 3, Url = Url.Content("~/Content/img/galeriaimagens/sl3.jpg"), Name = "Food-3.jpg" },
new TB_RECEBE_IMAGENS { Id = 4, Url = Url.Content("~/Content/img/galeriaimagens/sl4.jpg"), Name = "Food-4.jpg" },
}
};
FindFileSizes(model.InitialPreviewConfigImages);
return View(model);
}
private void FindFileSizes(List<TB_RECEBE_IMAGENS> imgs)
{
foreach (var img in imgs)
{
// é preciso converter o caminho relativo da URL em um caminho físico no servidor
var serverPath = Server.MapPath(img.Url);
if (System.IO.File.Exists(serverPath))
{
img.Size = new System.IO.FileInfo(serverPath).Length;
}
}
}
//.......................................................
In View it was like this:
@model Projeto.FileInput.Models.HomeViewModel
@{
ViewBag.Title = "VisualizaImagens";
}
<div class="container">
<form enctype="multipart/form-data">
<h1>Sending only 1 image</h1>
<input id="Image1" type="file" name="imagens01[]" class="file" data-overwrite-initial="false" data-min-file-count="1">
</form>
</div>
<script>
$("#Image1").fileinput({
uploadUrl: "@Url.Action("upload", "Home")",
uploadAsync: false,
minFileCount: 2,
maxFileCount: 5,
overwriteInitial: false,
initialPreview: [
@* Aqui using string.Join para montar os itens do array, tem um milhão de formas de fazer isso! *@
@Html.Raw(string.Join(",\r\n ",
Model.PreviewImages.Select(img => "\"<img style='height:160px' src='" + img.Url + "'>\"")))
],
initialPreviewConfig: [
@* poderia ser feito com string.Join, mas resolvi mostrar outra forma com foreach e < text > *@
@foreach (var img in Model.InitialPreviewConfigImages) {
<text>{ caption: "@img.Name", size: @img.Size, width: "120px", url: "@Url.Action("remover", "Home")", key: @img.Id },</text>
}
],
uploadExtraData: {
img_key: "1000",
img_keywords: "happy, nature",
}
});
</script>
I answered without using
ViewBag
. I used the model to make it easier to work, but it is quite simple to modify to useViewBag
.– Loudenvier
Perhaps it is more interesting to create another question by checking how to list the image data as you want, otherwise the answer here can get too long! Put there the access code to the bank, the tables, etc. So we can respond within a more well defined scope. Put at least the code of
CadastroDeImagens.ListarTodos
, here in this question (if you prefer to keep everything in one place), or in the other.– Loudenvier
http://answall.com/questions/161184/retorno-para-view-de-duas-tabelas-usando-homeviewmodel I asked a new question, thank you
– Harry