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>

I want to convert my view as it is in the picture to a downloadable pdf file in mvc, c#, or JS

[This] 1 is my view. After the button click, I want to embed this view as a picture or by HTML with CSS to a pdf file. This pdf file gets downloaded on button click.I tried lots of methods like itextsharp, jsPDF, phantomJS but I still have no clue how to achieve it. Can anyone help?
function start() {
var table = tableToJson($('#StudentInfoListTable').get(0))
var doc = new jsPDF('p', 'pt', 'a1', true);
doc.cellInitialize();
$.each(table, function (i, row) {
$.each(row, function (j, cell) {
doc.cell(10, 50, 120, 50, cell, i); // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height
})
})
doc.save('sample-file.pdf');
}
function tableToJson(table) {
var data = [];
// first row needs to be headers
var headers = [];
for (var i = 0; i < table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace('/ /gi', '');
}
// go through cells
for (var i = 0; i < table.rows.length; i++) {
var tableRow = table.rows[i];
var rowData = {};
for (var j = 0; j < tableRow.cells.length; j++) {
rowData[headers[j]] = tableRow.cells[j].innerHTML;
}
data.push(rowData);
}
return data;
}
body{
background: url("");
background-attachment: fixed;
background-repeat: no-repeat;
}
.content {
width: 100%;
min-height: 400px;
}
.box-header {
background-color: #838060;
height: 50px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
}
.box-header h4 {
position: relative;
top: 10px;
}
.box {
background-color: whitesmoke;
position: relative;
width: 100%;
font-size:28px;
}
.middle{
width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<div class="card">
<div class="card-body">
<table cellpadding="30" class="table table-striped" id="StudentInfoListTable">
<tr>
<td><img src="#Model.img" alt="" height="200" width="200" /></td>
<td class="middle"></td>
<td>LICENSE ID - #Html.DisplayFor(m => m.LicenseID)</td>
</tr>
<tr>
<td>NAME: </td>
<td class="middle"></td>
<td>#Html.DisplayFor(m => m.Name)</td>
</tr>
<tr>
<td>#Html.DisplayFor(m => m.Relo) </td>
<td class="middle"></td>
<td>#Html.DisplayFor(m => m.careOf)</td>
</tr>
<tr>
<td>GENDER: </td>
<td class="middle"></td>
<td>#Html.DisplayFor(m => m.gender)</td>
</tr>
<tr>
<td>BLOOD GROUP: </td>
<td class="middle"></td>
<td>#Html.DisplayFor(m => m.blood)</td>
</tr>
<tr>
<td>DATE OF BIRTH: </td>
<td class="middle"></td>
<td>#Html.DisplayFor(m => m.date)</td>
</tr>
<tr>
<td>CONTACT NO: </td>
<td class="middle"></td>
<td>#Html.DisplayFor(m => m.Mobile)</td>
</tr>
<tr>
<td>ADDRESS: </td>
<td class="middle"></td>
<td>#Html.DisplayFor(m => m.Address)</td>
</tr>
<tr>
<td>Signature </td>
<td class="middle"></td>
<td><img src="#Model.sign" alt="" style="background-color:white;"/></td>
</tr>
</table>
<br/><br/>
<button onclick="start()" class="btn btn-block btn-primary">download</button>
</div>
</div>
Tried this way but doesn't render the CSS, instead it generates this see here.

You can Post the HTML string to server and convert it to PDF.
Here is the demo :
HTML : (Obviously you can use your existing HTML)
<div id="dvTable">
<table cellspacing="0" rules="all" border="1">
<tr>
<th scope="col" style="width: 120px;background-color:#D20B0C">
Customer Id
</th>
<th scope="col" style="width: 150px;background-color:#D20B0C">
Name
</th>
<th scope="col" style="width: 100px;background-color:#D20B0C">
Country
</th>
</tr>
<tr>
<td>
ALFKI
</td>
<td>
Maria Anders
</td>
<td>
Germany
</td>
</tr>
<tr>
<td>
ANATR
</td>
<td>
Ana Trujillo
</td>
<td>
Mexico
</td>
</tr>
</table>
</div>
<input type="hidden" id="hfTableHTML" name="Table_HTML" />
<hr />
<asp:Button Text="Export" runat="server" OnClick="Export" OnClientClick="SetHTML()" />
<script type="text/javascript">
function SetHTML() {
document.getElementById("hfTableHTML").value = document.getElementById("dvTable").innerHTML;
}
</script>
Namespaces:
using System.IO;
using System.Text;
using System.Data;
using iTextSharp.text;
using iTextSharp.text.pdf;
using iTextSharp.text.html.simpleparser;
C# function:
protected void Export(object sender, EventArgs e)
{
//Export HTML String as PDF.
string html = Request.Form["Table_HTML"];
StringReader sr = new StringReader(html);
Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 10f, 0f);
HTMLWorker htmlparser = new HTMLWorker(pdfDoc);
PdfWriter writer = PdfWriter.GetInstance(pdfDoc, Response.OutputStream);
pdfDoc.Open();
htmlparser.Parse(sr);
pdfDoc.Close();
Response.ContentType = "application/pdf";
Response.AddHeader("content-disposition", "attachment;filename=Table.pdf");
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Write(pdfDoc);
Response.End();
}
OR For MVC/C# you can use : Rotativa http://nuget.org/packages/Rotativa. It's based on wkhtmltopdf.
install it from nuget : Install-Package Rotativa -Version 1.7.3 and usage is simple :
public ActionResult PrintIndex()
{
return new ActionAsPdf("Index", new { name = "Giorgio" }) { FileName = "Test.pdf" };
}
You can define an action that returns an ActionResult of the type ActionAsPdf (RouteAsPdf is also available). where name = "Giorgio" is a route parameter.

how to add multiple of model in one view

I want to add my class model in my index view because I need ClassID for dropdown to show classes in my view but don't know how to.
This is my index:
#using opr.Models;
#using PagedList;
#using PagedList.Mvc;
#model PagedList.IPagedList<opr.Data.C_QuestionTable>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div class="alert-success form-control m-auto w-75 custom-form">
<div class="col-6 pb-3 input-control">
<label for="ex3"> Select Class:</label>
#Html.DropDownListFor(model => model.ClassID, (SelectList)ViewBag.dataForDropDowns, new { #class = "form-control select2ddl" })
</div>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
QuestionText
</th>
</tr>
#foreach (var item in Model)
{
foreach (var answer in item.C_AnswerTable)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.QuestionText)
#Html.RadioButton("searchBy", answer.Options, true)
<text>#answer.Options</text>
</td>
</tr>
}
}
<tr>
<div class="pagination pull-left">
<hr />
<td colspan="3">#Html.PagedListPager(Model, page => Url.Action("Index", new { page = page }))</td>
</div>
</tr>
</table>
</div>
This is my Controller:
examsEntities db = new examsEntities();
public ActionResult Index(int?page)
{
var mod1 = db.myclasses.Select(s => new { s.ID, s.C_name }).ToList();
SelectList sList = new SelectList(mod1, "ID", "C_name");
ViewBag.dataForDropDown = sList;
var pageNumber = page ?? 1;
var pageSize = 3;
var question = db.C_QuestionTable.OrderBy(x => x.QuestionText).ToPagedList(pageNumber, pageSize);
return View(question);
}

namespace OMS.Models
{
public class AbcModel
{
public int Id { get; set; }
public string Name{ get; set; }
public Classmodel classmodel{ get; set; }
}
}
bind class model into Index model(Abc model) and now in view
#using opr.Models;
#using PagedList;
#using PagedList.Mvc;
#model PagedList.IPagedList<opr.Data.C_QuestionTable>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div class="alert-success form-control m-auto w-75 custom-form">
<div class="col-6 pb-3 input-control">
<label for="ex3"> Select Class:</label>
#Html.DropDownListFor(model => model.classmodel.ClassID,
(SelectList)ViewBag.dataForDropDowns, new { #class = "form-control
select2ddl" })
</div>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
QuestionText
</th>
</tr>
#foreach (var item in Model)
{
foreach (var answer in item.C_AnswerTable)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.QuestionText)
#Html.RadioButton("searchBy", answer.Options, true)
<text>#answer.Options</text>
</td>
</tr>
}
}
<tr>
<div class="pagination pull-left">
<hr />
<td colspan="3">#Html.PagedListPager(Model, page => Url.Action("Index", new { page = page }))</td>
</div>
</tr>
</table>
</div>
Hope it will help you

How to bind JSON object with knockout on Dropdown change with html table

When I change the dropdown value, json data is change but not loads, and throws this error:
Uncaught Error: You cannot apply bindings multiple times to the same element.
How to resolve this?
$("#VehicleID").change(function () {
var categoryid = $("#VehicleTypeID option:Selected").val().trim();
var subcategoryid = $(this).val();
var url = "../Consignment/LoadratebydetailId";
$.getJSON(url, { CategoryID: categoryid, SubCategory: subcategoryid },
function (classesData) {
//var koNode = document.getElementById('fareDetailbody');
ko.cleanNode(classesData);
//ko.cleanNode($element[0]);
ko.applyBindings({
teams: classesData,
});
});
$("#rateChargeDiv").hide();
$("#rateChargeDiv").show();
});
<div id="rateDiv">
<div>
<h4>Selected Detail Changed</h4>
<table>
<thead>
<tr>
<th>name</th>
<th>cloth</th>
<th>color</th>
<th>size</th>
<th>length</th>
<th>total</th>
</tr>
</thead>
<tbody id="fareDetailbody" data-bind="foreach: teams">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: cloth"></td>
<td data-bind="text: color"></td>
<td data-bind="text: size"></td>
<td data-bind="text: length"></td>
<td data-bind="text: total"></td>
</tr>
</tbody>
</table>
</div>
<div id="close">close</div></div>
public JsonResult LoadratebydetailId(string CategoryID, string SubCategory)
{
if (CategoryID == "" || string.IsNullOrEmpty(CategoryID))
{
return Json("failure");
}
var vehCategory = this.GetratebydetailId(Convert.ToInt32(CategoryID));
var StatesData = vehCategory.
Where(cat => cat.VehicleCategoryID==Convert.ToInt32(SubCategory))
.Select(m => new
{
m.name,
m.cloth,
m.color,
m.size,
m.length,
m.total
});
return Json(StatesData, JsonRequestBehavior.AllowGet);
}

How to expand/collapse html table with partial view?

I am trying to expand/collapse a table row when a button is clicked. For the moment I can only expand the row.
I want to be able to collapse it aswell.
I am using a partial view.
I have tried this: expand/collapse table rows with JQuery but can't get it to work since I am loading data from a sql-database in a foreach loop.
To clarify: This expands the table, but I'm missing the collapse-part of my javascript code. Thanks in advance.
PartialView
<div class="table" id="logtable">
<div class="row">
<div class="cell" id="tableth">
message
</div>
</div>
#foreach (var item in Model.Logs)
{
<div class="row">
<div class="cell" id="tabletd">
<input type="button" name="answer" value="Show Div" onclick="showDiv(#item.id.ToString())" />
#Html.DisplayFor(modelItem => item.message)
</div>
</div>
<div class="row">
<div id="#item.id.ToString()" style="display:none;" class="answer_list">
<strong>Uri:</strong> #item.Uri <br/>
<strong>Method:</strong> #item.Method <br />
<strong>HttpStatus:</strong> #item.HttpStatus <br />
</div>
</div>
Javascript (in my HTML-view)
<script type="text/javascript">
function showDiv(message) {
document.getElementById(message).style.display = "block";
}
</script>

Do you want a toggle function? Check the status of the element and then chose whether to show or hide:
<script type="text/javascript">
function showDiv(message) {
if(document.getElementById(message).style.display == 'block'){
document.getElementById(message).style.display = "none";
}
else{
document.getElementById(message).style.display = "block";
}
}
</script>
Strictly speaking, this is pure javascript and not jQuery. If you really are using jQuery, you can make it even simpler:
function showDiv(message) {
$('#'+message).toggle();
}
You can even even go for a beautiful animation:
function showDiv(message) {
$('#'+message).slideToggle();
}

<style>
#dvExpoByBatchDate .expandExpo {
background-image: url("../Images/Expand.gif");
background-repeat: no-repeat;
background-position: center,center;
}
#dvExpoByBatchDate .expandExpoDisabled {
background-image: url("../Images/ExpandDisabled.gif");
background-repeat: no-repeat;
background-position: center,center;
}
#dvExpoByBatchDate .collapseExpo {
background-image: url("../Images/Collapse.gif");
background-repeat: no-repeat;
background-position: center,center;
}
</style>
//This is WrapperModel which contains all models for different level.
public class WrapperModel
{
public List<Employee> ListEmployee;
public List<Manger> Listmanger;
public List<Programmer> ListProgrammer;
}
#model Model.WrapperModel
<script>
//Default set to collapse Parent Header
$("#dtExposure .relationshipExposure").attr('colspan', 1);
//Hide child columns
$(".subRelationshipExposure").hide();
</script>
<style>
#dtExposure tr th {
cursor: default !important;
}
</style>
<table id="dtExposure" class="dbExposure display">
#if (Model != null)
{
if (Model.ListEmployee!= null) -- Parent Row View
{
#Html.Partial("Exposure/_ParentPartial", Model)
}
if (Model.Listmanger!= null) -- child Row View
{
#Html.Partial("Exposure/_ChildPartial", Model)
}
}
</table>
// Parent Partial View
#model Model.WrapperModel
<thead id="groupHead">
<tr>
<th rowspan="2" style="background-color: #003675"></th>
<th rowspan="2" style="background-color: #003675">ID</th>
<th class="relationshipExposure sorting_disabled" colspan="4" style="background-color: #003675">
FullName <span>&#9658</span>
</tr>
<tr>
#*HiddenSubChildColumn*#
<th style="background-color: #003675">FullName</th>
<th class="subRelationshipExposure" style="background-color: #003675">First Name</th>
<th class="subRelationshipExposure" style="background-color: #003675">Last Name</th>
<th class="subRelationshipExposure" style="background-color: #003675">Phone</th>
</tr>
</thead>
<tbody id="groupBody">
#foreach (var item in Model.ListEmployee)
{
<tr>
<td id="toggleExposureRelationship" class="expandExpo emptyTd" style="background-color:white;border:none"></td>
<td>#item.CDL</td>
<td>
<span id="relationshipExpo" style="color: #0000ff; cursor: pointer">#item.FullName</span>
</td>
<td class="subRelationshipExposure">#item.FirstName</td>
<td class="subRelationshipExposure">#item.LastName</td>
<td class="subRelationshipExposure">#item.Phone</td>
</tr>
}
</tbody>
//Child Partial View
#model Model.WrapperModel
<thead id="customHead">
<tr class="SubExposureCustomer" style="display: none">
<th class="emptyTd"></th>
<th style="background-color: #003675">ID#</th>
<th style="background-color: #003675">Full Name</th>
<th style="background-color: #003675" class="subRelationshipExposure">First Nmae</th>
<th style="background-color: #003675" class="subRelationshipExposure">Last Namen</th>
<th style="background-color: #003675" class="subRelationshipExposure">Phone</th>
</tr>
<tbody id="customBody">
#*Customer Level*#
#foreach (var item in Model.Listmanger)
{
var currCustomerMasterId = item.CUSTOMERMASTERID;
<tr class="SubExposureCustomer" data-currcustomermasterid="#currCustomerMasterId" style="display: none">
<td class="ExpoCustomerIcon expandExpo emptyTd" style="background-color:white;border:none"></td>
<td>#item.ID</td>
<td>#item.FULLNAME</td>
<td class="subRelationshipExposure">#item.FIRSTNAME</td>
<td class="subRelationshipExposure">#item.LASTNAME</td>
<td class="subRelationshipExposure">#item.PHONE</td>
</tr>
//For Pure MVC Grid Collapse
function ToggleExposure(“relationshipExposure”, “subRelationshipExposure”, 4) {
$(document).on("click", "." + className, function (e) {
var selfExposre = $("." + className);
var subSelfExposre = $("." + subclassName);
if (selfExposre.attr('colspan') == colspan) {
subSelfExposre.toggle();
selfExposre.attr('colspan', 1);
isCollpase = false;
}
else {
subSelfExposre.toggle();
selfExposre.attr('colspan', colspan);
isCollpase = true;
}
var varId = selfExposre.find("span");
varId.empty();
isCollpase ? varId.html("&#9668") : varId.html("&#9658");
});
}