Find the value of a <TD> and retrive it into input box - c#

I have some trouble to get the text in a and put it in an Box, here you can find a small example.
The idea is when the user click the "Select" it put the code from inside the
<td> #Html.DisplayFor(Mod => Item.Item.Custumer_code) <td/>
in the Input input with the Custumercode ID.
here is the code:
<div class="col-sm-3">
<input class="form-control"
placeholder="Entre a custumer code"
id="Custumercode"
name="Custumercode"/>
</div>
<table class="table">
<thead>
<tr>
<th>Costumer Code</th>
<th>Select</th>
<th>Costumer Name</th>
<th>Email </th>
<th>Tel </th>
</tr>
</thead>
#foreach (var Item in Model)
{
<tbody>
<tr>
<td> #Html.DisplayFor(Mod => Item.Custumer_code) </td>
<td> #Html.DisplayFor(Mod => Item.custumer_name) </td>
<td> #Html.DisplayFor(Mod => Item.Email) </td>
<td> #Html.DisplayFor(Mod => Item.Tel) </td>
<td>
<button type="button" class="btn" onclick="myFunction()">
Select
</button>
</td>
</tr>
</tbody>
}
</table>`


Try this
$(document).ready(function(){
$(document).on('click','.btn',function(){
var customer = $(this).parents('tr').find('td:eq(0)').text();
$('#Custumercode').val(customer );
});
});
DEMO


Try this:
$(document).ready(function(){
$('.btn').click(function(){
var customerCode = $(this).closest('tr').find('td:nth-child(1)').text();
$('#Custumercode').val(customerCode );
});
});

Related

where can i found search input textbox on controller action or view?

I working on asp.net mvc application by csharp . i face issue I can't find controls search input type textbox .
I search on action controller PendingRequests i can't found it .
also i search on index.html it not exist
so How to get search text box please ?
action controller
public ActionResult Index(string filenumber)
{
int employeeFileNo;
string userRole;
if (!string.IsNullOrEmpty(filenumber))
{
if (int.TryParse(filenumber, out employeeFileNo))
{
JDEUtility jde = new JDEUtility();
userRole = Workforce.GetUserRole(employeeFileNo);
if (!string.IsNullOrEmpty(userRole))
{
var EmpName = jde.GetEmployeeName(employeeFileNo);
Session[SessionKeys.UserCode] = employeeFileNo;
Session[SessionKeys.Username] = EmpName;
Session[SessionKeys.RoleCode] = userRole;
if (userRole != RoleKey.REQ)
return RedirectToAction("PendingRequests", "WorkforceRequests", null);
else
return RedirectToAction("MyRequests", "WorkforceRequests", null);
}
else
ViewBag.errorMsg = "unauthorized user";
}
else
{
ViewBag.errorMsg = "incorrect file no";
}
}
else
{
ViewBag.errorMsg = "unauthorized user";
}
return View();
}
pending request view
#model IEnumerable<HR.WorkforceRequisition.Models.WorkforceRequest>
#{
ViewBag.Title = "Pending Requests";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Pending Requests</h2>
<hr />
#if (!string.IsNullOrWhiteSpace(ViewBag.msg))
{
<div class="alert alert-success">
#ViewBag.msg
</div>
}
#if (!string.IsNullOrWhiteSpace(ViewBag.errorMsg))
{
<div class="alert alert-danger">
#ViewBag.errorMsg
</div>
}
<table id="dtbl" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th></th>
<th>
#Html.DisplayNameFor(model => model.WorkforceRequestID)
</th>
<th>
#Html.DisplayNameFor(model => model.DepartmentCode)
</th>
<th>
#Html.DisplayNameFor(model => model.Section)
</th>
<th>
#Html.DisplayNameFor(model => model.RequiredPosition)
</th>
<th>
#Html.DisplayNameFor(model => model.JobTitle)
</th>
<th>
#Html.DisplayNameFor(model => model.ReportingTo)
</th>
<th>
#Html.DisplayNameFor(model => model.NationalityCategory)
</th>
<th>
#Html.DisplayNameFor(model => model.StatusRemark)
</th>
<th>
Requestor
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.ActionLink("Details", "Details", new { id = item.WorkforceRequestID })
</td>
<td>
#Html.DisplayFor(modelItem => item.WorkforceRequestID)
</td>
<td>
#Html.DisplayFor(modelItem => item.DepartmentCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.Section)
</td>
<td>
#Html.DisplayFor(modelItem => item.RequiredPosition)
</td>
<td>
#Html.DisplayFor(modelItem => item.JobTitle)
</td>
<td>
#Html.DisplayFor(modelItem => item.ReportingTo)
</td>
<td>
#Html.DisplayFor(modelItem => item.NationalityCategory)
</td>
<td>
#Html.DisplayFor(modelItem => item.StatusRemark)
</td>
<td>
#Html.DisplayFor(modelItem => item.CreatedByName)
</td>
</tr>
}
</tbody>
</table>
<script>
$(document).ready(function () {
$('#dtbl').DataTable({
"scrollX": true,
"pageLength": 10,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel'
]
});
});
</script>
expected result is found search text box input on which place
display text box on pending requests

From the screenshot, it seems you need search text box in the data table. The search box appears by default as such unless you have set any property to not show it. With your js I am able to see the search box You can try adding "searching": true property to your data table also. You can check the documentation here.
Here is a working snippet
$(document).ready(function () {
$('#tableID').DataTable({
// Enable the searching
// of the DataTable
searching: true // will work without this also
});
});
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
<table id="tableID" class="display">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Samer</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Rajiv</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Suhail</td>
<td>45</td>
</tr>
<tr>
<td>4</td>
<td>Manisha</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>Robbert</td>
<td>68</td>
</tr>
<tr>
<td>6</td>
<td>Mike</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>Ere</td>
<td>23</td>
</tr>
<tr>
<td>8</td>
<td>James</td>
<td>35</td>
</tr>
<tr>
<td>9</td>
<td>Walt</td>
<td>65</td>
</tr>
<tr>
<td>10</td>
<td>Jessieca</td>
<td>28</td>
</tr>
<tr>
<td>11</td>
<td>Raghu</td>
<td>20</td>
</tr>
</tbody>
</table>

How do I post the row id in a custom built ASP.NET Core Razor Pages editable Grid?

I have tried several approaches, and as I'm new to Razor Pages in ASP.NET Core I'm blocked. Could anybody help me please? It must be something trivial but I googled quite a lot and I can't find a suitable way. I don't want to use jquery or any other javascript library.
Here is the relevant code:
<form method="post">
<table>
<thead>
<tr>
<th>
Text 1
</th>
<th>
Text 2
</th>
<th>
Text 3
</th>
</tr>
</thead>
<tbody>
#foreach(var item in Model.GridRows)
{
<tr>
<td>
<input type="hidden" asp-for="#item.Id" />
</td>
<td>
#Html.EditorFor(modelItem => item.Text1)
</td>
<td>
#Html.EditorFor(modelItem => item.Text2)
</td>
<td>
#Html.EditorFor(modelItem => item.Text3)
</td>
<td>
<input type="submit" value="Save" class="btn btn-primary"/>
</td>
</tr>
}
</tbody>
</table>
</form>
public async Task<IActionResult> OnPostAsync(int id)
{
if (!ModelState.IsValid)
{
return Page();
}
var gridRowUpdate = await _context.GridRows.FindAsync(id);
if (gridRowUpdate == null)
{
return NotFound();
}
if(await TryUpdateModelAsync<GridRow>(gridRowUpdate, "GridRow", g => g.Text1, g => g.Text2, g => g.Text3))
{
await _context.SaveChangesAsync();
}
return RedirectToPage("./Index");
}

IF you want to click each save button to send the Id of that row, You can just follow below simple demo without any jquery or any other javascript library.
<table>
<thead>
<tr>
<th>
Text 1
</th>
<th>
Text 2
</th>
<th>
Text 3
</th>
</tr>
</thead>
<tbody>
#foreach(var item in Model.test)
{
<form method="post" >
<tr>
<td>
<input type="hidden" name="Id" value="#item.Id" />
</td>
<td>
#Html.EditorFor(modelItem => item.Text1)
</td>
<td>
#Html.EditorFor(modelItem => item.Text2)
</td>
<td>
#Html.EditorFor(modelItem => item.Text3)
</td>
<td>
<input type="submit" value="Save" class="btn btn-primary"/>
</td>
</tr>
</form>
}
</tbody>
</table>

How can I have a table with cells as inputs to update data in NET 5 MVC

I have a View with a table with this structure:
<form asp-action="Index">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<table class="table table-hover table-responsive-sm display">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Descripcion)
</th>
<th>
#Html.DisplayNameFor(model => model.Activa)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<input value="#Html.DisplayFor(modelitem => item.AreaClave)"/>
</td>
<td>
<input id="desc" name="desc" value="#Html.DisplayFor(modelItem => item.Descripcion)" />
</td>
<td>
<input value="#Html.DisplayFor(modelItem => item.Activa)" />
</td>
<td>
<div class="form-group">
<button asp-route-id="#item.AreaClave" type="submit" name="action">Update</button>
</div>
</td>
</tr>
}
</tbody>
</table>
I want to have multiple rows with an open input for "item.Descripcion", this is because I want to be able to update every row individually by its row ID.
This approach works just as fine for the first row, but for the following it doesn't work. I think this is because the name tag is repeated and its only considering the first one.
Is there a way to make my table with an update input in each row?

You can try to generate <form> and <table> for each item like below:
#model IEnumerable<Test>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<table class="table table-hover table-responsive-sm display">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Descripcion)
</th>
<th>
#Html.DisplayNameFor(model => model.Activa)
</th>
<th></th>
</tr>
</thead>
</table>
#foreach (var item in Model)
{
<form asp-action="Index">
<table class="table table-hover table-responsive-sm display">
<tbody>
<tr>
<td>
<input value="#Html.DisplayFor(modelitem => item.AreaClave)" />
</td>
<td>
<input id="desc" name="desc" value="#Html.DisplayFor(modelItem => item.Descripcion)" />
</td>
<td>
<input value="#Html.DisplayFor(modelItem => item.Activa)" />
</td>
<td>
<div class="form-group">
<button asp-route-id="#item.AreaClave" type="submit" name="action">Update</button>
</div>
</td>
</tr>
</tbody>
</table>
</form>
}
Backend code:
[HttpPost]
public IActionResult Index(string id,string desc)
{
//do your stufff...
}

add edit table, how to change a row to edit mode?

Below is my razor code for my table of users and the current add/edit layout
<table class="smalltable" cellpadding="0" cellspacing="0" id="tblUsers">
<thead>
<tr>
<th> </th>
<th>First Name</th>
<th>Last Name</th>
<th>Dept</th>
<th>Assyst Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>#{ Html.BeginForm("AddEditUser", "Home"); }
<input type="submit" value="Add" id="btnSave" name="cmd" class="plain-button" />
</td>
<td>#Html.Editor("Forename")</td>
<td>#Html.Editor("Surname")</td>
<td>#Html.DropDownList("lstDepts")</td>
<td>#Html.Editor("AssystName")
#{ Html.EndForm(); }</td>
</tr>
#foreach (var User in Model)
{
<tr>
<td>#Html.ActionLink("Edit", "AddEditUser", new { id = User.ID }, new { name = "cmd", value = "Edit" })</td>
<td>
#User.Forename
</td>
<td>
#User.Surname
</td>
<td>
#User.Dept
</td>
<td>
#User.AssystName
</td>
</tr>
}
</tbody>
</table>
What i want to achieve is when a edit is pressed, the row that the edit link was on turns into edit boxes, i how to load up the add form with the edit users details (i could use hidden id and set it with querystring) but i wanted to edit in place really
anyone know how to do this or can point me in the right place?
THanks

ASP MVC passing model data in view back as form data

I got the following Razor view that display a list of HDD so an user and add to a cart. When the user press the button next to each row of HDD, it will pass the quantity and HDD's identity to a controller. However, while each HDD's ID does display properly, "hddId" is always 1 and "quantity" is correctly 5 when I inspect the Controller's parameters.
#model IEnumerable<TestStore.Models.Hdd>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#using(Html.BeginForm("AddToCart","Cart")){
<table>
<tr>
<th>
Ident
</th>
<th>
Brand
</th>
<th>
Name
</th>
<th>
Model
</th>
<th>
Speed
</th>
<th>
Capacity
</th>
<th>
Cache
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.hddId)
</td>
<td>
#Html.Hidden("hddId", item.hddId)
#Html.Hidden("quantity", 5)
#Html.DisplayFor(modelItem => item.brand)
</td>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.DisplayFor(modelItem => item.model)
</td>
<td>
#Html.DisplayFor(modelItem => item.speed)
</td>
<td>
#Html.DisplayFor(modelItem => item.capacity)
</td>
<td>
#Html.DisplayFor(modelItem => item.cache)
</td>
<td>
<input type="submit" value="Add to Cart" />
</td>
</tr>
}
</table>
}

Codingbiz is correct. The submit button wasn't referring to any particular row but the entire table. I suspect the reason why "hddId" was always "1" is because that's the first reference of "hddId" it see when the form is submitted. I changed it so #using(Html.BeginForm(...)) is inside the #foreach loop so each row has its own form and submit button:
#foreach (var item in Model) {
<tr>
#using(Html.BeginForm("AddToCart","Cart")){
<td>
#Html.DisplayFor(modelItem => item.hddId)
</td>
<td>
#Html.Hidden("hddId", item.hddId)
#Html.Hidden("quantity", 5)
#Html.DisplayFor(modelItem => item.brand)
</td>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.DisplayFor(modelItem => item.model)
</td>
<td>
#Html.DisplayFor(modelItem => item.speed)
</td>
<td>
#Html.DisplayFor(modelItem => item.capacity)
</td>
<td>
#Html.DisplayFor(modelItem => item.cache)
</td>
<td>
<input type="submit" value="Add to Cart" />
</td>
}
</tr>
}

As others have said, this doesn't work because when you submit, you're submitting every row in the table, not just the one clicked.
One option is to do what they suggest in this article:
http://federmanscripts.com/2010/01/12/form-and-table-row-nesting-workaround/
That is, using javascript, you copy the form values on button press to a hidden row and submit that.

I got around the validation problem by using button type="submit" instead of input type="submit". It still works correctly by passing the id number to the controller.
#using(Html.BeginForm("AddToCart","Cart")){
<table>
<tr>
//header stuff here
</tr>
#foreach (var item in Model) {
//row data goes here
//remove hidden field reference to #item.hddId
<tr>
<td>
<button type="submit" value="#item.hddId" name="hddId">Add to Cart</button>
</td>
</tr>
</table>
}

Categories

Resources