Canvas in ASP.NET Core MVC controller - asp.net-mvc

How can I retrieve my image drawn in my canvas tag on my Index.cshtml page in my Home Controller?
I can currently get the from them but not the value of to insert it into a PDF later
My index.cshtml:
<form asp-action="Index">
<table>
<tr>
<th>Date</th>
<th>Société</th>
<th>Nom / Prénom</th>
<th>Signature (matin)</th>
<th>Signature (après-midi)</th>
</tr>
<tr>
<td><input asp-for="dateFormation" type="date" /></td>
<td><input asp-for="societeForme" type="text" /></td>
<td><input asp-for="nomPrenomForme" type="text" /></td>
<td><canvas id="signatureCanvas" width="200" height="100"></canvas></td>
<td><canvas id="signatureCanvas2" width="200" height="100"></canvas></td>
</tr>
</table>
#*BOUTON ENVOYER*#
<br />
<div class="myforma">
<button type="submit">Envoyer formulaire</button>
</div>
<br />
</form>
My HomeController.cs:
public async Task<IActionResult> Index([Bind("dateFormation, societeForme, nomPrenomForme")] FormulaireModel formulaireModel)
{
var renderer = new HtmlToPdf();
var pdfCreate = renderer.RenderHtmlAsPdf(formulaireModel.typeFormation + " " + formulaireModel.dureeFormation + " " + formulaireModel.animateurFormation + " " + formulaireModel.dateFormation.ToShortDateString() + " " + formulaireModel.societeForme + " " + formulaireModel.nomPrenomForme);
pdfCreate.SaveAs("liste-presence.pdf");
return View();
}

Related

Removing rows from simple table

I'm trying to figure out how to remove rows from a table. More specifically, rows that user might have ADDED.
Essentially my table gets data from a DB. I have a link "Add Row" that seems to work okay. It'll add a row, and add along the 'save' and 'delete' button on the row. See:
As you can see, the idea is to be able to 'cancel' this newly added row. However, I cannot find simple examples on how to do it, nor can I even seem to trigger the click() of the delete button!
My code:
$(function() {
/* <table id="tableX"> tag to specify different tables to be threated by the Tablesorter */
var $table = $('#table1');
var enabledlbl = localejs.gettext("Enabled");
var disabledlbl = localejs.gettext("Disabled");
var fieldRequiredlbl = localejs.gettext("This field is required!");
var dayslbl = localejs.gettext("days");
var monthslbl = localejs.gettext("months");
var savelbl = localejs.gettext("Save");
var deletelbl = localejs.gettext("Delete");
var accStatuslbl = localejs.gettext("Account Status");
/***************************
* main tablesorter config
***************************/
$table.tablesorter( {
theme : "bootstrap",
widthFixed: true,
/* click on column header a 3rd time to disable sorting, else need to ctrl+click */
sortReset: false,
// widget code contained in the jquery.tablesorter.widgets.js file
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
// the uitheme widget is NOT REQUIRED!
// PROY: eventually also look at the Output Widget
widgets : [ "columns", "zebra"],
widgetOptions : {
// using the default zebra striping class name, so it actually isn't included in the theme variable above
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
zebra : ["even", "odd"],
// class names added to columns (need 'columns' widget) when sorted
columns: [ "primary", "secondary", "tertiary" ]
}
});
/***************************
* Add row function
***************************/
$('.addrow').click(function() {
var row = '' +
'<tr class="newrow">' +
'<td><input type="hidden" name="id" value="0"></td>' +
'<td>'+
'<select name="isActive" id="isActive" class="form-control pl-2" aria-label="' + accStatuslbl + '" aria-describedby="isActiveReq">' +
' <option value="1" selected>' + enabledlbl + '</option>' +
' <option value="0">' + disabledlbl + '</option>' +
'</select>' +
'<div id="isActiveReq" class="pl-1 invalid-feedback">' + fieldRequiredlbl + '</div>' +
'</td>' +
'<td>' +
'<input type="text" name="days" id="days" class="form-control"' +
' placeholder="'+ dayslbl +'"' +
' aria-label="' + dayslbl + '"' +
' aria-describedby="daysReq"' +
' value=""' +
' required/>' +
'<div id="daysReq" class="pl-1 invalid-feedback">' + fieldRequiredlbl + '</div>' +
'</td>' +
'<td>' +
'<input type="text" name="months" id="months" class="form-control"' +
' placeholder="'+ monthslbl +'"' +
' aria-label="' + monthslbl + '"' +
' aria-describedby="monthsReq"' +
' value=""' +
' required/>' +
'<div id="monthsReq" class="pl-1 invalid-feedback">' + fieldRequiredlbl + '</div>' +
'</td>' +
'<td class="text-right text-nowrap">' +
' <input type="submit" name="btnSave" value="' + savelbl + '" style="font-weight: normal; font-size: 1.1em; color: red;">' +
' <input type="button" name="btnDelete" value="' + deletelbl + '" class="delrow" style="font-weight: normal; font-size: 1.1em;">' +
'</td>' +
'</tr>';
$row = $(row),
// resort table using the current sort; set to false to prevent resort, otherwise
// any other value in resort will automatically trigger the table resort.
resort = true;
$table
.find('tbody').append($row)
.trigger('addRows', [$row, resort]);
return false;
});
/***************************
* Delete row function
***************************/
$('.delrow').click(function() {
alert("delete row..");
});
});
<!doctype html>
<html lang="en">
<head>
<!-- jQuery tablesorter related -->
<link href="/css/jquery-tablesorter/theme.bootstrap_4.prestadesk.css" rel="stylesheet" type="text/css">
<script src="/js/jquery-tablesorter/jquery.tablesorter.combined.min.js"></script>
<script src="/js/prestadesk.tablesorter.onem_conditions.js"></script>
</head>
<body>
<table class="table table-striped table-md table-responsive-lg w-auto" id="table1">
<thead class="pt-2">
<th scope="col" data-priority="critical" data-label="ID" data-filter="false" class="colID">ID</th>
<th scope="col" data-priority="critical" data-sorter="false" data-filter="false" class="colStatus" data-label="STATUS" data-placeholder="" class="">STATUS</th>
<th scope="col" data-priority="critical" data-sorter="false" data-filter="false" data-label="DAYS">DAYS</th>
<th scope="col" data-priority="critical" data-sorter="false" data-filter="false" data-label="MONTHS">MONTHS</th>
<th data-priority="critical" data-sorter="false" data-filter="false" data-columnSelector="disable" data-label="SPACER" data-name="SPACER"> </th>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>STATUS</th>
<th>DAYS</th>
<th>MONTHS</th>
<th> </th>
</tr>
<tr>
<td colspan="5" class="pl-3 pt-2 pb-2" style="border-bottom-style: hidden;">
<div class="row ">
<div class="col-auto pr-2">
[ Add Row ]
</div>
<div class="col-auto pl-0 ml-0">
* save the added row before inserting new ones!
</div>
</div>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<!-- ID -->
<td class="pl-3 data-rowheader">
<input type="hidden" name="id" value="1">
1
</td>
<!-- STATUS -->
<td class="text-nowrap">
<select name="isActive" id="isActive" class="form-control pl-2">
<option value="1" selected>Enabled</option>
<option value="0" >Disabled</option>
</select>
</td>
<!-- DAYS -->
<td>
<input type="text" name="days" id="days" class="form-control"
placeholder="days"
value="156"
required/>
</td>
<!-- MONTHS -->
<td>
<input type="text" name="months" id="months" class="form-control"
placeholder="months"
value="18"
required/>
</td>
<!-- FORM BUTTONS -->
<td class="text-right text-nowrap">
<input type="submit" name="btnSave" value="Save" style="font-weight: normal; font-size: 1.1em;">
<input type="button" name="btnDelete" class="delrow" value="Delete" style="font-weight: normal; font-size: 1.1em;">
</td>
</tr>
</tbody>
</table>
</body>
</html>
It seems that the $('.delrow').click(function()... gets properly called if I add the class="delrow" to the main, existing 'delete' buttons, but upon adding a row, even if the new added row button has the 'delrow' class, it doesn't go through the $('.delrow').click even at all.
That is my first problem. Second, as mentioned initially, I can't seem to find a simple example. I am not using any particular widgets here or anything. It's a simple table... Should I ?
I did came across Pager plugin - examples of how to add and remove rows. from https://mottie.github.io/tablesorter/docs/example-pager.html, however, frankly, I do now understand it. Why would I need the pager just to remove a row? And frankly it seems way overkill, no ?
If anyone can shed a light on this... Many thanks! pat
Use delegated binding on the delete button:
$table.on('click', '.delrow', function() {
$(this).closest('tr').remove();
$table.trigger('update');
});

how to upload image in folder and path in database using asp.net mvc 5

How to save image path or name to database and copy the image in a folder. I have searched many pages on the internet but no luck. Please can anyone show my how to create the controller?
My View
<form action="Create" method="post">
<table>
<tr>
<td>
<input type="date" name="InquirDate" id="InquirDate" placeholder="Date" />
</td>
<td>
<input type="text" id="signby" name="signby" placeholder="signby" />
</td>
<td>
<input type="text" id="description" name="description" placeholder="Description" />
</td>
<td>
<input type="text" id="parentInqNo" name="parentInqNo" placeholder="Parent Inquiry number">
</td>
<td>
<select id="status" name="status">
<option>Draft</option>
<option>Published</option>
</select>
</td>
<td>
<input type="text" id="number" name="number" placeholder="number" />
</td>
</tr>
<tr>
<td>
<input type="text" name="subject" id="subject" placeholder="Subject" />
</td>
<td>
<input type="text" id="empid" name="empid" placeholder="empid" />
</td>
<td>
<input type="file" name="Attachment" id="Attachment" />
</td>
<td>
<input type="text" name="InqiurURL" id="InqiurURL" placeholder="InqiurURL" />
</td>
<td>
<input type="text" name="EnterDate" id="EnterDate" placeholder="EnterDate" />
</td>
</tr>
</table>
<input type="submit" value="Save">
</form>
Try following this code in your controller
public ActionResult Save(FormCollection fc, HttpPostedFileBase Attachment)//Instead of Attachment better to use "file"
{
if (Attachment!= null)
{
Database1Entities db = new Database1Entities();
string ImageName = System.IO.Path.GetFileName(Attachment.FileName);
string physicalPath =Server.MapPath("~/images/"+ ImageName);
// save image in folder
Attachment.SaveAs(physicalPath);
//save new record in database
tblA newRecord = new tblA();
newRecord.empid= fc.empid;
newRecord.subject= fc.subject;
//....Add all field which need to save in db
newRecord.Attachment= ImageName;
db.tblA.Add(newRecord);
db.SaveChanges();
}
return View();
}

How to get Filtered from json per Item in Cart Razor MVC

I want to get filtered items size related to the product
this is Method json that returns by Id
public ActionResult getProductSize(int prodID)
{
YAT.CMS.Shared.DAL.JAGUAREntities dbContext = new YAT.CMS.Shared.DAL.JAGUAREntities();
var getsize = (from a in dbContext.ProductSizes
where a.ProductID == prodID
select a.Description).ToList();
//var json_string = "{ Size: \"\" }";
return Json(getsize, JsonRequestBehavior.AllowGet);
}
and this is my View the section that hold category cart Description
#for (int i = 0; i < Model.Count; i++)
{
<tr class="odd">
<td class="imageCnt">
<a href="#Url.Action("ProductDetails", "Product", new { ID = #Model[i].Id })">
<img class="bp-image" alt="#Model[i].EN_Name" src="#Url.Content("~/Admin/Admin_Cataloge/Product/" + #Model[i].Photo)" />
</a>
<input type="hidden" name="[#i].ProductID" value="#Model[i].Id" />
</td>
<td class="titleCnt">
#Model[i].EN_Name
</td>
<td class="priceCnt">#Model[i].Price<span class="currency"> </span>
<input id="#("Price" + i.ToString())" value="#Model[i].Price" type="hidden" />
</td>
<td class="quantityCnt">
<span class="basketQuantityCnt">
<input data-val="true" data-val-number="The field Quantity must be a number." data-val-required="The Quantity field is required." id="#("Quantity" + i)" name="[#i].Quantity" onkeypress="return restrictCharacters(this, event);" type="text" value="1"/>
<a class="deleteBtn" href="#" onclick="deleteBasketString(this,#Model[i].Id);"></a>
<a class="updateBtn" href="#" onclick="Calculate()"></a>
<a class="bq-plus" onclick="IncreaseQuantity(this);Calculate();"></a>
<a class="bq-minus" onclick="DecreaseQuantity(this);Calculate();"></a>
</span>
</td>
<td class="prodsize">
<select id="selectNumber">
<option>Choose a number</option>
//Here where i want to add Filtered Size for item
</select>
</td>
<td class="subTotalCnt" id="#("total" + i)">#Model[i].Price<span class="currency"> </span>
</td>
</tr>
total += Model[i].Price;
}
how to do this in the Commented in view where I want to do this?

Executing the same partial view multiple times in the same view

I am new to MVC and would like some help.
I have a view (below) which displays the products, next to each other. Till here everything is fine.
#foreach (var item in Model)
{
<a href="#Url.Action("showProductDetails", "Shared", new { ProductID = item.ProductID }, null)">
<div class='OutsideDiv' >
<table class='DivBorder'>
<tr >
<td class='title'>
#item.ProductName
</td>
</tr>
<tr >
<td class='imageBox'>
<img alt='' src="#item.ImageURL" />
</td>
</tr>
<tr>
<td class='title'>
#Html.Action("showAverageRating", "Rating" , new { ProductID = item.ProductID } ) *************
</td>
</tr>
<tr>
<td class='desc'>
#item.Description
</td>
</tr>
<tr>
<td class='price'>
€ #item.Price
</td>
</tr>
</table>
</div>
<script type='text/javascript'> $('.DivBorder').mouseover(function () { $(this).css('border-color', '#0953cb'); $(this).css('background-color', '#eaeaea'); }); $('.DivBorder').mouseout(function () { $(this).css('border-color', '#bdbdbd'); $(this).css('background-color', '#f6f6f6'); });</script>
</a>
}
In the line marked with '****' above I am calling another view (showAverageRating) which for now is just displaying 5 rating stars with the first 3 starts selected.
<input class="star " name="adv1" type="radio" />
<input class="star " name="adv1" type="radio" />
<input checked="checked" class="star " name="adv1" type="radio" />
<input class="star " name="adv1" type="radio" />
<input class="star " name="adv1" type="radio" />
The problem is that on the second item, when the rating stars view (above partial view) is called again, the stars are displayed next to the stars of the first product, picture below.
I think I have to use something else rather than Html.Action?
EDIT : showAverageRating Code
public ActionResult showAverageRating(int ProductID)
{
decimal averageRating = new RatingsService.RatingsClient().getAverageRating(ProductID);
ViewData["averageRating"] = averageRating;
return PartialView();
}
The problem was that the name of the stars where identical, so I included the productID with their name, like below.
showAverageRating partial view
#{decimal averageRating = ViewBag.averageRating;}
#{int productID = ViewBag.productID;}
<div id="averageRating" >
<input class="star" name="star+#productID" type="radio" />
<input class="star " name="star+#productID" type="radio" />
<input checked="checked" class="star " name="star+#productID" type="radio" />
<input class="star " name="star+#productID" type="radio" />
<input class="star " name="star+#productID" type="radio" />
</div>

Jquery addRow and autocomplete

I have a table I would like to use autocomplete on a column.
(medSearch is the class set for this column)
I use the Jquery's autocomplete code
autocomp_opt={
source: function(request,response){
var myTable = [];
var searchStr = $(".medSearch").val();
if (searchStr.length>2)
{
alert(searchStr);
var soapEnv = "... searchStr.....";
$.ajax(
{
.............
Then I use Cloud Gen's addRow javascript.
$(document).ready(function(){
$(".addRow").btnAddRow(function(row){row.find(".medSearch").autocomplete(autocomp_opt)});
$(".delRow").btnDelRow();
$(".medSearch").autocomplete(autocomp_opt); //end autocomplete
}); //end document. ready
However, the autocomplete does not work properly with newly added row's column.
The user's input in this new row's column is not taken for the autocomplete query.
It always takes the first row's column content as the input.
I think it's because the jQuery always takes the first item which has class '.medSearch'. Then it does not take the current row's user input.
I don't know how to fix it.
Thank you for your help in advance!
My further question:
Actually, this my further question (it is too long for a comment)
I have two more columns with class identifier medCode and medDin, they need to be populated by the autocomplete result:
success: function(xml){
//alert($(xml).text());
//traverse the xml
var xmlItem = $(xml).find("*").eq(0);
//alert($(xmlItem)[0].nodeName);
var xmlMedItemArr = $(xmlItem).children().children().children();
//alert("Phyiscian Items: "+$(xmlPhyItemArr).length);
// go through each of them
$(xmlMedItemArr).each(function()
{
//do what? get each text
var childList = $(this).children();
myTable.push({
label: $(childList[0]).text() + " - " + $(childList[2]).text(),
value: $(childList[0]).text(),
din: $(childList[2]).text(),
code: $(childList[1]).text()
});
});
select: function(event,ui) {
$(".medCode").val(ui.item.code);
$(".medDin").val(ui.item.din);
},
But as the previous problem, after I select an item from the list of autocomplete result, then the two columns of all rows will be set to the same value.
How can this be done correctly?
Thank you very much for your help!
Here is the html for the table part. (we use ebase xi as the platform. It is a drag and drop web development tool. It will generate the html and some of the script automatically. You will see in the html code)
<!----><div class="CTID-1182-_ eb-1182-panel ">
<!---->Current Medications</div>
<!----><table class="CTID-1156-_ eb-1156-tableControl " summary="">
<tr>
<td>
<table class="eb-1156-tableNavRow " style="margin-top:5px;margin-bottom:5px;" summary="" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="99%">
<span class="eb-1156-tableNavRowInfo " style="padding-left:10px;">Displaying 1...1 of 1 records</span></td>
<td width="1%" align="right">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="eb-1156-tableContent " summary="" title="">
<colgroup>
<col style="width:20%;"><col style="width:4%;"><col style="width:4%;"><col style="width:7%;"><col style="width:7%;"><col style="width:7%;"><col style="width:7%;"><col style="width:11%;"><col style="width:11%;"></colgroup>
<tr>
<th id="CTID-1156-_-C-1164" class="eb-1156-tableColumnHeader eb-1164-tableColumnHeader ">
Medicine Name</th>
<th id="CTID-1156-_-C-1168" class="eb-1156-tableColumnHeader eb-1168-tableColumnHeader ">
Med code</th>
<th id="CTID-1156-_-C-1170" class="eb-1156-tableColumnHeader eb-1170-tableColumnHeader ">
Med drug identification number</th>
<th id="CTID-1156-_-C-1175" class="eb-1156-tableColumnHeader eb-1175-tableColumnHeader ">
Dosage</th>
<th id="CTID-1156-_-C-1177" class="eb-1156-tableColumnHeader eb-1177-tableColumnHeader ">
Unit</th>
<th id="CTID-1156-_-C-1179" class="eb-1156-tableColumnHeader eb-1179-tableColumnHeader ">
Frequency</th>
<th id="CTID-1156-_-C-1181" class="eb-1156-tableColumnHeader eb-1181-tableColumnHeader ">
Unit</th>
<th id="CTID-1156-_-C-1200" class="eb-1156-tableColumnHeader eb-1200-tableColumnHeader ">
</th>
<th id="CTID-1156-_-C-1196" class="eb-1156-tableColumnHeader eb-1196-tableColumnHeader ">
</th>
</tr>
<tr class="CTID-1156-_-R-0 eb-1156-tableRow eb-1156-tableRow ">
<td class="eb-1156-tableContentCell eb-1164-tableColumn " headers="CTID-1156-_-C-1164"><div class="eb-1164-Editor " style="display:inline-block;zoom:1;*display:inline;">
<input id="CTID-1164-_-C-0" class="CTID-1164-_-C-0 eb-1156-tableContentData eb-1164-EditorInput medSearch" type="text" name="CTRL:1164:_:C:0" size="50" maxlength="128" title="Medicine Name"></div>
</td>
<td class="eb-1156-tableContentCell eb-1168-tableColumn " headers="CTID-1156-_-C-1168"><div class="eb-1168-Editor " style="display:inline-block;zoom:1;*display:inline;">
<input id="CTID-1168-_-C-0" class="CTID-1168-_-C-0 eb-1156-tableContentData eb-1168-EditorInput medCode" type="text" name="CTRL:1168:_:C:0" size="5" maxlength="32" title="Med code"></div>
</td>
<td class="eb-1156-tableContentCell eb-1170-tableColumn " headers="CTID-1156-_-C-1170"><div class="eb-1170-Editor " style="display:inline-block;zoom:1;*display:inline;">
<input id="CTID-1170-_-C-0" class="CTID-1170-_-C-0 eb-1156-tableContentData eb-1170-EditorInput medDin" type="text" name="CTRL:1170:_:C:0" size="5" maxlength="64" title="Med drug identification number"></div>
</td>
<td class="eb-1156-tableContentCell eb-1175-tableColumn " headers="CTID-1156-_-C-1175"><div class="eb-1175-Editor " style="display:inline-block;zoom:1;*display:inline;">
<input id="CTID-1175-_-C-0" class="CTID-1175-_-C-0 eb-1156-tableContentData eb-1175-EditorInput " type="text" name="CTRL:1175:_:C:0" size="5" maxlength="10" title="Dosage"></div>
</td>
<td class="eb-1156-tableContentCell eb-1177-tableColumn " headers="CTID-1156-_-C-1177"><div class="eb-1177-Editor " style="display:inline-block;zoom:1;*display:inline;">
<select id="CTID-1177-_-C-0" class="CTID-1177-_-C-0 eb-1156-tableContentData eb-1177-EditorInput " name="CTRL:1177:_:C:0" title="Unit"><option selected="selected" value="">Please select</option><option value="109">mg</option><option value="110">ml</option></select></div>
</td>
<td class="eb-1156-tableContentCell eb-1179-tableColumn " headers="CTID-1156-_-C-1179"><div class="eb-1179-Editor " style="display:inline-block;zoom:1;*display:inline;">
<input id="CTID-1179-_-C-0" class="CTID-1179-_-C-0 eb-1156-tableContentData eb-1179-EditorInput " type="text" name="CTRL:1179:_:C:0" size="5" maxlength="64" title="Frequency"></div>
</td>
<td class="eb-1156-tableContentCell eb-1181-tableColumn " headers="CTID-1156-_-C-1181"><div class="eb-1181-Editor " style="display:inline-block;zoom:1;*display:inline;">
<select id="CTID-1181-_-C-0" class="CTID-1181-_-C-0 eb-1156-tableContentData eb-1181-EditorInput " name="CTRL:1181:_:C:0" title="Unit"><option selected="selected" value="">Please select</option><option value="112">per day</option><option value="113">per 4 hours</option></select></div>
</td>
<td class="eb-1156-tableContentCell eb-1200-tableColumn " headers="CTID-1156-_-C-1200"><input class="CTID-1200-_-C-0 eb-1200-Button addRow" type="submit" name="CTRL:1200:_:D:0" value="Add" title=""></td>
<td class="eb-1156-tableContentCell eb-1196-tableColumn " headers="CTID-1156-_-C-1196"><img class="eb-1196-Image delRow" src="shared/uohi/images/delete_icon.gif" alt="" title="">
</td>
</tr>
</table>
</td>
</tr>
</table>
Use:
var searchStr = request.term;
instead of what you currently have.
The existing code:
var searchStr = $(".medSearch").val();
Reads the value of the first element that meets the selector .medSearch
Thank you for all your help.
I have the correct value now by using the following code:
$(this).closest('tr').find(".medCode").val(ui.item.code);
$(this).closest('tr').find(".medDin").val(ui.item.din);
Thanks,
Xiaoli

Resources