I want to replace those three fields Edit/Details/Delete with icons I just downloaded. The icons are with size 512x512, will this be a problem? Can I resize them in the code (how), or I should resize them using some program.
I've been searching through the net and I found some very long pieces of C# code but I have no idea where to put it in order to replace the text of those properties with the icons.
Here is my HTML:
#using PagedList.Mvc;
#model PagedList.IPagedList<Rating_System.Models.tblTeacher>
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#{
ViewBag.Title = "Teachers List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Teachers</h2>
<p>
#Html.ActionLink("Add new", "Create")
</p>
#using (Html.BeginForm("Index", "Teachers", FormMethod.Get))
{
<p>
Търсене: #Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Search" />
</p>
}
<table class="table">
<tr>
<th>
</th>
<th>
#Html.DisplayNameFor(model => model.First().FirstName)
</th>
<th>
#Html.DisplayNameFor(model => model.First().SecondName)
</th>
<th>
#Html.DisplayNameFor(model => model.First().Title)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<img src="#Url.Action("GetImage", "Teachers", new {item.ID})" width="45" height="45" />
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.SecondName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
<td>
#Html.ActionLink("Редактирай", "Edit", new { id = item.ID }) |
#Html.ActionLink("Детайли", "Details", new { id = item.ID }) |
#Html.ActionLink("Изтрий", "Delete", new { id = item.ID })
</td>
</tr>
}
</table>
#Html.PagedListPager(Model, page => Url.Action("Index", new { page, pageSize = Model.PageSize }))
Results #Model.FirstItemOnPage - #Model.LastItemOnPage от общо #Model.TotalItemCount Teachers
try with this code
<a href="#Url.Action("ActionName", "ControllerName", new { id = item.ID })">
<img src="#Url.Content("~/Content/imgname.jpg")" />
</a>
If you want to use an icon (Image) use the following code:
#Html.ActionLink("Редактирай", "Edit", new { id = item.ID }, new { #class="class" })
Then write you css class to include a background image
a.class
{
background: url(../Images/image.gif) no-repeat top left;
width: 50px;
height: 50px;
display: block;
text-indent: -9999px; /* hides the link text */
}
However, I would suggest using bootstrap glyphicons for example
<a href="#Url.Action("Action", "Controller")" class="btn btn-info">
Your link text
<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
</a>
Or
<span class="glyphicon glyphicon-ok" style="cursor:pointer" onclick="JavascriptFunction()"></span>
And in Javascript
function JavascriptFunction() {
window.location.href = encodeURI("/Controller/Action/");
}
You can pass the ID through the javascript function
Related
I'm new to .Net Razor pages and followed this tutorial by FreeCodeCamp
I made an Index page with the help of the tutorial and wanted to add a copy button beside the entries but can't find a way to do so, here is the image of how the table looks, and here is the code:
//Index.cshtml.cs
private readonly ApplicationDbContext _db;
public IndexModel(ApplicationDbContext db)
{
_db = db;
}
public IEnumerable<PasswordEntry> PasswordEntries { get; set; }
public async Task OnGet()
{
PasswordEntries = await _db.PasswordEntry.ToListAsync();
}
//Index.cshtml
<br />
<div class="container row p-0 m-0">
<div class="col-9">
<h4>Passwords</h4>
</div>
</div>
<div class="col-12 border p-3 mt-3">
<form method="post">
#if (Model.PasswordEntries.Count() > 0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Name"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Url"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Email"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Username"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Password"></label>
</th>
<th>
</th>
</tr>
#foreach (var item in Model.PasswordEntries)
{
<tr>
<td>
#Html.DisplayFor(m => item.Name)
</td>
<td>
#Html.DisplayFor(m => item.Url)
</td>
<td>
#Html.DisplayFor(m => item.Email)
</td>
<td>
#Html.DisplayFor(m => item.Username)
</td>
<td>
#Html.TextBoxFor(m => item.Password, new { type = "password", disabled = "disabled" })
</td>
<td>
<button asp-page-handler="Delete" asp-route-id="#item.Id">Delete</button>
<a asp-page="Edit" asp-route-id="#item.Id">Edit</a>
</td>
</tr>
}
</table>
}
else
{
<h1>no entries available</h1>
}
</form>
</div>
I did try adding a copy button beside the delete and edit buttons with onClick function, on click it would call a funcition in #section Script area, but it didn't work probably cause the foreach loop ends after displaying the result,
what would be a good way to implement the copy button?
If you want to copy the line when click Copy button,here is a demo:
<div class="col-12 border p-3 mt-3">
<form method="post">
#if (Model.PasswordEntries.Count() > 0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Name"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Url"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Email"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Username"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Password"></label>
</th>
<th>
</th>
</tr>
#foreach (var item in Model.PasswordEntries)
{
<tr>
<td>
#Html.DisplayFor(m => item.Name)
</td>
<td>
#Html.DisplayFor(m => item.Url)
</td>
<td>
#Html.DisplayFor(m => item.Email)
</td>
<td>
#Html.DisplayFor(m => item.Username)
</td>
<td>
#Html.TextBoxFor(m => item.Password, new { type = "password", disabled = "disabled" })
</td>
<td>
<button asp-page-handler="Delete" asp-route-id="#item.Id">Delete</button>
<button onclick="copy(this)">Copy</button>
<a asp-page="Edit" asp-route-id="#item.Id">Edit</a>
</td>
</tr>
}
</table>
}
else
{
<h1>no entries available</h1>
}
</form>
</div>
js:
#section Scripts{
<script>
function copy(t) {
$("table")[0].innerHTML += $(t).parent().parent()[0].outerHTML;
}
</script>
}
result:
Update:
If you want to copy password to clipboard.Try to use the folowing js function:
function copy(t) {
var password = $(t).parent().parent()[0].children[4].children[0].value;
navigator.clipboard.writeText(password);
}
I have an MVC view that displays a list of items. The table that was automatically generated with the view has this action link on every row:
#Html.ActionLink("Delete", "Delete", new { id = item.section_detail_id }).
This works fine but my requirement is to allow the user to highlight a row and click on a delete button at the bottom of the list. I need a way for the button to know which row is currently highlighted. So I created this local variable:
#{int sectionDetailId = 0; }
Then I added an onclick event on the table rows to store the the id of the row that is clicked:
tr id="#item.section_detail_id" onclick="addClass(this.id); sectionDetailId = #item.section_detail_id">
Here is the button that is supposed to bring up the delete view:
input type="button" value="Delete Employee" onclick="location.href='#Url.Action("Delete", "EmployeeList", new { id = sectionDetailId })'; alert(sectionDetailId)" />
The value that is passed to the view is always zero no matter what row is clicked. I added the alert function to the button to show that the variable has the correct value.
Is there a way to get the Action method to use the variable or to get the value from the table in some other way? The Action method works correctly if I hard code an ID.
Here is the complete view:
#model IEnumerable<VCPDS2.Models.EmployeeListViewModel>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
tr.highlight {
background-color: blue !important;
}
</style>
#{int sectionDetailId = 0; }
<h2>Index</h2>
#*<p>
#Html.ActionLink("Create New", "Create")
</p>*#
#if (Model != null)
{
<table id="employeeTable" class="table table-responsive table-striped">
<tr>
<th>
Last Name
</th>
<th>
First Name
</th>
<th>
Employee ID
</th>
<th>
Phone
</th>
<th>
Budget Unit
</th>
<th>
Division
</th>
</tr>
<tbody id="employeeList">
#foreach (var item in Model)
{
<tr id="#item.section_detail_id" onclick="addClass(this.id); sectionDetailId = #item.section_detail_id">
<td>
#Html.DisplayFor(modelItem => item.last_name)
</td>
<td>
#Html.DisplayFor(modelItem => item.first_name)
</td>
<td>
#Html.DisplayFor(modelItem => item.employee_id)
</td>
<td>
#item.phone_nbr
#* #Html.DisplayFor(modelItem => item.phone.area_code) #Html.DisplayFor(modelItem => item.phone.phone_nbr)*#
</td>
<td>
#item.BU
#*#Html.DisplayFor(modelItem => item.phone.BU)*#
</td>
<td>
#item.description
#*#Html.DisplayFor(modelItem => item.department.description)*#
</td>
<td>
#*#Html.ActionLink("Edit", "Edit", new { id = item.section_detail_id }) |
#Html.ActionLink("Details", "Details", new { id = item.section_detail_id }) |*#
#Html.ActionLink("Delete", "Delete", new { id = item.section_detail_id })
</td>
</tr>
}
</tbody>
</table>
<p>
#*#Html.ActionLink("Create New", "Create")*#
<input type="button" value="Add Employee"
onclick="location.href='#Url.Action("Create", "EmployeeList")'" />
<input type="button" value="Delete Employee"
onclick="location.href='#Url.Action("Delete", "EmployeeList", new { id =
#sectionDetailId })'; alert(sectionDetailId)" />
</p>
}
<script src="jquery-3.4.1.min.js"></script>
<script>
function addClass(row) {
//alert(row);
$('#employeeList').children().removeClass('highlight');
var element = document.getElementById(row);
element.classList.add("highlight");
}
</script>
#*#Html.ActionLink("Edit", "Edit", new { id = item.section_detail_id }) |
#Html.ActionLink("Details", "Details", new { id = item.section_detail_id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.section_detail_id
})*#
This is the rendered HTML for the delete button:
<input type="button" value="Delete Employee" onclick="location.href='/EmployeeList/Delete/0'; alert(sectionDetailId)">
I want to add an automatic numbering of order items to all pages.
Below is an example that works but only numbers on one page. After going to the next page, it starts from the beginning.
public ActionResult ListaZlecen(int? IdStatusZlecenia, int strona = 1)
{
var ListaZlecenWszystkich = db.Zlecenia.ToList();
var userId = User.Identity.GetUserId();
//var ListaZlecen = db.Zlecenia.Where(p => p.UserId == userId).ToList();
//var ListaZlecen = db.Zlecenia.OrderBy(w => w.IdZlecenia).Where(p => p.UserId == userId).Skip((strona - 1) * WielkoscStrony).Take(WielkoscStrony).ToList();
var ListaZlecen = db.Zlecenia.OrderBy(w => w.IdZlecenia).Skip((strona - 1) * WielkoscStrony).Take(WielkoscStrony).ToList();
// var zleceniezalacznik = db.ZleceniaZalaczniki.ToList();
var viewodel = new ListaZlecenUzytkownikaViewModel()
{
StronaInfo = new StronaInfo
{
AktualnaStrona = strona,
PozycjeNaStrone = WielkoscStrony,
WszystkiePozycje = ListaZlecenWszystkich.Count()
},
ListaZlecenUzytkownika = ListaZlecen
};
return View(viewodel);
}
and View
#model AplikacjaHelpDesk.ViewModels.ListaZlecenUzytkownikaViewModel
#using AplikacjaHelpDesk.Infrastructure;
#{
ViewBag.Title = "Lista Zlecen Użytkownika";
Layout = "~/Views/Shared/_LayoutAdministracja.cshtml";
}
<div class="container-fluid">
<img src="~/Content/Images/Layout/Home.png" />
<a href="link">
#Html.MvcSiteMap().SiteMapPath()
</a>
<h2><span class="glyphicon glyphicon-user"></span> <strong>Lista Zleceń </strong></h2>
<br /><br />
<div id="divLoading" class="panel panel-primary text-center text-primary" style="display:none;">
<h3><strong>Proszę czekać ładowane są posty!</strong></h3>
</div>
<div id="divLoadingForm" class="panel panel-primary text-center text-primary" style="display:none;">
<h3><strong>Proszę czekać ładuję formularz</strong></h3>
</div>
#*#if (ViewBag.Informacja != null)
{
<div class="alert alert-warning"><h4><strong>#TempData["Dodano-Post"]</strong></h4></div>
}*#
<table class="table table-responsive table-striped transactions" style="text-combine-upright:all;">
<tr style="text-transform: uppercase; text-combine-upright:all;">
<th>
<label>Pozycja Nr.</label>
</th>
<th>
<label>Nr Zlecenia</label>
</th>
<th>
<label>Data Przyjęcia Zlecenia</label>
</th>
<th>
<label>Data Planowanego Zakończenia Zlecenia</label>
</th>
<th>
<label>Data zakończenia zlecenia</label>
</th>
<th style="width: 160px;"></th>
<th style="width: 160px;"></th>
</tr>
#{ var i = 0;}
#foreach (var item in Model.ListaZlecenUzytkownika)
{
<tr class="panel panel-primary">
#*
<h5><strong>Zlecenie nr: #Html.DisplayFor(modeItem => item.IdZlecenia)</strong></h5>
<td>
#{i++;}
#i
</td>
<td>
<h5><strong>Zlecenie nr: #Html.DisplayFor(modeItem => item.IdZlecenia)</strong></h5>
</td>
<td>
#Html.DisplayFor(modelItem => item.DataPrzyjeciaZlecenia)
</td>
<td>
#Html.DisplayFor(modelItem => item.DataPlanowaniaZakonczenia)
</td>
<td>
#Html.DisplayFor(modelItem => item.DataZakonczenia)
</td>
<td>
#Ajax.ActionLink("Pokaż Posty Zlecenia", "_ListaPostow", new { idZlecenia = #item.IdZlecenia }, new AjaxOptions()
{
HttpMethod = "GET",
LoadingElementId = "divLoading",
UpdateTargetId = "divPozycje",
InsertionMode = InsertionMode.Replace
}, new { #class = "btn btn-primary" })
</td>
<td>
#Ajax.ActionLink("Dodaj Odpowiedz", "_DodajPost", new { idZlecenia = #item.IdZlecenia }, new AjaxOptions()
{
HttpMethod = "GET",
LoadingElementId = "divLoadingForm",
UpdateTargetId = "divDodajPozycje",
InsertionMode = InsertionMode.Replace
}, new { #class = "btn btn-primary" })
</td>
</tr>
<tr style="background: #23527c; color:white;">
<td>
<label>Opis załącznika</label>
</td>
<td style="width: 120px;">
<label>Załącznik</label>
</td>
</tr>
<tr class="panel panel-group">
<td>
#Html.Raw(item.ZleceniaZalaczniki.Opis)
</td>
<td>
<span class="btn btn-primary">
#Html.ActionLink("Pobierz", "Download", "Zlecenia", new { nazwaPliku = #item.ZleceniaZalaczniki.NazwaPliku }, null)
<span class="glyphicon glyphicon-download" aria-hidden="true"></span>
</span>
</td>
</tr>
<tr id="divDodajPozycje"></tr>
}
</table>
<br />
<div class="btn-group pull-right">
#Html.LinkStrony(Model.StronaInfo, x => Url.Action("ListaZlecen", new { strona = x }))
</div>
<br />
<hr />
<div id="divPozycje">
</div>
</div>
I tried this way but it creates numbering only on one page. Going to the next numbering is created from the beginning.
#{ var i = 0;}
<td>
#{i++;}
#i
</td>
I have 3 orders on each page and I would like all orders to be automatically numbered, for example:
First page 1,2,3
Second page 4,5,6
I am asking for help in creating the numbering for the entire collection of orders
Instead of starting at i=0 you can start at your current page,
I don't know which language it is but I hope i got it right.
// Instead of this: #{ var i = 0;} - on your view
//Use this:
#{ var i = (Model.AktualnaStrona -1 ) * Model.PozycjeNaStrone ;}
//It should be equal to the calculation you use on the API:
(strona - 1) * WielkoscStrony
//(from this line: )
var ListaZlecen = db.Zlecenia.OrderBy(w => w.IdZlecenia).
Skip((strona - 1) * WielkoscStrony). //--> THIS
Take(WielkoscStrony).ToList();
I've got this code:
#model IEnumerable<PamelaFundacionFinal.Models.Escuela>
#{
ViewBag.Title = "Index";
}
<h2>Escuelas registradas</h2>
<p>
<button name="Edit" class="btn btn-default"><b>
#Html.ActionLink("Create New", "Create")</b></button></p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Nombre)
</th>
<th>
#Html.DisplayNameFor(model => model.Direccion)
</th>
<th>
#Html.DisplayNameFor(model => model.Telefono)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Nombre)
</td>
<td>
#Html.DisplayFor(modelItem => item.Direccion)
</td>
<td>
#Html.DisplayFor(modelItem => item.Telefono)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Escuela_ID })
<button name="Edit" class="btn btn-default">
#Html.ActionLink("Details", "Details", new { id = item.Escuela_ID })</button>
<button name="Edit" class="btn btn-default">
#Html.ActionLink("Delete", "Delete", new { id = item.Escuela_ID })</button>
</td>
</tr>
}
</table>
Don't worry, everything is referenced to their own controller to make the opperations, my issue is that I've got two cases:
I'm writing in #Html.ActionLink("Edit", "Edit", new { id = item.Escuela_ID }) a reference to another controller, so I can create a new one, but it's simple text
Then, I'm trying to put that reference into a button, so it looks nice: <button name="Edit" class="btn btn-default">#Html.ActionLink("Delete", "Delete", new { id = item.Escuela_ID })</button> but it doesn't work.
I know that I'm not writing this correctly, but I need help because I'm new with this language and I don't really know exactly how is the syntax. I'm using Visual Studio 2013 and SQL Server to run the database (The connection with database is running perfectly, it's not an issue with the database).
You can style your <a> tag that is generated by the Html helper.
#Html.ActionLink("Edit", "Edit", new { id = item.Escuela_ID },
new { #class = "btn btn-default" })
I'm trying to create a way so that when clicking the submit button or a link, do the submission
and remain in the same modal dialog.
My program has two forms within the same dialog, one is not shown until the first is submited and i would like that on submiting the first form load, within the same dialog.
For the load dialog i have this code:
function loadDialog(tag, event, target) {
event.preventDefault();
var $loading = $('<img src="../../Content/assets/images/nivo-loader.gif" alt="loading" class="ui-loading-icon">');
var $url = $(tag).attr('href');
var $title = $(tag).attr('title');
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.append($loading)
.load($url)
.dialog({
autoOpen: false
, title: $title
, width: 600
, modal: true
, minHeight: 200
, show: 'fade'
, hide: 'fade'
});
});
Then in the Create.cshtml:
#model Mvcproject.Models.MyModel
<script language="javascript" type="text/javascript">
$(function () {
$("input[type=submit]")
.button(
);
$('a.modalDlg2').live("click", function (event) { loadDialog('#modalDlg', event, '#Receipt Create'); });
/*$('input.Submit').live("click", function (event) {
e.preventDefault();
loadDialog('#modalDlg', event, '#Receipt Create');
});*/
$(".demo button").button({
icons:
{
primary: 'ui-icon-plusthick'
}
});
});
</script>
<h2>
Add line</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset class="createReceipt">
<legend>User login</legend>
#if (ViewBag.Created)
{
<table class="createTable">
<tr>
<td rowspan="4">
<img src="../../Images/no_image.jpg" width="100" height="100" />
</td>
<th colspan="1">
#Html.LabelFor(model => model.User.Name)
</th>
<td colspan="5">
#Html.EditorFor(model => model.User.Name)
#Html.ValidationMessageFor(model => model.User.Name)
</td>
</tr>
<tr>
<th colspan="1">
#Html.LabelFor(model => model.User.Email)
</th>
<td colspan="5">
#Html.EditorFor(model => model.User.Email)
#Html.ValidationMessageFor(model => model.User.Email)
</td>
</tr>
<tr>
<th colspan="1">
#Html.LabelFor(model => model.User.Password)
</th>
<td colspan="5">
#Html.EditorFor(model => model.User.Password)
#Html.ValidationMessageFor(model => model.User.Password)
</td>
</tr>
<!--User picture-->
<tr>
<td>
<input type="file" value="browse" name="Browse" accept="image/gif, image/jpeg, image/jpg" />
</td>
</tr>
</table>
<p>
<input type="submit" class="Submit" value="Create" />
<buttonreceipt style="width: 150px; text-align: left">#Html.ActionLink("Create", "Create")</buttonreceipt>
</p>
}
else
{
<!-- This will be displayed when user data is submited and inserted into database-->
<table class="createTable">
<tr>
<th colspan="1">
#Html.LabelFor(model => model.User.Name)
</th>
<td colspan="5">
#Html.DisplayFor(model => model.User.Name)
</td>
</tr>
<tr>
<th colspan="1">
#Html.LabelFor(model => model.User.Email)
</th>
<td colspan="5">
#Html.DisplayFor(model => model.User.Email)
</td>
</tr>
<tr>
<td colspan="1">
<img src="#Model.User.Picture"/>
</td>
</tr>
</table>
}
</fieldset>
}
#if (!ViewBag.Created)
{
#Html.Partial("_AddUserInformation");
}
ViewBag.Created is either false or true depending on if user data has been inserted with success into database and that functionality is already done.
And _AddUserInformation.cshtml has other information for the user that is trying to register, like address and country...
Hope this explains better my problem.
You can use the jQuery post() function to send data to an address. You'll need to pick out the data from your fields manually using jQuery selectors (shouldn't be difficult) as well as configure a function to receive and treat the data. This link on post should give you what you need to get started. http://api.jquery.com/jQuery.post/