I would like to use tooltip within my index view so that I can display details for the items in my table on mouseover. The trick is that I would like to use a partial view within the tooptip popup window.
Index View
<script>
$(function () {
$('#theText').hover(function () {
$('#theDetails').show();
}, function () {
$('#theDetails').hide();
});
});
</script>
#{bool CanView = ViewBag.IsAdmin;}
#if (CanView == true)
{
<h2>Active Index - Software License (Full Viewer)</h2>
using (Html.BeginForm("Index", "SoftwareLicense", FormMethod.Get))
{
#Html.AntiForgeryToken()
<p>
<button onclick="location.href='#Url.Action("Create", "SoftwareLicense")';return false;">Create</button>
Search Keyword: #Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<button type="submit">Search</button>
<button onclick="location.href='#Url.Action("Deleted", "SoftwareLicense")';return false;">View Inactive Software</button>
</p>
}
<html>
<body>
<table class="table">
<tr>
<th>
#Html.ActionLink("Software Name", "Index", new { sortOrder = ViewBag.SoftNameSort, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
#Html.ActionLink("License Type", "Index", new { sortOrder = ViewBag.LicenseType, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
#Html.ActionLink("End Date", "Index", new { sortOrder = ViewBag.EndDateSort, currentFilter = ViewBag.CurrentFilter })
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td id="theText">
#Html.DisplayFor(modelItem => item.SoftwareName)
</td>
<td id="theDetails">#Html.Partial("_PopupDetails", (WBLA.Models.SoftwareLicense)item)</td>
<td>
#Html.DisplayFor(modelItem => item.LicenseType)
</td>
<td>
#Html.DisplayFor(modelItem => item.EndDate)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.SoftwareID }) |
#Html.ActionLink("Details", "Details", new { id = item.SoftwareID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.SoftwareID })
</td>
</tr>
}
</table>
<br />
Page #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount
#Html.PagedListPager(Model, page => Url.Action("Index",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
</body>
</html>
Partial View
#model WBLA.Models.SoftwareLicense
<table>
<tr>
<th>
#Html.LabelFor(model => model.SoftwareName)
</th>
<td>
#Html.DisplayFor(model => model.SoftwareName)
</td>
</tr>
<tr>
<th>
#Html.LabelFor(model => model.SoftwareKey)
</th>
<td>
#Html.DisplayFor(model => model.SoftwareKey)
</td>
</tr>
<tr>
<th>
#Html.LabelFor(model => model.Price)
</th>
<td>
#Html.DisplayFor(model => model.Price)
</td>
</tr>
<tr>
<th>
#Html.LabelFor(model => model.DepartmentName)
</th>
<td>
#Html.DisplayFor(model => model.DepartmentName)
</td>
</tr>
<tr>
<th>
#Html.LabelFor(model => model.LicenseFilePath)
</th>
<td>
#Html.DisplayFor(model => model.LicenseFilePath)
</td>
</tr>
<tr>
<th>
#Html.LabelFor(model => model.LicenseType)
</th>
<td>
#Html.DisplayFor(model => model.LicenseType)
</td>
</tr>
<tr>
<th>
#Html.LabelFor(model => model.StartDate)
</th>
<td>
#Html.DisplayFor(model => model.StartDate)
</td>
</tr>
<tr>
<th>
#Html.LabelFor(model => model.EndDate)
</th>
<td>
#Html.DisplayFor(model => model.EndDate)
</td>
</tr>
<tr>
<th>
#Html.LabelFor(model => model.NotifyTime)
</th>
<td>
#Html.DisplayFor(model => model.NotifyTime)
</td>
</tr>
<tr>
<th>
#Html.LabelFor(model => model.Email)
</th>
<td>
#Html.DisplayFor(model => model.Email)
</td>
</tr>
</table>
Results in Browser
http://i.stack.imgur.com/yNQ0T.png
When I hover over "test1" the tooltip responds as I would like (it expands and shows details like "test10" is displayed), however, the rest of the entries do not respond or collapse on mouseover and mouseoff.
You should change your <td> elements to use the class attributes to identify them.
<td class="theText">
#Html.DisplayFor(modelItem => item.SoftwareName)
</td>
<td class="theDetails">#Html.Partial("_PopupDetails", (WBLA.Models.SoftwareLicense)item)</td>
then change your script to work with the class names.
$(function () {
$('.theText').hover(function () {
$(this).parent().find('.theDetails').show();
}, function () {
$(this).parent().find('.theDetails').hide();
});
});
Related
This is my .cshtml file that contain table of items. This table shows items that are for sale, and I want to add background image in this file. If it does not working please tell me how to attach background for this.
I know cshtml is the file extension that refers to the razor view engine. In addition to straight html, these files also contain C# code that is compiled on the server prior to the pages being server up to the browser.
#model IEnumerable<PakMall.Models.UserItem>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
#using (Html.BeginForm("Index", "userItems", FormMethod.Get))
{
<p>
Discription: #Html.DropDownList("discription", "All")
Title: #Html.TextBox("SearchString")
<input type="submit" value="Filter" />
</p>
}
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Title)
</th>
<th>
#Html.DisplayNameFor(model => model.ManufacturingDate)
</th>
<th>
#Html.DisplayNameFor(model => model.Discription)
</th>
<th>
#Html.DisplayNameFor(model => model.Price)
</th>
<!-- <th>
#Html.DisplayNameFor(model => model.itemImage)
</th>-->
<th>
#Html.DisplayNameFor(model => model.Contact)
</th>
<th>
#Html.DisplayNameFor(model => model.Email)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
<td>
#Html.DisplayFor(modelItem => item.ManufacturingDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.Discription)
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
#Html.DisplayFor(modelItem => item.Contact)
</td>
<td>
#Html.DisplayFor(modelItem => item.Email)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.ID })
#Html.ActionLink("Details", "Details", new { id = item.ID })
#Html.ActionLink("Delete", "Delete", new { id = item.ID })
</td>
</tr>
}
</table>
You can accomplish this by using the background-image css class:
body {
background-image: url("img_tree.gif");
}
This article is a good place to start.
In _Layout.cshtml I added background image in like html format.
So _Layout.cshtml is file in .net web application where all pages layout can be designed.
I had this code and it worked fine:
#model IEnumerable<Moviestore.Models.Movie>
#{
ViewBag.Title = "Index";
}
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Title)
</th>
<th>
#Html.DisplayNameFor(model => model.Genre)
</th>
<th>
#Html.DisplayNameFor(model => model.Author)
</th>
<th>
#Html.DisplayNameFor(model => model.Year)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
if (item.IsDeleted == 0)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
<td>
#Html.DisplayFor(modelItem => item.Genre)
</td>
<td>
#Html.DisplayFor(modelItem => item.Author)
</td>
<td>
#Html.DisplayFor(modelItem => item.Year)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.MovieID }) |
#Html.ActionLink("Details", "Details", new { id = item.MovieID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.MovieID })
</td>
</tr>
}
}
</table>
But I needed to add one more model, I done that with Tuple In this way:
#using Moviestore.Models;
#model Tuple<Movie, User>
#{
ViewBag.Title = "Index";
}
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(tuple => tuple.Item1.Title)
</th>
<th>
#Html.DisplayNameFor(tuple => tuple.Item1.Genre)
</th>
<th>
#Html.DisplayNameFor(tuple => tuple.Item1.Author)
</th>
<th>
#Html.DisplayNameFor(tuple => tuple.Item1.Year)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
if (item.IsDeleted == 0)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
<td>
#Html.DisplayFor(modelItem => item.Genre)
</td>
<td>
#Html.DisplayFor(modelItem => item.Author)
</td>
<td>
#Html.DisplayFor(modelItem => item.Year)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.MovieID }) |
#Html.ActionLink("Details", "Details", new { id = item.MovieID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.MovieID })
</td>
</tr>
}
}
</table>
But now I have problem with bottom half of code.
From #foreach
I don't know what I need to put instead of #foreach (var item in Model)
And will then #Html.DisplayFor(modelItem => item.Title) also need some changes.
Sorry for long post, I tried to explain the problem as best as I can.
As I mentioned in the comments, the appropriate way to handle this situation (needing more than one model on a particular View page) is to use a ViewModel which contains the models you need (see here for reference).
To answer your specific question, though, you can access each item of the Tuple by its position, e.g. if your model is Tuple<Movie, User>, then you can access the Movie object by model.Item1 and the User object by model.Item2, etc.
But I strongly recommend you take the ViewModel approach that I linked instead.
Hi here is the viewmodel for your requirement:
public class MovieUserViewModel
{
public IEnumerable<Movie> Movie { get; set; }
public IEnumerable<Users> Users { get; set; }
}
With the above viewmodel , you can easily access each class
#foreach (var item in Model.Movie)
#foreach (var item in Model.Users)
Additional info : Understanding ViewModel in ASP.NET MVC
Thanks
Karthik
Is it possible to add a where clause in the view rather than the controller as I don't want to change the retrieval of information in the controller. I currently am retrieving a list of restaurants but want to only show restaurants where the logged in users email is the same as the restaurants email.
<div class="col-xs-12">
<table class="table table-condensed table-striped">
<tr>
<th>
#Html.DisplayNameFor(model => model.Rating)
</th>
<th>
#Html.DisplayNameFor(model => model.RestaurantName)
</th>
<th>
#Html.DisplayNameFor(model => model.County)
</th>
<th>
#Html.DisplayNameFor(model => model.RestaurantType)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Rating)
</td>
<td>
#Html.DisplayFor(modelItem => item.RestaurantName)
</td>
<td>
#Html.DisplayFor(modelItem => item.County)
</td>
<td>
#Html.DisplayFor(modelItem => item.RestaurantType)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.RestaurantID }) |
#Html.ActionLink("Details", "Details", new { id = item.RestaurantID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.RestaurantID })
</td>
</tr>
}
</table>
</div>
If you really don't want to change the logic for retrieving the list, you could use a ViewModel with a List property, returning the specified list using the Getter.
public List<Restaurant> MyRestaurants
{
get { return Restaurants.Where(x => x.RestaurantEmail == UserEmail); }
}
I want to display incremental values at the first column of following code inside Sr. No. column in ASP.net MVC Razor view. I am doing following but its not working. It showing 0++; only in that column. what wrong I am doing.
#{int i = 0;}
<table class="table">
<tr>
<th>Sr No.</th>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.ModifiedDate)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<span>#i++;</span>
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.ModifiedDate)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.CurrencyCode }) |
#Html.ActionLink("Details", "Details", new { id = item.CurrencyCode }) |
#Html.ActionLink("Delete", "Delete", new { id = item.CurrencyCode })
</td>
</tr>
}
In razor syntax you should create C# scope for C# logical statemens. Can you try the the code below;
<td>
<span>#(i++)</span>
</td>
You can not use like this.
<td>
<span>#i++;</span>
</td>
you need to write your code as like :
<td>
<span>#i</span>
</td>
You need to increase value of i after <tr> tag.
I have given solution with your code.
#{
var i = 1; #*sr no will start from 1*#
}
<table class="table">
<tr>
<th>Sr No.</th>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.ModifiedDate)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<span>#i</span>
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.ModifiedDate)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.CurrencyCode }) |
#Html.ActionLink("Details", "Details", new { id = item.CurrencyCode }) |
#Html.ActionLink("Delete", "Delete", new { id = item.CurrencyCode })
</td>
</tr>
i++;
}
Hope it will work fine.
This should work:
#{int i = 0;}
<table class="table">
<tr>
<th>Sr No.</th>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.ModifiedDate)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<span>#(++i)</span>
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.ModifiedDate)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.CurrencyCode }) |
#Html.ActionLink("Details", "Details", new { id = item.CurrencyCode }) |
#Html.ActionLink("Delete", "Delete", new { id = item.CurrencyCode })
</td>
</tr>
}
As per #Stephen Muecke suggested you can use:
<span>#(i++)</span>
Or you can use like this:
<span>#i</span>
i++;
I'm using MVC 4 and using rotativa PDF to generate a pdf from a view.
The problem is that the view in question is a result of a LINQ search, and in the pdf it doesn't appear the data.
This is where the user fill the box with what he wants to search:
First
After he clicks "Pesquisar"(search) this view is created:
Second
But when the pdf is generated, it doesn't show any data.
What can i do or what is the error?
The code:
Controller (the LINQ code works):
public ActionResult ViewAfterSearch(string texto)
{
var util = (db.Simulacaos.Where(m =>
m.Utilizador.Contains(texto)));
return View("ViewAfterSearch", util);
}
public ActionResult ViewBeforeSearch()
{
return View(db.Simulacaos.ToList());
}
[HttpPost, ActionName("ViewBeforeSearch")]
public ActionResult ViewBeforeSearch(string texto)
{
var util = (db.Simulacaos.Where(m =>
m.Utilizador.Contains(texto)));
return View("ViewAfterSearch", util);
}
Views:
#model IEnumerable<GestorSalas.Models.Simulacao>
#{
ViewBag.Title = "Registos";
}
<h2>ViewAfterSearch</h2>
<table>
<tr>
<th>
#Html.DisplayNameFor(model => model.Utilizador)
</th>
<th>
#Html.DisplayNameFor(model => model.TipoUtilizador)
</th>
<th>
#Html.DisplayNameFor(model => model.Codigo)
</th>
<th>
#Html.DisplayNameFor(model => model.Hora)
</th>
<th>
Entrou?
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Utilizador)
</td>
<th>
#Html.DisplayFor(modelItem => item.TipoUtilizador)
</th>
<td>
#Html.DisplayFor(modelItem => item.Codigo)
</td>
<td>
#Html.DisplayFor(modelItem => item.Hora)
</td>
<td>
#Html.DisplayFor(modelItem => item.Entrar)
</td>
</tr>
}
</table>
<h4>#Html.ActionLink("Download como PDF", "TurnToPDF", "Simulacao")</h4>
<h4>#Html.ActionLink("Voltar", "Index", "Simulacao")</h4>
View before search:
#model IEnumerable<GestorSalas.Models.Simulacao>
#{
ViewBag.Title = "Index";
}
<h4>Procurar registo de utilizadores</h4>
using (Html.BeginForm("ViewAfterSearch", "Simulacao", FormMethod.Post))
{
<table>
<tr>
<th>
#Html.TextBox("texto")
</th>
<td>
<input type="submit" id="ButtonProcura" value="Procurar" />
</td>
</tr>
</table>
}
#Html.ActionLink("Download como PDF", "TurnToPDF", "Simulacao")
<table>
<tr>
<th>
#Html.DisplayNameFor(model => model.Utilizador)
</th>
<th>
#Html.DisplayNameFor(model => model.TipoUtilizador)
</th>
<th>
#Html.DisplayNameFor(model => model.Codigo)
</th>
<th>
#Html.DisplayNameFor(model => model.Hora)
</th>
<th>
Entrou?
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Utilizador)
</td>
<th>
#Html.DisplayFor(modelItem => item.TipoUtilizador)
</th>
<td>
#Html.DisplayFor(modelItem => item.Codigo)
</td>
<td>
#Html.DisplayFor(modelItem => item.Hora)
</td>
<td>
#Html.DisplayFor(modelItem => item.Entrar)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.SimulacaoId }) |
#Html.ActionLink("Details", "Details", new { id=item.SimulacaoId }) |
#Html.ActionLink("Delete", "Delete", new { id=item.SimulacaoId })
</td>
</tr>
}
</table>
}