I need help creating an 'edit' action that selects a specific model from a list of models, and in that table, edits the model. A quick-edit of sorts.
<tbody>
{{#each}}
<tr class="people-list">
<td>
<input type="checkbox" class="toggle">
<label class="category-text">{{#linkTo 'category' this}}{{Name}}{{/linkTo}} </label>
<img class="table-img" src="images/x.png">
<img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
</td>
</tr>
{{/each}}
</tbody>
By clicking {{action 'edit'}}, {{Name}} becomes and editable input. This is all done without leaving the '/categories' url.
Thanks guys :D
<tbody>
{{#each}}
<tr class="people-list">
<td>
<input type="checkbox" class="toggle">
{{#if isEdit}}
{{input type="text" valueBinding="Name" name="Name"}}
{{else}}
<label class="category-text">{{#linkTo 'category' this}}{{Name}}{{/linkTo}}</label>
{{/if}}
<img class="table-img" src="images/x.png">
<img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
</td>
</tr>
{{/each}}
</tbody>
And then on the controller:
actions: {
edit:function(){
this.set('isEdit', true);
}
}
Related
I am trying to redirect to another local web page using a tag in Thymeleaf and Spring boot but it is
not working. I am redirecting from index.html to addEdit.html which are in the same folder.
Here is my code.
index.html
<div class="container">
<p th:text="${message}"></p>
<a th:href="#{/addEdit.html}" class="btn btn-outline-info">Add Employee</a> //not working
<table class="table table-bordered table-dark">
<thead class="">
<tr>
<th>#</th>
<th>Name</th>
<th>Departmen</th>
<th>Position</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="employee : ${employees}" >
<th th:text="${employee.id}"></th>
<td th:text="${employee.name}"></td>
<td th:text="${employee.department}"></td>
<td th:text="${employee.position}"></td>
<td>
<form action="delete">
<input type="submit" value="Delete" class="btn btn-outline-warning"/>
</form>
</td>
<td>
<form action="edit">
<input type="submit" value="Edit" class="btn btn-outline-info"/>
</form>
</td>
</tr>
</tbody>
</table>
</div>
my EmployeeController
#Autowired
private employeeRepo repo;
#RequestMapping("/")
public String home(Model model) {
List<Employee> list = new ArrayList<>();
list = repo.findAll();
model.addAttribute("employees",list);
return "index";
}
#PostMapping("/addEmployee")
public void addEmployee(Employee employee,Model model) {
repo.save(employee);
model.addAttribute("message","Add Successfully");
home(model);
}
my addEdit.html
<div class="container bg-light">
<form action="addEmployee">
<input class="form-control form-control-sm" type="text" placeholder="Name" name="name"><br>
<input class="form-control form-control-sm" type="text" placeholder="Department" name="department"><br>
<input class="form-control form-control-sm" type="text" placeholder="Position" name="postion"><br/>
<input type="submit" value="Add Employee" class="btn btn-outline-success btn-lg btn-block">
</form>
</div>
You should not include the .html in your link. The link should point to a URL that your controller exposes. There is currently no controller method that exposes the /addEdit url for example.
So update your controller:
#GetMapping
public String addEmployee(Model model) {
// add model attributes here as needed first
return "addEdit" // This refers to the view, so 'addEdit.html'
}
Now update the link to:
<a th:href="#{/addEdit}" class="btn btn-outline-info">Add Employee</a>
This is the third question on this topic. Hopefully I’ve improved the question as I struggle with wrapping up this project. First, let’s look at the page with the Dropdown list of Alert_Identifiers—the key value that gets data from the mysql database for the project. AlertPick.cshtml:
#model IEnumerable<edxl_cap_v1_2.Models.ContentViewModels.Alert>
#using edxl_cap_v1_2.Models.ContentViewModels
#{
ViewData["Title"] = "PickAlert";
}
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/css/capv1_2_refimp.css" />
<title>#ViewBag.Title</title>
</head>
<h4>Alert</h4>
<div>
#ViewBag.Message
</div>
<style>
tr:nth-child(even) {
background-color: lightBlue;
}
tr:nth-child(odd) {
background-color: white;
}
</style>
<table class="smallText">
#foreach (var item in Model)
{
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="alerts" asp-action="_DetailsAlert" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Alert">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="infos" asp-action="_DetailsInfo" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Info">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="areas" asp-action="_DetailsArea" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Area">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="resources" asp-action="_DetailsResource" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Resource">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="EdxlCapMessageViewModels" asp-action="_Assemble" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Add All">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
}
</table>
Once the Alert_Identifier that corresponds to one record in the database is selected and the submit button is clicked, the browser opens this page
The first four rows work correctly when the “Check XXX” submit button is clicked. They show the individual data category “_DetailsXXX.cshtml” page one at a time. Here is the screen of the page showing the _DetailsAlert.cshtml page.
This is set up so that these pages can be reviewed individually and the composite page, once working, will also work in the “Review” page and the “Approve” page. In the case of the “Assemble” page here, the four individual pages are intended to appear composited together when the “Add All” submit button is clicked, but currently these pages appear without data values for the data items.
I am also going to ping a couple of more experienced people who have helped me previously to take a look at this, I am also studying a wholly different injection mechanism for injecting data into the program where needed which I will consider using in the follow-on specfications.
Lastly, I am rexbroo at GitHub.com where you can find nearly identical Visual Studio programs in the repos: edxl_cap_v1_2-VS4Win (for Windows) and edxl_cap_v1_2-VS4Mac (for Mac) and edxl_cap_v1_2,sql-mysql-VisualStudio where the most current dump of the database is 20180928.
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
You don't need to use the #Html.DisplayFor helper here. Just use:
<input type="text" name="elementValue" value="#item.Alert_Identifier" size="60" />
None of your input values should be using the Html.DisplayFor. That is inserting a tag into the value when all you really want is the value of the property.
Also, I question the reason for using multiple forms on a page. Could you use a single form and post to a single action? Do you need to post at all? Could the action be refactored into a get and let you use a <a> tag instead?
I am trying to make an MVC 5 Razor web page with a table within it, Every row in this table contains a Delete button which is post action:
<table>
<thead>
<tr>
<th>Name</th>
.
.
.
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach(var item in Model)
{
<tr>
<td>#item.Name</td>
.
.
.
<td>
#using(Html.BeginForm("Delete", "Person", FormMethod.Post))
{
#html.AntiForgetyToken()
#html.Hidden("personId", item.PersonId)
<button type="submit" class="btn">Delete</button>
}
</td>
</tr>
}
</tbody>
</table>
And in the controller:
public class PersonController : BaseController
{
[HttpPost, ValidateAntiForgeryToken]
public ActionResult Delete(int personId)
{
// Do Something...
}
}
Now my problem is when pressing Delete button in any row of the table it always submitting the first form in the page which means the first person in the table is always being deleted no matter what submit button i press.
Any ideas to solve this issue?
Edit:
The generated page html
<div class="page-header">
<h2>Person List</h2>
</div>
<table class="row table table-striped">
<thead>
<tr class="text-primary">
<th class="text-center">#</th>
<th>Name</th>
<th>Email</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">5</td>
<td>Ismail</td>
<td>ismail#example.com</td>
<td>Active</td>
<td>
<form action="/WebApp/Person/Delete?PersonID=5" method="post">
<input name="__RequestVerificationToken" type="hidden" value="Uxhp0Bq1ATAwOXNODHmc74f12O2-dvFhQ5kletbmDkq64CEPWZlXXPKuHDoqSy4DXF6mJhYfGffc_YAn1yERxp69JCUT9IlGTKdfirvVvqE1" />
<div class="text-center">
<div class="btn-group btn-group-xs">
<a class="btn btn-default" href="/WebApp/Person/Details?PersonID=5">View</a>
<a class="btn btn-default" href="/WebApp/Person/Edit?PersonID=5">Edit</a>
<button class="btn btn-danger>Delete</button>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td class="text-center">6</td>
<td>MoHaKa</td>
<td>MoHaKa#example.com</td>
<td>Active</td>
<td>
<form action="/WebApp/Person/Delete?PersonID=6" method="post">
<input name="__RequestVerificationToken" type="hidden" value="R4CUAuVpbGihZvrFxxCjCL_oJ7tgkS_Xxh67i_xCpMXpvZKR5ASUWrSCvjg52yRorF-Ypeau1oZwDi96caHyUj-gmBeHnx7NBgfJBLkLPnQ1" />
<div class="text-center">
<div class="btn-group btn-group-xs">
<a class="btn btn-default" href="/WebApp/Person/Details?PersonID=6">View</a>
<a class="btn btn-default" href="/WebApp/Person/Edit?PersonID=6">Edit</a>
<button class="btn btn-danger>Delete</button>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
Use this instead of your form code:
#using(Html.BeginForm("Delete", "Person", new { item.PersonId }))
{
#Html.AntiForgetyToken()
<button class="btn">Delete</button>
}
ASP.NET MVC default action behavior: primitive types are first looked in query string.
Maybe it's better to use just one form and add a cell like this instead of several forms:
<td onclick="window.location='#Url.Action("Delete", new { PersonID = item.PersonId })'" style="cursor:pointer;">
</td>
I have made grid with html table tag .in one of TD tag I have this code
<td>
<a onclick="$('#lightBox').css('display','inline')"></a>
<div style="display: none" id="lightbox">
<%--<%Html.RenderAction("LightBox","PremiumSharingAdmin",new {historyId = premium.SharingPremiumHistoryID}); %>--%>
<img src="Storage/Images/<%=premium.SharingPremiumHistoryID %>.jpg" title="image" width="100" height="100"/>
<div>
<textarea readonly="readonly">
<%= premium.Content %>
</textarea>
</div>
<div>
<input type="text" readonly="readonly" value="<%= premium.SharingTitle %>"/>
</div>
</div>
</td>
These tag provide me some extra info from grid row that By default is hidden.
In other side I have Link tag that if user pressed that display that row.
but problem is that when I pressed it, it just show me the first record detail and when I press the others it show me the first row detail.
where is the problem guys ?
This is my whole ASPX view
<% foreach (var premium in Model)
{%>
<tr>
<td style=" font-weight: bold;width: 130px;">
<span ><%= premium.SharingTitle %></span>
</td>
<td style=" font-weight: bold;width: 130px;">
<span ><%= premium.AddedDate.ConvertToPersianDate(true) %></span>
</td>
<td style="width: 130px;">
<span> <%= premium.IsSubmit %></span>
</td>
<td style="width: 130px;">
<span> <%= premium.ResturantName %></span>
</td>
<td style="width: 130px;">
<span> <%= premium.Content %></span>
</td>
<td style="width: 130px;">
<div class="group">
<a class="delete" href="<%= Url.Action("submit", "PremiumSharingAdmin", new {historyId = premium.SharingPremiumHistoryID}) %>" onclick="return confirm('آیا میخواهید این خبر را تایید کنید؟');">تایید</a>
</div>
</td>
<td>
<a onclick="$('#lightBox').css('display','inline')"></a>
<div style="display: none" id="lightBox">
<%--<%Html.RenderAction("LightBox","PremiumSharingAdmin",new {historyId = premium.SharingPremiumHistoryID}); %>--%>
<img src="Storage/Images/<%=premium.SharingPremiumHistoryID %>.jpg" title="image" width="100" height="100"/>
<div>
<textarea readonly="readonly">
<%= premium.Content %>
</textarea>
</div>
<div>
<input type="text" readonly="readonly" value="<%= premium.SharingTitle %>"/>
</div>
</div>
</td>
</tr>
<%} %>
You are generating invalid html by giving multiple <div> elements the same id attribute. $('#lightBox').css('display','inline') will return all elements with id="lightbox" but set the style of only the first.
Instead, use class names and use relative selectors. I also recommend you use Unobtrusive Javascript and css, rather tan polluting your mark up with behavior.
Html
<td>
Show
<div class="lightbox">Some content to display</div>
</td>
CSS
.lightbox {
display: none;
}
Script (at bottom of page)
<script>
$('.toggle').click(function () {
if ($(this).hasClass('hidden')) {
$(this).next('div').show();
$(this).text('Hide');
} else {
$(this).text('Show');
$(this).next('div').hide();
}
$(this).toggleClass('hidden');
});
</script>
</body>
Side note: Using RenderAction to render the contents of the hidden div suggest the contents are large and/or you calling a service/database to get the contents. If that's the case you should be loading the contents on demand using ajax (unless your expecting the users to view the details of all rows)
I use asp.net-mvc, entity framework. My view is like below:
<td class="center">
<span id="spanitem_#item.UrunId">#item.Fiyat</span>
<input type="text" id="textfiyat_#item.UrunId" value="" class="displaynone textwidth90"/>
</td>
<td class="center">
<span id="spanitem_#item.UrunId">#item.Adet</span>
<input type="text" id="textadet_#item.UrunId" value="" class="displaynone textwidth90"/>
</td>
<td class="center">
<span id="spanitem_#item.UrunId">
#item.Fiyat)*#item.Adet
</span>
</td>
Fiyat field is decimal, Adet field is int. I want to show their multiplying. But i can not.
How can I achieve this. Thanks...
Have you tried #(item.Fiyat * item.Adet)
You can try it-
#(item.Fiyat * item.Adet)