I have the following table:
<form method="post" asp-action="Index" asp-controller="Record">
<table class="table table-hover">
<thead>
<tr>
<th scope="col"><input type="checkbox" id="chkAll"></th>
<th scope="col">Created</th>
<th scope="col">User Reference</th>
<th scope="col">Type</th>
<th scope="col">Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach (var rec in Model.Data)
{
<tr>
<td style="display: none">
#Html.TextBoxFor(m => rec.Id)
</td>
<td>
#Html.CheckBoxFor(m => rec.IsChecked)
</td>
<td>#rec.Created</td>
<td>#rec.UserReference</td>
<td>#rec.Type</td>
<td>#rec.Status</td>
<td>
<input name="submit" type="submit" id="process" value="submit" />
</td>
</tr>
}
</tbody>
</table>
</form>
The issue I have is when I press submit I'm expecting to pass the content of the table into my controller, however when I submit the form the model on my controller is null:
[HttpPost]
public async Task<IActionResult> Index(List<UserData> data)
When I submit the form I expect to have a list of id's and checkbox values either true / false, can someone shed some light into why I'm not able to see this within the post method of the controller?
Found the solution of the following thread, seems switching foreach to for resolved the issue.
Related
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>
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...
}
I have a foreach loop like that.I want to get item id when pressed "delete" button.
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name - Sirname</th>
<th>Date - Time</th>
<th>Message</th>
<th>id</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Items)
{
<tr>
<th>#(Model.Items.IndexOf(item)+1)</th>
<td>#item.Name</td>
<td>#item.DateTime</td>
<td>#item.Message</td>
<td id="itemId">#item.id</td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
}
</tbody>
</table>
my Qjuery is like that;
$("button").click(function () {
var id = $("#itemId").html();
$("#sonuc").html(id);
});
});
and my result must be in it;
<p id="sonuc"> </p>
But everytime it shows only first item's id of table. So how can i get value of each element in loop with Jquery?
You can use var id = $(this).parent().prev().text();
Demo
$("button").click(function() {
var id = $(this).parent().prev().text();
$("#sonuc").html(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name - Sirname</th>
<th>Date - Time</th>
<th>Message</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr>
<th>#(Model.Items.IndexOf(item)+1)</th>
<td>#item.Name</td>
<td>#item.DateTime</td>
<td>#item.Message</td>
<td>#item.id1</td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
<tr>
<th>#(Model.Items.IndexOf(item)+1)</th>
<td>#item.Name</td>
<td>#item.DateTime</td>
<td>#item.Message</td>
<td>#item.id2</td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
<p id="sonuc"> </p>
Id must be unique for each element and if you want to get value of Item Id and use razor after pressing delete button you can set value of Item Id on delete button as Id or data attribute so
you can try
<td id="itemId_#item.id">#item.id</td>
<button id="#item.Id" class="btn btn-danger">Delete</button>
instead of
<td id="itemId">#item.id</td>
<button class="btn btn-danger">Delete</button>
$("button").click(function () {
var id = this.id; // value of itemId
});
});
Hello I have a form with several html/input tags. Like so:
<form class="form-group">
<div class="body table-responsive">
<table class="table m-b-0">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>phone number</th>
<th>ID</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.name</td>
<td>
<input type="text" name="" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="" id="" value=""
class="bordered">
</td>
</tr>
}
</tbody>
</table>
</div>
</form>
I havent named or id them yet , since I know there is a way to fill all inputs and save them all at the same time when a submit or button is pressed, I just dont know how.
Do I need to add something a tag or attribute on the in order to be able to save all inputs at the same time when the is pressed?
You have to assign names to each input and add place a submit button. When you click submit, user input will be sent to the server with the given method.
<form method="post" class="form-group">
<div class="body table-responsive">
<table class="table m-b-0">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>phone number</th>
<th>ID</th>
</tr>
</thead>
<tbody>
#{
var i = 0;
foreach (var item in Model) {
<tr>
<td>#item.name</td>
<td>
<input type="text" name="input1_#i" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="input2_#i" id="" value=""
class="bordered">
</td>
<td>
<input type="text" name="input3_#i" id="" value=""
class="bordered">
</td>
</tr>
}
}
</tbody>
</table>
</div>
<button type="submit">Submit</button>
</form>
Or you can listen to the submit event and handle it yourself.
$('form').submit(function(e) {
e.preventDefault();
// you can get the input data from 'this' (form element)
// here comes your validation and server call
});
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