To create the script already with the initialPreview completed it will not be necessary to create a method that returns JSON. It will be more efficient to modify the View that today generates the page to use a model, and in this model generate this script dynamically. There are several ways to implement this result. I will make the most immediate first.
Viewbag
Let’s fill the ViewBag, a dynamic item that can be filled with all of the data type and is available for the page rendering engine, in this case Razor. Since we’re using this simpler way to pass data to the View, I added the Image class directly in the HomeController (in your case the name of controller and of action certainly will be different!):
public class HomeController : Controller
{
public class Imagem
{
public int Id { get; set; }
public string Url { get; set; }
}
public ActionResult Index() {
// usando ViewBag... (propriedade dinâmica)
ViewBag.Images = new List<Imagem> {
new Imagem { Id = 1, Url = Url.Content("~/Content/img/galeriaimagens/sl1.jpg") },
new Imagem { Id = 2, Url = Url.Content("~/Content/img/galeriaimagens/sl2.jpg") },
new Imagem { Id = 3, Url = Url.Content("~/Content/img/galeriaimagens/sl3.jpg") },
};
return View();
}
And then in the view we use Viewbag.Images to render the list of urls that we’ll put on initial preview. Note that you must adjust the clause using at the beginning of the script to use the controller where you set the class Imagem:
@using SO_InitialPreviewMVC.Controllers;
@{
ViewBag.Title = "Home Page";
// estou já convertendo para o tipo específico para facilitar mais embaixo
var imgs = ViewBag.Images as List<HomeController.Imagem>;
}
<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 ",
imgs.Select(img => "\"<img style='height:160px' src='" + img.Url + "'>\"")))
],
initialPreviewConfig: [
{ caption: "Food-1.jpg", size: 329892, width: "120px", url: "@Url.Action("remover", "Home")", key: 1 },
{ caption: "Food-2.jpg", size: 872378, width: "120px", url: "@Url.Action("remover", "Home")", key: 2 },
{ caption: "Food-3.jpg", size: 632762, width: "120px", url: "@Url.Action("remover", "Home")", key: 3 },
{ caption: "Food-4.jpg", size: 632762, width: "120px", url: "@Url.Action("remover", "Home")", key: 4 },
],
uploadExtraData: {
img_key: "1000",
img_keywords: "happy, nature",
}
});
</script>
The rest of the view code was omitted... I left enough to understand where the changes were made.
View Model
This is what I would indicate as the best way. Let’s create a model that we will call View Model because he is the model of "vision" and not of business. It is used to facilitate view rendering and even carry validation information (in rare cases) and more.
Let’s add the Homeviewmodel class in your solution’s Models directory:
public class HomeViewModel
{
public HomeViewModel() {
// apenas para garantir que NUNCA seja nulo! Facilica código na view
PreviewImages = new List<Imagem>();
}
public List<Imagem> PreviewImages { get; set; }
}
Add your application namespace! Use your View name instead of "Home" to maintain consistency!!!
Add in Models the same Image class (that we took from the Homecontroller, since it will now be used by our HomeViewModel and probably others view models!):
public class Imagem
{
public int Id { get; set; }
public string Url { get; set; }
}
Modify the controller method to pass the template to the heavily typed view:
...
// adicione o using do seus Models (seu namespace será outro!!!)
using SO_InitialPreviewMVC.Models;
...
public ActionResult Index() {
// usando um modelo específico para a view
var model = new HomeViewModel {
PreviewImages = new List<Imagem> {
new Imagem { Id = 1, Url = Url.Content("~/Content/img/galeriaimagens/sl1.jpg") },
new Imagem { Id = 2, Url = Url.Content("~/Content/img/galeriaimagens/sl2.jpg") },
new Imagem { Id = 3, Url = Url.Content("~/Content/img/galeriaimagens/sl3.jpg") },
}
};
// passamos o modelo criado para a view
return View(model);
}
Now modify the view to be strongly typed:
@model SO_InitialPreviewMVC.Models.HomeViewModel
@{
ViewBag.Title = "Home Page";
}
<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 + "'>\"")))
],
Again, the namespace of @model will be another!
Note that we no longer use a dynamic field like the ViewBagand we even have suggestions for code completion when typing Model.... You will see that the property will appear PreviewImages.
Upshot
The Markup generated for both solutions is equal and follows below the part only of <script> in itself:
<script>
$("#Image1").fileinput({
uploadUrl: "/Home/upload",
uploadAsync: false,
minFileCount: 2,
maxFileCount: 5,
overwriteInitial: false,
initialPreview: [
"<img style='height:160px' src='/Content/img/galeriaimagens/sl1.jpg'>",
"<img style='height:160px' src='/Content/img/galeriaimagens/sl2.jpg'>",
"<img style='height:160px' src='/Content/img/galeriaimagens/sl3.jpg'>"
],
initialPreviewConfig: [
{ caption: "Food-1.jpg", size: 329892, width: "120px", url: "/Home/remover", key: 1 },
{ caption: "Food-2.jpg", size: 872378, width: "120px", url: "/Home/remover", key: 2 },
{ caption: "Food-3.jpg", size: 632762, width: "120px", url: "/Home/remover", key: 3 },
{ caption: "Food-4.jpg", size: 632762, width: "120px", url: "/Home/remover", key: 4 },
],
uploadExtraData: {
img_key: "1000",
img_keywords: "happy, nature",
}
});
</script>
Impossible to answer your question without knowing what kind of data
tbuscar.ListarTodos();returns! It would also be interesting if you posted an example of JSON that is waiting.– Loudenvier
I’ll adjust the question, just a moment
– Harry
@Loudenvier, adjusted, thank you
– Harry
You are getting what you are going through as a response. You pass
"~/Content/img/galeriaimagens/sl1.jpg"and gets it from the client. Do you want to convert it to a valid URL and send it to the client? That’s the question?– Loudenvier
want to add in the initialPreview images
– Harry
Yes, but what is the result of the JSON that you really want? If you mount the initialPreview on the server, you can use the "~ url", but if you’re going to mount on the client you already have to pass this "solved" URL. Your json is going correctly to the client in Buscaimagens, but the URL is what is going wrong, it seems to me. Try to do
URL = Page.ResolveUrl("~/Content/img/galeriaimagens/sl1.jpg")– Loudenvier
@Loudenvier, my idea would be to concatenate the result into a variable and add the result inside the initialPreview
– Harry
I got it, when you get home with an answer... but you probably don’t even need to use JSON
– Loudenvier
@Loudenvier, I appreciate your commitment to help me with this question
– Harry