I am using MVC4.
I have view of form using #using (Html.BeginForm)
But I want to use table instead of fieldset
The view look great but then I had to have the submit button (in every record)as shown in my code .
I want only one button to submit ? So I try to put the submit out
of (Html.BeginForm) but then it will not work!!?
Also I have textbox for price ...And I want to be linked to the same submit button
this is my view :
<p>Enter the price please :</p>#Html.TextBox("price")
<fieldset>
<legend></legend>
<table>
<tr>
<th>
Title1
</th>
<th>
Title1
</th>
<th>
Title3
</th>
<th>
button
</th>
</tr>
#using (Html.BeginForm("Action", "Contrroler"))
{
int index = 0;
foreach (var req in Model.SelectedHome.Descreption)
{
<tr>
<td>
#Html.DisplayFor(m => m.homenmae)
</td>
<td>
#Html.DisplayFor(m => m.place)
</td>
<td>
#Html.EditorFor(m => m.rommsnumber)
</td>
<td>
<button type="submit" class="button "> click </button>
<td>
</tr>
index++;
}
}
</table>
</fieldset>
You can't submit a form with submit button out of form without some additional code
#using (Html.BeginForm("Action", "Contrroler", FormMethod.Post, new {id='myForm'} ))
{
<p>Enter the price please :</p>#Html.TextBox("price")
<fieldset>
<legend></legend>
<table>
<tr>
<th>
Title1
</th>
<th>
Title1
</th>
<th>
Title3
</th>
<th>
button
</th>
</tr>
int index = 0;
foreach (var req in Model.SelectedHome.Descreption)
{
<tr>
<td>
#Html.DisplayFor(m => m.homenmae)
</td>
<td>
#Html.DisplayFor(m => m.place)
</td>
<td>
#Html.EditorFor(m => m.rommsnumber)
</td>
</tr>
index++;
}
}
</table>
<button id='submitForm'>Submit</button>
JS:
$('#submitForm').click(function(){
$('#myForm').submit();
});
Put the submit button outside the for loop but within the form
Related
This is my HTML code for my table to display list of users:
<table class="table m-table m-table--head-bg-metal">
<thead>
<tr>
<th>
Nom
</th>
<th>
Prénom
</th>
<th>
Email
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jhon
</td>
<td>
Stone
</td>
<td>
jhonStone#gmail.com
</td>
<td>
<button class="btn btn-outline-danger m-btn m-btn--icon btn-sm m-btn--icon-only m-btn--pill m-btn--air" (click)="onDisableUser()">
<i class="fa fa-close"></i>
</button>
</td>
</tr>
</tbody>
This is typescript method:
onDisableUser(){
//this is the method to disable the table row..
}
What I want is when I click () on the action button, the table row will be disabled.
Thanks in advance.
What do you mean with disable?
If you want to remove the list item do this on the html :
<table class="table m-table m-table--head-bg-metal">
<thead>
<tr>
<th>
Nom
</th>
<th>
Prénom
</th>
<th>
Email
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr *ngIf="!isDisable">
<td>
Jhon
</td>
<td>
Stone
</td>
<td>
jhonStone#gmail.com
</td>
<td>
<button class="btn btn-outline-danger m-btn m-btn--icon btn-sm m-btn--icon-only m-btn--pill m-btn--air" (click)="onDisableUser()">
<i class="fa fa-close"></i>
</button>
</td>
</tr>
</tbody>
</table>
And on the typescript:
isDisable = false;
onDisableUser(){
this.isDisable = true;
}
If you want to disable it with css use this in html:
<tr [ngClass]="{'disabled': isDisable}>
You can use the css method to disable the table row.
Set the disabled to true when clicked and set the class to the <tr> if disabled=true
.disable{
cursor: not-allowed;
}
<table>
<tr class="disable">
<td> akjsd </td>
</tr>
<tr >
<td> akjsd </td>
</tr>
</table>
isDisable = false;
onDisableUser(){
this.isDisable = true;
}
I'm creating an HTML form that lists line items from one organization that need to be mapped to another on. My idea was to take the id of the selected option, and pass that to the action via Html.Action. This is the code I have so far;
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.newID)
</th>
<th>
#Html.DisplayNameFor(model => model.oldserviceid)
</th>
<th>
#Html.DisplayNameFor(model => model.description)
</th>
<th>
#Html.DisplayNameFor(model => model.Avg)
</th>
<th>
#Html.DisplayNameFor(model => model.Count)
</th>
<th>
#Html.DisplayNameFor(model => model.acquisitionid)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#* This is where I'm stuck *#
<form action=#Html.Action("Update", new { linemappingID = #item.LineMapID, newID = /*what goes here?*/ }) method="post" onsubmit="return updateForm()" id="#item.LineMapID">
<input list="serviceList" name="serviceList">
<datalist id="serviceList">
#foreach (var serv in ViewBag.serviceList)
{
#* Pass the ID value from here to the Html.Action *#
<option value="#serv.serviceid - #serv.servicedesc" id="#serv.serviceid">#serv.serviceid - #serv.servicedesc</option>
}
</datalist>
<input type="submit" value="update" />
</form>
</td>
<td>
#Html.DisplayFor(modelItem => item.oldserviceid)
</td>
<td>
#Html.DisplayFor(modelItem => item.description)
</td>
<td>
$#Html.DisplayFor(modelItem => item.Avg)
</td>
<td>
#Html.DisplayFor(modelItem => item.Count)
</td>
<td>
#Html.DisplayFor(modelItem => item.acquisitionid)
</td>
</tr>
}
</table>
I have a table in my view with a column of Checkboxes. I want the user to be able to select as many Checkboxes as they'd like and click a button at the bottom to deactivate them (Users in this model can be suspended/deactivated and reinstated/activated). I don't have any errors, but nothing is happening when I click on the buttons. I attached my code below. Thanks.
View
#using (Html.BeginForm("CheckBoxDeactivate"))
{
<table class="table">
<tr>
<th>
Select Users
</th>
<th>
#Html.DisplayNameFor(model => model.ID)
</th>
<th>
#Html.DisplayNameFor(model => model.FirstName)
</th>
<th>
#Html.DisplayNameFor(model => model.LastName)
</th>
<th>
#Html.DisplayNameFor(model => model.Email)
</th>
<th>
#Html.DisplayNameFor(model => model.UserName)
</th>
<th>
#Html.DisplayNameFor(model => model.suspended)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
<input type= "checkbox" name="manageUsers" value="#item.ID" />
</td>
<td>
#Html.DisplayFor(modelItem => item.ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Email)
</td>
<td>
#Html.DisplayFor(modelItem => item.UserName)
</td>
<td>
#Html.DisplayFor(modelItem => item.suspended)
</td>
</tr>
}
</table>
<br />
<input type="button" value="Add Roles" onclick="location.href'#Url.Action("CheckBoxDeactivate", "User")'" />
Controller
[HttpPost]
public ActionResult CheckBoxDeactivate(int[] ids)
{
tbl_Reg_User OAWUser = new tbl_Reg_User();
foreach (var id in ids)
{
OAWUser = db.tbl_Reg_User.Single(o => o.ID == id);
OAWUser.suspended = true;
db.SaveChanges();
}
ViewBag.Message = "Users deactivated successfully!";
return View();
}
<input type= "checkbox" name="manageUsers" value="#item.ID" />
This line should be
<input type= "checkbox" name="ids" id="ids" value="#item.ID" />
I think you are not getting the selected checkboxes in controller.
View
#using (Html.BeginForm("CheckBoxDeactivate","Home"))
{
<table class="table" border="1" style="border:1px solid black;border-collapse:collapse;">
<tr>
<th>Select Users
</th>
<th>
Sr.No.
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Phone
</th>
<th>
IsActive
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<input type= "checkbox" name="ids" id="ids" value="#item.Sr_No" />
</td>
<td>
#item.Sr_No
</td>
<td>
#item.FirstName
</td>
<td>
#item.LastName
</td>
<td>
#item.Phone
</td>
<td>
#item.IsActive
</td>
</tr>
}
</table>
<br />
<input type="submit" value="Add Roles" onclick="#Url.Action("CheckBoxDeactivate", "User")" />
}
Controller
[HttpPost]
public ActionResult CheckBoxDeactivate(int[] ids)
{
Temp OAWUser = new Temp();
if (ids != null)
{
foreach (var id in ids)
{
//Your code goes here
}
ViewBag.Message = "Users deactivated successfully!";
}
return RedirectToAction("Temp");
}
This piece of code did the job for me
I have Html code that generates a table that contains a lot of records.
Here is the code:
#model IEnumerable<UserContact>
#{
ViewBag.Title = "Contacts:";
}
<h2>
Contacts</h2>
<table>
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
</table>
This code is contained in razor partial view page.
My question is how can I create paging in table that described above?
As per your comment i m showing complete example of datatable here :
Jquery and CSS References :-
Links :-
http://code.jquery.com/jquery-1.11.1.min.js
http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js
http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css
Your Partial View :-
#model IEnumerable<UserContact>
#{
ViewBag.Title = "Contacts:";
}
<h2>
Contacts</h2>
<table id="mydatatable">
<thead>
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
<thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
<tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#mydatatable').dataTable();
});
</script>
Last but not the least don't forget to add references of required jquery files on your page.
//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js
/////////////////////////////////////
<table id="myTable">
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
I have a problem with form tags in a foreach loop in razor when it render the output html is wrong because in the first iteration the form tags disappear here is the razor code
#foreach (var item in Model)
{
<tr>
<td>#if (item.IsMandatory)
{
<span class="label label-important">Obligatorio</span>
}
else
{
<span class="label">Opcional</span>
} </td>
<td>#Html.DisplayFor(modelItem => item.DocumentName)</td>
<td>
</td>
<td>
<form>
form here!
</form>
</td>
</tr>
}
here is the rendered html:
<table class="table table-striped">
<thead>
<tr>
<th>Requerido</th>
<th>Documento</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label label-important">Obligatorio</span>
</td>
<td>Copia de cédula</td>
<td>
here form! <----------Problem Here
</td>
</tr>
<tr>
<td>
<span class="label label-important">Obligatorio</span>
</td>
<td>
Copia de otro documento de identidad (licencia, pasaporte, seguro)
</td>
<td>
<form novalidate="novalidate">
here form!
</form>
</td>
</tr>
You're probably trying to start a new tag inside an existing one, like this:
<form id="mainPageForm">
#foreach(item in items)
{
<form id="nestedForm#(item.FormId)">
}
</form>
Which results in something like this:
<form id="mainPageForm">
<form id="nestedForm1"></form> --> this ends the first form
<form id="nestedForm2"></form> --> correctly formed
<form id="nestedForm3"></form> --> correctly formed
</form> --> closing tag without parent