Develop Reference

Pass the value of a button to a hidden field and save it to database

So my design is I have multiple display fields and one hidden field. Besides each row there are two buttons accept and reject.my point is when I click a button its value pass to the hidden field and submits automatically in the database.
when I try my code the button doesn't pass anything and I tried all the solutions related to this topic and nothing is working. what am I doing wrong?
controller:
[HttpGet]
public ActionResult Add_Fulfillment ()
{
var getData = db.TBL_Request.Include(x=>x.TBL_Accounts).Include(x=>x.TBL_Accounts_LOBs).ToList() ;
var add_fulfillment = new Add_Fulfillment();
var ful_ = new fulfillmentVM();
foreach (var data in getData)
{
List<Add_Fulfillment> fulfillment = db.TBL_Request.Select(i => new Add_Fulfillment
{
Request_ID = i.Request_ID,
Employee_no = i.Employee_no,
Operation_Date = i.Operation_Date,
Fulfillment_Rate = i.Fulfillment_Rate ??0,
Account_Name = i.TBL_Accounts.Account_Name,
LOB = i.TBL_Accounts_LOBs.LOB,
Status = i.Inserted_by
}).ToList();
ful_._Requests = fulfillment;
}
return View(ful_);
}
[HttpPost]
public ActionResult Add_Fulfillment_Accept(int Request_ID , int? Status)
{
var user= db.TBL_Request.Find(Request_ID);
//hiddenfieldvalue assigns it to the field in the database i want to update
db.SaveChanges();
return RedirectToAction("Add_Fulfillment");
}
[HttpPost]
public ActionResult Add_Fulfillment_Reject(int Request_ID)
{
return RedirectToAction("Add_Fulfillment");
}
the view
#model Staff_Requisition.Models.fulfillmentVM
#{
ViewBag.Title = "Add_Fulfillment";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Add_Fulfillment</h2>
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Plain Page</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table class="table">
<tr>
<th>
Employee_no
</th>
<th>
Operation_Date
</th>
<th>
Fulfillment_Rate
</th>
<th>
Account_Name
</th>
<th>
LOB
</th>
<th></th>
<th></th>
</tr>
#for (int i = 0; i < Model._Requests.Count(); i++)
{
<tr>
<td>
#Html.DisplayFor(x => Model._Requests[i].Employee_no)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Operation_Date)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Fulfillment_Rate)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Account_Name)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].LOB)
</td>
<td>
#Html.Hidden("Status" , Model._Requests[i].Status , new { id = "myEdit" })
</td>
#using (Html.BeginForm("Add_Fulfillment_Accept", "TBL_Request", FormMethod.Post, new { #id = "myForm" }))
{
#Html.AntiForgeryToken()
<td>
<button id="btnAccept" class="btn btn-lg btn-success" name="a_button" type="submit" value="122">Accept</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
</td>
}
#using (Html.BeginForm("Add_Fulfillment_Reject", "TBL_Request", FormMethod.Post, new { #id = "myForm" }))
{
#Html.AntiForgeryToken()
<td>
<button id="btnReject" class="btn btn-lg btn-danger" name="button" type="submit" value="222">Reject</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
</td>
}
</tr>
}
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
#section Scripts {
<script>
$("#btnAccept").click(function () {
$("#myEdit").val($("#btnAccept").val());
})
$("#btnReject").click(function () {
$("#myEdit").val($("#btnReject").val());
})
</script>
}

I solved it. the only issue was I didn't put the hidden field of the status inside the form .that's why it never passes the value. thank you for all your efforts though!
view:
#using (Html.BeginForm("Add_Fulfillment_Accept", "TBL_Request", FormMethod.Post))
{
#Html.AntiForgeryToken()
<td>
<button id="btnAccept" class="btn btn-lg btn-success" name="a_button" type="submit" onclick="accept(122)" value="122">Accept</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
#Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
}
#using (Html.BeginForm("Add_Fulfillment_Reject", "TBL_Request", FormMethod.Post))
{
#Html.AntiForgeryToken()
<td>
<button id="btnReject" class="btn btn-lg btn-danger" name="button" type="submit" onclick="reject(222)" value="222">Reject</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
#Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
}
</tr>
}
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
#section Scripts {
<script>
$('[name = "a_button"]').click(function () {
$('[name = "Status"]').val($('[name = "a_button"]').val());
})
$('[name = "button"]').click(function () {
$('[name = "Status"]').val($('[name = "button"]').val());
})
</script>

Hiding and un-hiding table div based off of data being returned

I have a table that I want to be hidden there is no data to be displayed.
I have a controller action that returns data to display for the table. If data is returned, I want the table to be show, otherwise I want it hidden. I have tried several approaches to this and it seems like my fix is working (for a few seconds) but then once the controller returns the model, the table becomes hidden again. I am doing something wrong. How can I fix this? Below is my code:
HTML:
#using (Html.BeginForm(null, null, FormMethod.Post, new { id = "submitForm"}))
{
<div class="row">
<div>
#Html.DropDownList("CasinoID", Model.TerminalReceiptPostData.CasinoIdDDL, "Select Casino", new { id = "cIdSearch", #class = "custom-class-for-dropdown card" })
</div>
<div>
<input id="datepicker" class="datepicker-base card" name="Date" placeholder="MM/DD/YYY" type="text"/>
</div>
<div>
<button type="submit" class="btn btn-sm btn-primary" id="search"> Search Transactions</button>
</div>
</div>
}
<hr />
<div class="row" id="ReceiptsMainDiv">
<div class="col-md-12" style="overflow-y:scroll">
<table class="table table-striped table-hover table-bordered" id="terminalReceipts">
<thead>
<tr>
<th>Terminal ID</th>
<th>Local Transaction Time</th>
<th>Amount</th>
<th>Receipt</th>
<td class="hidden"></td>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TransactionsTests)
{
<tr id="#String.Concat("rowIndex", Model.TransactionsTests.IndexOf(item))">
<td>#item.TerminalID</td>
<td>#item.TransactionTime</td>
<td>#item.Amount</td>
#*<td>#Html.ActionLink("View Receipt", "ViewReceipt", new { id = item.Id }, new { #class = "btn btn-primary btn-sm" }) <br /></td>*#
<td class="transactionID hidden">#item.Id</td>
<td>
#if (item.ReceiptData == null)
{
<button class="btn btn-sm btn-primary viewReceipt" disabled>View Receipt</button>
}
else
{
<button class="btn btn-sm btn-primary viewReceipt" data-rowindex="#String.Concat("rowIndex", Model.TransactionsTests.IndexOf(item))">View Receipt</button>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
Controller action:
[HttpPost]
public ActionResult Index(string CasinoID, DateTime Date)
{
//var id = Int32.Parse(Request.Form["CasinoID"].ToString());
var Cid = Request.Form["CasinoID"];
Cid = GetNumbers(Cid);
var id = Int32.Parse(Cid);
var model = TRBL.GetTransactionTestsData(id, Date);
model.TerminalReceiptPostData = TRBL.GetCasinosDDL();
return View(model);
}
and finally my JS function:
window.onload = function () {
$("#ReceiptsMainDiv").toggle();
var rowCount = $("#rowindex").length;
console.log(rowCount);
if (rowCount > 0) {
$("#ReceiptsMainDiv").toggle();
}
};
As you can see, the Form at the top contains the button, and the block below is the table that needs to be toggled.
Let me know if there is anything else you guys would need.

When you have results to show, <tr id="#String.Concat("rowIndex", Model.TransactionsTests.IndexOf(item))"> will not produce ids of "rowIndex" (unlike what you might be expecting). Instead, you will have "rowIndex0", "rowIndex1", etc. Therefore, after rowCount will be zero, and your will not toggle.

How to pass the value to the bootbox in the loop

I have a problem. How to pass the value of the variable to the bootbox in the loop.
I have an array taken from the database and displayed in a loop:
<tr>
<td>Order nr1</td>
<td></td>
<td>
<button id="confirm-delete-modal" type="button" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
<tr>
<td>Order nr2</td>
<td></td>
<td>
<button id="confirm-delete-modal" type="button" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
And Js Bootbox:
$('#confirm-delete-modal').click(function() {
var tesst = "aaa";
bootbox.confirm({
message: "Delete?",
buttons: {
confirm: {
label: 'YES',
className: 'btn-danger'
},
cancel: {
label: 'NO',
className: 'btn-success'
}
},
callback: function (result) {
if(result)
{
window.location.href = "/"+ tesst
}
}
});
});
I would like to pass a separate Id to the link for each row in the loop.How can I do this?

I added a data-index="" to the HTML, this way you can send "parameters" to your click function.
$('.btn').click(function() {
var index = $(this).data("index");
alert(index);
});
<button id="confirm-delete-modal" type="button"
class="btn btn-danger btn-sm" data-index="1">Delete</button>
<button id="confirm-delete-modal" type="button"
class="btn btn-danger btn-sm" data-index="2">Delete</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Notice that I also changed your selector, since it was selecting just one HTML element id (you have two elements with the same id). Try to create a new class and selecting this class instead (in this example I used just the normal btn class).

Change button to link in html table?

I have buttons in my html table. When I click on button I want to change link button to "Un-Extend" and I click on "Un-Extend" switch back previous button. How can I do that?
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#item.MemberCustomerName
</td>
<td>
#item.PositionCodeDescription
</td>
<td>
#item.MemberMasterCustomer
</td>
<td>
#item.MemberCustomerEmail
</td>
<td>
#if (item.EndDate != null)
{
#item.EndDate.Value.ToShortDateString()
}
</td>
<td>
<button id="btnExtend" type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"'>Extend</button>
</td>
</tr>
}

Do you want like this.
<button id="btnExtend" type="button" class="btn btn-info btn-xs un-extended" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"'>Extend</button>
jQuery(document).on("click",".un-extended",function(){
if(!$(this).hasClass("extend")){
$(this).addClass("extend");
$(this).text("Un-Extend");
}else{
$(this).removeClass("extend");
$(this).text("Extend");
}
});

You can do something like this: DEMO
$('button').click(function(){
if($(this).text() == "Extend") {
$(this).text('Un-Extend');
} else {
$(this).text('Extend');
}
});

Do you mean change the button tag to a tag?
As the button elements are inside the loop iteration, you can't use the same ID(s) name, instead put classname btnExtend(you name it), and register click handler for its, like following :
$(document).on('click', '.btnExtend', function() {
$(this).text(($(this).text() == 'Extend' ? 'Un-Extended' : 'Extend'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnExtend" type="button" class="btn btn-info btn-xs btnExtend" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"'>Extend</button>

You might want to try this.
$("#btnExtend").on("click",function(){
$(this).text($(this).text() == 'Extend' ? 'Un-Extend': 'Extend');
});

Change into below code and apply below funion of jquery into code:
tbody>
#foreach (var item in Model)
{
<tr>
<td>
#item.MemberCustomerName
</td>
<td>
#item.PositionCodeDescription
</td>
<td>
#item.MemberMasterCustomer
</td>
<td>
#item.MemberCustomerEmail
</td>
<td>
#if (item.EndDate != null)
{
#item.EndDate.Value.ToShortDateString()
}
</td>
<td>
<button id="btnExtend" type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#saveExtend" data-value='"#item.CommitteeMasterCustomer"' onclick ="showhide(this);" >Extend</button>
</td>
</tr>
}
<script> function showhide(victim)
{
var text = $(victim).closest('td').find('input:button').text();
if (text == "Extend") {
$(victim).closest('td').find('input:button').text('Un-Extend');
}
else {
$(victim).closest('td').find('input:button').text('Extend');
}
} </script>

Edit inline in table in index view

I use the following code to display the table rows
for every row there is edit and delete button ,what i want to do is
when I click on edit for specific row change the row from display only
to editable row (instead of navigating to other page for edit),how should I do that?
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.name)
</th>
<th>
#Html.DisplayNameFor(model => model.checkBox1)
</th>
<th></th>
</tr>
<tbody id="data-table">
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.DisplayFor(modelItem => item.checkBox1)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
}
</tbody>
This is how the table look like
Ive try to change the code to something like this but I got following errors:
<tbody id="data-table">
#for (var i = 0; i < Model.Count(); i++)
{
<tr>
if (Model[i].Id == ViewBag.SelectedID)
{
<td>
#Html.EditorFor(model=> model[i].name)
</td>
<td>
#Html.EditorFor(m=> m[i].checkBox1)
</td>
<td>
<button type="submit" name="submit" value="save">Save</button>
<button type="submit" name="submit" value="cancel">Cancel</button>
</td>
}
}
else
{
<td>
#Html.DisplayFor(m => m[i].name)
</td>
<td>
#Html.DisplayFor(m=> m[i].checkBox1)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = Model[i].Id }) |
#Html.ActionLink("Delete", "Delete", new { id = Model.Id })
</td>
}
</tr>
}
The error is in statments:
#Html.EditorFor(m => m[i].name) and
#Html.EditorFor(m=> m[i]checkBox1)
try specifing the arguments explicitly,any idea?

Try with the following code
Below function make row editable
var nCurrentEdit = 0;
$('#data-table').on('click', '.btnCustomEdit', function () {
nCurrentEdit = $(this).attr("id");
var oTR = $(this).parents("tr").first();
var sText = '<input type="text" value="' + oTR.find("td:nth-child(1)").text().trim() + '" />';
oTR.find("td:nth-child(1)").html(sText);
oTR.find(":disabled").prop("disabled", false);
if (oTR.find("#btnsubmit").length == 0)
oTR.find("td:last").append("<input id='btnUpdate' type='submit' value='Update' class='btn btn-default'>");
oTR.find("td:last a").hide();
event.preventDefault();
});
Following function update the record and convert the row normal from editable mode.
$('#data-table').on('click', '#btnUpdate', function () {
var postData = {
id : nCurrentEdit,
name: $("#name").val(),
checkBox1: $("#checkBox1").val(),
checkBox2: $("#checkBox2").val(),
checkBox3: $("#checkBox3").val()
};
$.post('#Url.Action("AjaxEdit", "Roles")', postData, null);
var sNewText = $(this).parents("tr").first().find("td:first input").val();
$(this).parents("tr").first().find("td:first").append(sNewText);
$(this).parents("tr").first().find("td:first input").remove();
$(this).parents("tr").find("input[type=checkbox]").prop("disabled", true);
$(this).parent().find("a").show();
$(this).hide();
});

You could maybe use jEditable http://www.appelsiini.net/projects/jeditable and intagrate it with your table.
Maybe you can use DataTables too with jEditable if it's fits your project, something like http://datatables.net/release-datatables/examples/server_side/editable.html