I'm fairly new to html development and don't know how to tackle this problem. I need to create a table with some editable cells. Then I need to update a specific row in a database table based in the row edited. I've created some working solution that I'm almost sure don't use a correct approach to the problem, so I need to know how can I can I make this fine.
Note the repeated form. I would like to have only one form and one submit button to update only those edited rows.
#using Oracle.DataAccess.Client;
#using Oracle.DataAccess.Types;
#{
string some_conn = "SomeConnectionString";
OracleConnection conn = new OracleConnection(some_conn);
var comm = new OracleCommand("select * from some_table",conn);
conn.Open();
if(IsPost){
var some_id = Request.Form["some_id"];
var some_value = Request["some_value"];
var update_comm = new OracleCommand("update some_table"+
" set some_value ='"+some_value+"'" +
" where some_id ='" + some_id + "'", conn ) ;
update_comm.ExecuteNonQuery();
}
var dr = comm.ExecuteReader();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
#while(dr.Read()){
<tr>
#for(int i= 0; i < 7 ; i++){
if(i != 5){
<td> #(Convert.ToString(dr.GetValue(i)))</td>
}
}
<form method="post" action="">
<td> <input type="text" name="some_id" contenteditable="false" value="#(Convert.ToString(dr.GetValue(5)))"></td>
<td><textarea name="some_value" cols="10" rows="10">#(Convert.ToString(dr.GetValue(7)))</textarea></td>
<td> <input type="submit" value="update"></td>
</form>
</tr>
}
</table>
</body>
</html>
#{
conn.Close();
conn.Dispose();
}
Related
I have this selectAllToggle function, which reactively selects or deselects all elements in the array. Reactively in that when the selectButton is used, all the checkboxes in the browser show selected or deselected.
The problem arise when one or more (but not all) checkboxes were manually selected. If any checkboxes are selected, the selectButtonName changes to "Deselect All", and when pressed, I want it to deselect all.
The code I have correctly updates the array, in that it sets the 'selected' property to false for every student in the array, but the reactivity of it doesn't work - the tick boxes of the students that were selected manually, remain ticked in the browser.
selectAllToggle: function(key, row, $event) {
var setTo = false;
var newname = "Select All";
if (this.selectButtonName === "Select All") {
setTo = true;
newname = "Deselect All";
}
if (this.selectButtonName === "Deselect All") {
setTo = false;
newname = "Select All";
}
if (this.students.length > 0) {
for (var i = 0; i < this.students.length; i++) {
this.students[i]['selected'] = setTo;
}
}
this.selectButtonName = newname;
console.log(this.students); //shows the correct 'selected' state for all
},
The view looks like this (using vue-tables-2)
<v-client-table
v-if="gridReady"
v-model.sync="students"
:columns="gridcolumns"
:options="gridoptions"
ref="grid">
<input type="checkbox"
slot="selected"
slot-scope="{row, update}"
v-model="row.selected"
#change="selectStudent('select', row, $event)">
</v-client-table>
What can I do to make this function reactive?
For deselecting after one or more element selection, you may use a computed property as the snippet below for reactively perform.
new Vue({
el: '#app',
data: {
selected: [],
clientList: [1, 2, 3, 4, 5]
},
computed: {
selectAll: {
get: function() {
return this.selected.length > 0 &&
this.selected.length <= this.clientList.length
},
set: function(value) {
let list = [];
if (value) {
this.selected = this.clientList
} else {
this.selected = []
}
}
}
},
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
<div id='app'>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Client Name</th>
<th style="width: 10%"><input type="checkbox" v-model="selectAll" /></th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in clientList">
<td style="font-weight: bold;width: 75%">{{item}}
</td>
<td style="width: 25%">
<input type="checkbox" :value="item" v-model="selected" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I am using Aspnet mvc and .NET rotativa to convert html to pdf.
I am using CustomSwitches to display paging in PDF footer as the example [here
#{ Layout = null;}
<!DOCTYPE html>
<html>
<head>
<script>
function subst() {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) { var z = x[i].split('=', 2); vars[z[0]] = unescape(z[1]); }
var x = ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection'];
for (var i in x) {
var y = document.getElementsByClassName(x[i]);
for (var j = 0; j < y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script>
</head>
<body style="border:0; margin: 0;" onload=" subst()">
<table style=" width: 100%">
<tr>
<td class="section"></td>
<td style="text-align:right">
<span class="page"></span> / <span class="topage"></span>
</td>
</tr>
</table>
</body>
</html>
but when generating the report in PDF, does not appear the page of the last page, someone has gone through it and found a solution?
I managed to solve my problem by adding the following code:
CustomSwitches = "--footer-right \"[page]/[topage]\""
Something like this for a full example:
return new ViewAsPdf("MyAction", Model) {
FileName = "somepdf.pdf",
WkhtmlPath = "~/Rotativa"
,CustomSwitches = "--footer-right \"[page]/[topage]\""
};
I am looking for a way to add autocomplete data from my code to an "invoice" page automatically. I want the user to be able to also click to add or remove each item(quickbooks style, with multiple form fields available, and adding dynamically) and in the long run, be able to drag elements to a certain position in the invoice. All I am looking for now is this :
good : pseudocode on how to do this
best : basic working code to take off with.
This is what I have so far :
Page that calls the data :
<?php
require 'database.php';
require 'results.php';
if(!empty($_GET['wid'])) { $wid = $_GET['wid']; }
elseif(!empty($_POST['wid'])) { $wid = $_POST['wid']; }
else { $wid = null; }
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/engine.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="span10 offset1">
<div class="row">
<h3>Add Item to Workorder</h3>
</div>
<form class="form-horizontal" action="additems.php" method="post">
<?php
// Add Custom Call for values from prior page ?>
<input type="hidden" name="wid" value="<?php echo htmlentities($wid); ?>">
<?php
//not required, but for get link purposes
if(isset($_POST['search']) && $_POST['search']!=''){
$search = $_POST['search'];
} elseif (isset($_GET['search']) && $_GET['search']!=''){
$search = $_GET['search'];
} else {
$search='';
}
//
echo"
<input type='text' class='search_input' name='search' id='search' placeholder='search' value='$search' autofocus>
<div id='search_output' class='search_output'>";
?>
Page that retrieves results :
<?php
require_once"database.php";//connection to database
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if(isset($_POST['search']) && $_POST['search']){
$search=$_POST['search'];
} elseif(isset($_GET['search']) && $_GET['search']){
$search=$_GET['search'];
}
if(isset($search)){
$search = '%' . strtr($search, ['%' => '\%', '_' => '\_']);
$search = str_replace(" ", "%", $search);
$search= "%$search%";
$sql="select * from products where `model` LIKE ? OR `category` LIKE ? OR `description` LIKE ? OR `subcategory` LIKE ? LIMIT 50;";
$statement = $pdo->prepare($sql);
$statement->execute([$search, $search, $search, $search]);
//configure for your custom data dump to autocomplete
echo "
<table class='table table-striped table-bordered' width='100%'>
<thead>
<tr>
<th>Model</th>
<th>Category</th>
<th>Description</th>
</tr>
</thead>
<tbody>
";
while($row = $statement->fetch()){
$item=$row['model'];
$title=$row['category'];
$description=$row['description'];
echo "
<tr>
<td>
<a href='?item=$item'>
$item
</td><td>
$title
</td><td>
$description
</a>
</td>
</tr>
";
}
//
}
This code contains Javascript and AJAX code which is for making dynamic search from the input and displaying the sql results in the 'search_output'.
<input type='text' class='search_input' onkeyup="performSearch(this.value);" id='search' placeholder='search' value='$search' autofocus>
<div id='search_output' class='search_output'>";
<script>
function performSearch(data) {
if (data.length > 0) {
var xmlhttp = new XMLHttpRequest() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("search_output").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "YOURPHPFILENAME.php?search=" + data, true);
xmlhttp.send();
}
}
</script>
Unfortunately for other Dynamic features you will need to learn JQUERY/AJAX and understand HTML DOM. There may be Third party API which may do this.
I'm having some trouble using TinyMCE with ASP.NET Web Pages Razor 2. I'm trying to use TinyMCE with updating articles with SQL, however, it gives me this error:
"There was found a potentially dangerous Request.Form value for the client (Content="<p>Lorem ipsum dolor...")."
Linje 22: var update = "UPDATE [Tutorials] SET Heading=#0, Content=#1, Type=#2 WHERE ID=#3";
Linje 23: Heading = Request["Heading"];
Linje 24: Content = Request["Content"];
Linje 25: Type = Request["Type"];
Linje 26: db.Execute(update, Heading, Content, Type, TutorialId);
#{
Validation.RequireField("Heading", "Heading is required.");
Validation.RequireField("Content", "Content is required.");
Validation.RequireField("Type", "Type is required.");
var Heading = "";
var Content = "";
var Type = "";
var TutorialId = UrlData[0];
if (TutorialId.IsEmpty()) {
Response.Redirect("~/Members/Tutorials/List");
}
var db = Database.Open("MikZeRCoding2");
string htmlEncoded = WebUtility.HtmlEncode(Content);
if (IsPost && Validation.IsValid()) {
var update = "UPDATE [Tutorials] SET Heading=#0, Content=#1, Type=#2 WHERE ID=#3";
Heading = Request["Heading"];
Content = Request["Content"];
Type = Request["Type"];
db.Execute(update, Heading, Content, Type, TutorialId);
Response.Redirect("~/Members/Tutorials/List");
}
else {
var select = "SELECT * FROM [Tutorials] WHERE ID=#0";
var row = db.QuerySingle(select, TutorialId);
Heading = row.Heading;
Content = row.Content;
Type = row.Type;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Edit Tutorial - Admin Area</title>
</head>
<body>
<script type="text/javascript">
tinymce.init({selector:'textarea'});
</script>
<form method="post" action="">
<div class="content-container">
<ul>
<li>
<h3>Title</h3>
<input type="text" name="Heading" value="#Heading" />
</li>
<li>
<h3>Content</h3>
<textarea name="Content" id="content-editor">#Content</textarea>
</li>
<li>
<h3>Type</h3>
<input type="text" name="Type" value="#Type" />
</li>
<li>
<input type="submit" value="Update" />
#Html.ValidationSummary()
</li>
</ul>
</div>
</form>
</body>
</html>
You need to use Request.Unvalidated if you want to permit HTML to be posted:
Content = Request.Unvalidated("Content");
See more about request validation in ASP.NET Web Pages here: http://www.mikesdotnetting.com/Article/222/Request-Validation-In-ASP.NET-Web-Pages
I have populated a table with info from my database, but I need another column where I can delete an entry out of the table and out of the database.
I've started to create a delete statement, but I don't know what I need to delete just a single entry.
Here's my code so far:
#{
var db = Database.Open("StayInFlorida");
var sPropertyId = Request.QueryString["PropertyID"];
var roominfo = "SELECT * FROM RoomInfo WHERE PropertyID=#0";
var qroominfo = db.Query(roominfo, sPropertyId);
var droominfo = "DELETE ??? FROM RoomInfo"
if (IsPost){
var deletesingleroom = db.Query(droominfo, sPropertyId);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="~/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="tab2" class="tab-pane">
<h4>Room Information</h4>
<table class="table table-bordered">
<thead>
<tr>
<th>Room Title</th>
<th>Room Type</th>
<th>Room Description</th>
<th>Delete Room</th>
</tr>
</thead>
<tbody>
#foreach (var row in qroominfo)
{
<tr>
<td>#row.RoomTitle</td>
<td>#row.RoomType</td>
<td>#row.RoomDescription</td>
<td>
<form method="post">
<button type="submit" class="btn btn-success">Delete</button
</form>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
I think you have a problem with the delete statement in SQL in general, not particulary in Razor context.
The syntax for a delete statement is
DELETE FROM RoomInfo WHERE <some condition>
If you simply send this query :
DELETE FROM RoomInfo
This will delete all your rows.
So for deleting only one row from your POST result, it is kind of the same as the select :
DELETE FROM RoomInfo WHERE PropertyID=#0
Edit :
Now that you have a unique identifier that identifie the room you want to delete, you can update your code :
First, link the Id of your room to your delete button :
<form method="post">
<input type="text" name="id-room" value="#row.RoomID">
<button type="submit" class="btn btn-success">Delete</button
</form>
And when you submit the delete form, retrieve the room Id to delete :
var sRoomId = Request.QueryString["id-room"];
var droominfo = "DELETE FROM RoomInfo WHERE RoomId = " + sRoomId
Note that this code is terrible and will have a lot of security holes.
You are not supposed to access the database in a razor file for example. You are working like if you were in old fashioned PHP.
Try to inform yourself about ASP.NET MVC.