I've got an MVC Application and I've got a ViewBag List of Items. I've got the List using Razor to show in a Modal popup and I was hoping to use said list, to dynamically display an image for each item in the list
I'm hoping for something along the lines of "~/Images/ + #ViewBag.List[i] + .jpg"
Does anyone know of a way to achieve this as I've not had much luck so far?
Any assistance on accomplishing this would be greatly appreciated!
Thanks in advance
Paul
#foreach(var item in ViewBag.List)
{
<img src="~/images/#(item).jpg" />
}
Should work for you. The issue you were running into is you do not need the:
+ #ViewBag.List[i] +
#ViewBag.List[i] will work inline without any string concatenation.
The answer to the question you asked:
#foreach(string image in ViewBag.List)
{
<img src="~/Images/#(image).jpg" />
}
But really you should be putting this into your model (not the ViewBag) and doing something similar where you iterate over the list in your model. Additionally, List is a horrible name for a list of images. You should maybe name that images instead.
Related
I am using MVC3, C# and Razor.
I have template paragraghs, which are stored and edited in the DB, like
"The sales data can be shown as follows: {SalesTable1}"
I would wish to substitute the {SalesTable1} bit with the result of some code(most likely razor) that iterates through the "Sales" class, ie
<table>
#foreach var item in Sales
{
<tr>
<td>#item.Product</td>
<td>#item.Sales</td>
</tr>
}
</table>
Code above may be not quite right, but it shows the idea.
In XSLT one would call a "template" with say a name of "SalesTable1".
What would be a good approach to solving this in Razor? BTW I am using a ViewModel where I can put my template data and my real data for processing by my View.
Thanks.
EDIT: I do not need {MySection} type tags(specifically) in the template if there is a better way of doing it. However it is important that "Admins" can edit the text around these tags within the application.
EDIT2: I have a main View which calls different Partial Views depending on different topic types. Within each Partial View I am hoping to replace the {tags} with the runtime #section templates which are also specificied in the Partial View. This seems not to work. I guess because "RenderSection" commands should appear in the Layout or parent View.
EDIT3: I think I would be better off using another RenderPartial from my Partial View. However I am unsure how I would replace the {myTable} tag with #{Html.RenderPartial("myTable");}.
<text>This is a test sentence. {myTable} After table </text>
to produce:
<text>This is a test sentence. #{Html.RenderPartial("myTable");} After table </text>
Finally I do have one issue with this approach in that if the "myTable" partial does not exist, or the {myTable} is misspelled ie {MyTablee} then the application would crash. I would want it to just carry on without running the Partial View.
You can use MVC3 Sections... they are defined as follows..
#section SideBar {
// Side bar code...
}
then when you need to render them, you simply call
#RenderSection("SideBar");
There is a great post by the GU here...
http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx
I have sorted this now by using replacing the tags for Partial Views.
Many thanks.
i'm trying to figure out how to most elegantly integrate something like PHP's nl2br() function into a current project done with JSF2/Spring. I could easily create getters using something like return text.replaceAll("\n","<br/>"); in my model classes, however that does seem like putting view related code where it does not belong. I have the same feeling about storing actual html content in my database.
I guess the cleanest solution would be using tags/EL for this, however i couldn't find something that seemed to do just that. How would you guys implement something like this? Thank you in advance, any hints are highly appreciated!
Use either CSS, assuming that the text doesn't contain any HTML
<div style="white-space: pre">#{bean.text}</div>
Or create a custom EL function and then display it unescaped (Facelets implicitly escapes HTML)
<div><h:outputText value="#{my:nl2br(bean.text)}" escape="false" /></div>
You should only make absolutely sure that it's free of XSS.
Well, in the first place JSF is a Web UI framework. So, anything that you expect to output to the user will end as HTML (with the only exception of javascript, though). So, I don't find it a grave violation of MVC (if any at all). Maybe you could even push the envelope and directly use <br/> inside the text, instead of replacing \n
In a more general sense, if you have different lines/paragraphs in your text, the more flexible/standard solution would be break your text in the different elements and let your presentation logic handle it. So, instead of a properties with
presentationPage.introductionText=Ipse Lorum ...sum.\nVini vidi vinci.
You would end with
presentationPage.introductionText.par1=Ipse Lorum ...sum.
presentationPage.introductionText.par2=vini vidi vinci.
I have an homemade javascript which, among other things, do some kind of text-formatting work in order to emulate a retro text-based game:
When developing it, i tried to stick close to an MVC model, and this is what i did:
The data model basically consists of a list of objects mapping strings to very specific locations in the display, like this
[{
"value":"Hello!",
"color":"blue",
"row":1,
"column":13
},
{
"value":"What is your quest ?",
"color":"red",
"row":5,
"column":10
},
/* ... some other data */]
Then my view consists of a simple <pre> tag. When my controller draws the model on the view, it iterates through each string-location pair and create a <span> for each one that is appended to the <pre> tag. To keep the formatting consistent, it also adds "blanck" span each time it is needed.
<pre>
<span> </span><span class="blue">Hello!</span><span> </span><br>
<!-- ... other lines of the scene-->
</pre>
It's pretty simple, but it worked great until i had to dynamically change a span text value, without redrawing the whole scene each time.
So i took a look on the internet and realized that Ember.js existed, it really seems to be exactly what i could use to improve my whole code.
Now, i tried to redesign it using Ember.js, but as i don't fully understand yet its features i ran into a problem:
How do you represent a 'text-based' view into an Ember.js handlebar template ?
What am i missing here?
My data model contains both the value and the position in the display, so i don't exactly see how handlebars template could fit my needs. Or perhaps dynamically generating the template is an option ?
What do you think ?
Am I choosing the wrong framework or misunderstanding its use? is it my original MVC design that is wrong ? Changing the data model for something completely different is not an option i can easily consider as it would impact everything.
Do you have any ideas on how this could be implemented using Ember or some other framework?
Any advice will be appreciated :)
I made a rudimentary example on jsfiddle on how you could use ember for this.
Each row is an object and we have an ArrayProxy holding such objects. Thus if we have 10 rows, we have 10 row objects.
The view is binding one output line per row object.
Enjoy the flying bird:
http://jsfiddle.net/algesten/YMrW3/2/
Edit: Better to {{#if}} away empty rows as pointed out by ud3323:
http://jsfiddle.net/ud3323/92b24/
I have a model that contains an IEnumerable of a list of custom objects. Each item needs to be displayed with about 6 fields and an image. So, I won't be using a grid to display the items, rather a div and styling to achieve the look I want. With that said, I'm looking for the appropriate approach. In the book I have, Pro ASP.NET MVC 3 Framework by Adam Freeman and Steven Sanderson, they give an example of doing something similar in their Sports Store application, where for each item, they use this code,
#foreach(var p in Model.Products) {
Html.RenderPartial("ProductSummary", p);
}
Most other reading that I've done, and what seems to be a preferred approach to this, would be to use an HtmlHelper that does basically the same thing.
Which is preferred and why would I use one approach over the other?
Thanks
EDIT
I should have mentions that each of my items will be enclosed in it's own form and have a submit button. This may be the reason the authors of the book I mentioned used the partial view.
In my opinion, I would go the helper route if there is a chance that the code would be reused somewhere else. Could it be used on another page? Or in another project?
Something else to think about...
Helpers also help you to encapsulate view code so that you can keep your view clean and simple. How complex is that view? Would encapsulating some of the code assist in making the code easier to read and maintain?
Having no luck here trying to find a solution to this.
I've set up a looping selector based on this guide. (I also used the ListLoopingDataSource class in Part 2 in order to have strings in my looping list).
What I want to be able to do is then change another element (an image box/placeholder) on my layout, based on what is currently selected in the looping selector.
No real idea how to do this, the onSelectionChanged event is kind of abstracted and not really useful? I'm not sure how to programmatically change images either, it doesn't look like I can access a resource from the code base, only from the xaml.
Any help/suggestions would be greatly appreciated.
I found that I could do this by using binding.