I'm trying to display a table from a model. But the problem is that my model class has a string that already includes an <a> tag.
My view is:
#model MyWeb.Models.Incidente
#{
Layout = null;
ViewBag.Title = "Communication for " + Model.num.ToString();
}
<h2>#ViewBag.Title</h2>
<table class="table">
<tr>
<th> User </th>
<th> Date </th>
<th> Time </th>
<th> Message </th>
</tr>
#foreach (MyWeb.Models.Comunication item in Model.GetComunications())
{
<tr>
<td> #Html.DisplayFor(modelItem => item.user) </td>
<td> #Html.DisplayFor(modelItem => item.date) </td>
<td> #Html.DisplayFor(modelItem => item.time) </td>
<td> #Html.DisplayFor(modelItem => item.message) </td>
</tr>
}
</table>
The problem is that one item in GetComunications() has a message that include a link to Google:
You can Google it, just press Here!. Thank you!
So when the table is displayed the message shows the tag instead of creating the link in "Here!".
How can I solve this problem, and show a message that already has a link on the string?
If you are sure about the sanitation of your output, you can use Html.Raw:
#Html.Raw(Html.DisplayFor(modelItem => item.message))
Related
I summed up the values in my view and I wanted to send the total back to my controller but I'm not sure if there is a way to do that.
Index.cshtml
#model IEnumerable<Rest.Models.ShoppingCartItem>
#{
ViewData["Title"] = "Index";
}
<h1>Shopping Cart</h1>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.item)
</th>
<th>
#Html.DisplayNameFor(model => model.price)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Menuitem.ItemName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Menuitem.Price)
</td>
<td>
<a asp-action="Delete" asp-route-id="#item.ID">Delete</a>
</td>
</tr>
}
</tbody>
</table>
<h1>
#Model.Sum(i => i.Menuitem.Price)
</h1>
Is there a way I can send the value I computed back to my controller?
Also, this is my first time using HTML - how do I make the font and formatting look nice? Can someone point me towards some good references?
Thanks!
I am pretty new to Angularjs and I would like to achieve an editable table similar to this jsfiddel http://jsfiddle.net/NfPcH/93/ (retrieved from the official angular doc) however instead of hardcoded data, how can I fill the table with a List of data retrieved from the database in MVC or a ViewBag?
for example instead of this MVC table below I would like to achieve to achieve the same thing but instead using Angular to make the table editable.
#if (ViewBag.Session != null)
{
<table class="table table-hover">
<tr>
<th>
ID
</th>
<th>
Name
</th>
<th>
Surname
</th>
<th>
House
</th>
<th>
Address
</th>
<th>
Locality
</th>
<th>
Contact
</th>
<th>
Contact 2
</th>
<th>
Contact 3
</th>
<th>
Reply
</th>
<th>
Edit
</th>
</tr>
#foreach (var item in ViewBag.Session)
{
<tr>
<td>
#item.ID
</td>
<td>
#item.Name
</td>
<td>
#item.Surname
</td>
<td>
#item.House
</td>
<td>
#item.Address
</td>
<td>
#item.Locality
</td>
<td>
#item.Contact1
</td>
<td>
#item.Contact2
</td>
<td>
#item.Contact3
</td>
<td>
#item.Reply
</td>
</tr>
}
</table>
Additionally, when a row is changed and saved, how can the data be sent back to the backed to be save in the database?
I think it would be a good idea for you to read a jumpstart tutorial, training, or book.
Here you have a link to get started using web api in the server side plus angularjs on the client, it just load a list of items from the server.
http://www.youtube.com/watch?v=Ja2xDrtylBw
I am creating an MVC application. When you use scaffolding templates with your Controllers the Index page is constructed using a table and a foreach which creates a row and the appropriate cells for each instance of the Model in the collection you provide like so:
#model IEnumerable<PoliticiOnline.DTO.Question>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
#Html.DisplayNameFor(model => model.GeneralQuestion)
</th>
<th>
#Html.DisplayNameFor(model => model.Explanation)
</th>
<th>
#Html.DisplayNameFor(model => model.IsTemplate)
</th>
<th>
#Html.DisplayNameFor(model => model.DateSubmitted)
</th>
<th>
#Html.DisplayNameFor(model => model.JudgementDate)
</th>
<th>
#Html.DisplayNameFor(model => model.FbShares)
</th>
<th>
#Html.DisplayNameFor(model => model.FbLikes)
</th>
<th>
#Html.DisplayNameFor(model => model.TwitterShares)
</th>
<th>
#Html.DisplayNameFor(model => model.SiteVotes)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.GeneralQuestion)
</td>
<td>
#Html.DisplayFor(modelItem => item.Explanation)
</td>
<td>
#Html.DisplayFor(modelItem => item.IsTemplate)
</td>
<td>
#Html.DisplayFor(modelItem => item.DateSubmitted)
</td>
<td>
#Html.DisplayFor(modelItem => item.JudgementDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.FbShares)
</td>
<td>
#Html.DisplayFor(modelItem => item.FbLikes)
</td>
<td>
#Html.DisplayFor(modelItem => item.TwitterShares)
</td>
<td>
#Html.DisplayFor(modelItem => item.SiteVotes)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.QuestionId }) |
#Html.ActionLink("Details", "Details", new { id=item.QuestionId }) |
#Html.ActionLink("Delete", "Delete", new { id=item.QuestionId })
</td>
</tr>
}
</table>
I would like to change this view to something like a listview which contains like a quick look-card for each instance. How would I go about creating this using html and CSS? Basically I would like to create my own structure and present the user with a list with a brief view of each model instance (they can of course see the detail on the detail page).
I hope my explanation was clear, it's very difficult to explain what I mean. You could compare it to defining custom controls, like creating an alternate design for each item in a listview. Hope someone can help me!
EDIT
I actually mean something like the homepage of Stackoverflow. I want to achieve the same sort of structure. I'd like a list with short information of each question. I took a look at the source of Stackoverflow and the CSS but can't really find how to do it. How could you define number of votes goes in the left, title in the middle and author info in bottom right?
I think this is a pretty broad html question and you will probably need to look at some html and css tutorial to really get you going. Your code COULD be as simple as this
#model IEnumerable<PoliticiOnline.DTO.Question>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#foreach (var item in Model) {
<div style="border: 1px solid black;">
#Html.DisplayFor(modelItem => item.GeneralQuestion ) <br />
#Html.DisplayFor(modelItem => item.Explanation )
</div>
}
Which will produce a bunch of ugly boxes with some text in it. You will really need to understand css to make it look nicer than that. I recommend reading the "Learn Html" and "Learn CSS" sections of http://www.w3schools.com/ .
I have a HTML table. It has 3 columns. The first column is name. 2nd is School and 3rd is HomeAddress.
The table loads records from the DB, therefore the number of rows may vary from time to time. The 3rd Column (HomeAddress) should have no rows, while the other 2 columns (name and school) can have more rows. How should i model the HTML table to have the 3rd column with no rows ?
<table border="1">
<tr>
<th>
Name
</th>
<th>
School
</th>
<th>
Home Address
</th>
</tr>
#foreach (var i in Model.allPpl)
{
<tr>
<td>
#Html.DisplayFor(modelItem => i.name)
</td>
<td>
#Html.DisplayFor(modelItem => i.school)
</td>
<td>
// THERE SHOULDN'T BE ANY ROWS FOR THIS COLUMN, JUST ONE COLUMN FOR THE WHOLE TABLE
</td>
</tr>
}
Rowspan attribute is your only friend.
Try <td rowspan="rowcount"></td> for third column where rowcount is the no. of rows returned.
And modify your foreach loop as follows:
#bool flag=false;
#foreach (var i in Model.allPpl)
{
<tr>
<td>
#Html.DisplayFor(modelItem => i.name)
</td>
<td>
#Html.DisplayFor(modelItem => i.school)
</td>
if(!flag){
<td rowspan="#Model.allPpl.count">
// THERE SHOULDN'T BE ANY ROWS FOR THIS COLUMN, JUST ONE COLUMN FOR THE WHOLE TABLE
</td>
}flag=true;
</tr>
}
Note: I haven't tested this razor view code so please take care of compiler error if shows any.
I think these entries will help you:
http://www.w3schools.com/tags/att_td_rowspan.asp
http://www.w3schools.com/tags/att_td_colspan.asp
I'm really new at using Razor with MVC, and so far I really like it.
One little thing I want to do is write a variables value to an attribute in HTML.
For example, if I had the following:
<table style="width: 100%">
<tr>
<th>
ID
</th>
<th>
Name
</th>
<th>
Value
</th>
</tr>
#foreach (var item in Model)
{
<tr id="ID#item.id">
<td>
#item.id
</td>
<td>
#item.name
</td>
<td>
#item.value
</td>
<td>
</tr>
}
</table>
I would want all the tags to have an ID equal to "ID[insert item's id]", but instead I get an ID equal to "ID#item.id".
How do I write a variable's name between HTML quote marks?
Thanks!
This pattern is recognized as an email address. Do the following to work around this behavior:
<tr id="ID#(item.id)">