It may be the easiest question but I am not able to resolve this. The validation on my page is not working. Everytime I am submitting the page leaving all the input fields blank, an alert is generated saying 'Failed'. And if I enter all the fields with some value data is successfully submitted.
Here is my HTML :
#{
ViewBag.Title = "Exercise10";
}
<html>
<head>
<script src="../../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.2.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script src="../../Scripts/json2.js" type="text/javascript"></script>
<link href="../../Content/ExerciseStyle.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/Popup.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery- ui.css" />
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="../../Scripts/DatePicker.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.validation.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-validator.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-validator-extensions.js" type="text/javascript"></script>
<link href="../../Scripts/extensions.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="" method="post">
<div id="MainArea">
<table id="tbllist" align="center" style="margin-left: 15px; width: 96%; margin- right: 15px;">
<tr>
<th colspan="3" align="left">
<div id="title_p">
Enter Following Entries</div>
</th>
</tr>
<tr>
<td align="right" style="width: 40%;">
<b>Name :</b>
</td>
<td align="left" style="width: 17%;">
<input data-bind="value: EmployeeName" placeholder="Employee Name" class="txt"
type="text" />
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<b>Emp# :</b>
</td>
<td align="left">
<input data-bind="value: EmployeeCode" placeholder="Employee Code" style="width: 200px;"
type="text" />
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<b>Date of Birth :</b>
</td>
<td align="left">
<input data-bind="value: Dob" id="datepicker" placeholder="Date of Birth" style="width: 200px;"
type="text" /><span>(dd/mm/yyyy)</span>
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<b>Age (18-60):</b>
</td>
<td align="left">
<input data-bind="value: Age" style="width: 200px;" placeholder="Age Range (18-60)"
type="number" min="18" max="60" />
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<b>Contact Number :</b>
</td>
<td align="left">
<input data-bind="value: ContactNumber" placeholder="Contact Number" style="width: 200px;"
type="text" />
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<b>Email :</b>
</td>
<td align="left">
<input data-bind="value: EmailID" placeholder="Email ID" style="width: 200px;"
type="email" />
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<b>Address :</b>
</td>
<td align="left">
<input data-bind="value: Address" placeholder="Address" style="width: 200px;"
type="text" />
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<b>City :</b>
</td>
<td align="left">
<select data-bind="value: City" style="width: 200px;">
<option value="Noida">New Delhi</option>
<option value="Noida">Noida</option>
<option value="Noida">Mumbai</option>
</select>
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<b>Marital Status :</b>
</td>
<td align="left">
<input data-bind="checked: MaritalStatus" checked="checked" name="rdb" type="radio" /><span>UnMarried</span>
<input data-bind="checked: MaritalStatus" checked="checked" name="rdb" type="radio" checked="checked" /><span>Married</span>
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<b>Any Employee Reference :</b>
</td>
<td align="left">
<input data-bind="checked: Is_Reference" type="checkbox" />yes
</td>
<td align="left">
</td>
</tr>
</table>
<table style="width: 99%; margin-right: 20px; padding: 5px;">
<tr align="right">
<td>
<button data-bind="click :$root.save" class="button">Save</button>
<input type="button" id="btnCancel" class="button" value="Cancel" onclick="JavaScript:closePopup();" />
</td>
</tr>
</table>
</div>
</form>
And My View Model (continued from the above):
<script type="text/javascript">
//....................................................//
var EmpViewModel = function () {
//Make the self as 'this' reference
var self = this;
//Declare observable which will be bind with UI
self.EmployeeCode = ko.observable("").extend({ required: true });
self.EmployeeName = ko.observable("").extend({ required: { message: 'Please supply your Name.'} });
self.Dob = ko.observable("");
self.Age = ko.observable("").extend({number :true});
self.ContactNumber = ko.observable("");
self.EmailID = ko.observable("");
self.Address = ko.observable("");
self.MaritalStatus = ko.observable("");
self.City = ko.observable("");
self.Is_Reference = ko.observable("");
//The Object which stored data entered in the observables
var EmpData = {
EmpCode: self.EmployeeCode,
EmpName: self.EmployeeName,
Dob: self.Dob,
Age: self.Age,
ContactNumber: self.ContactNumber,
MaritalStatus: self.MaritalStatus,
EmailID: self.EmailID,
Address: self.Address,
City: self.City,
Is_Reference: self.Is_Reference
};
//Declare an ObservableArray for Storing the JSON Response
self.Employees = ko.observableArray([]);
//Function to perform POST (insert Employee) operation
self.save = function () {
//Ajax call to Insert the Employee
$.ajax({
type: "POST",
url: "/Exercise/Save/",
data: ko.toJSON(this), //Convert the Observable Data into JSON
contentType: "application/json",
success: function (data) {
alert(data);
},
error: function () {
alert("Failed");
}
});
//Ends Here
};
}
ko.applyBindings(new EmpViewModel());
</script>
Knockout-validation shows validation messages only if the fields are modified. Therefore you should check on submit if all fields are valid and show all errors if not.
self.errors = ko.validation.group(this, { deep: true, observable: false });
//Function to perform POST (insert Employee) operation
self.save = function () {
// check if valid
if(self.errors().length > 0) {
self.errors.showAllMessages();
return;
}
//Ajax call to Insert the Employee
$.ajax({
type: "POST",
url: "/Exercise/Save/",
data: ko.toJSON(this), //Convert the Observable Data into JSON
contentType: "application/json",
success: function (data) {
alert(data);
},
error: function () {
alert("Failed");
}
});
//Ends Here
};
I have created a fiddle to show that: http://jsfiddle.net/delixfe/tSzYf/2/
Related
Html code
<label class="control-label">Contact Person</label>
<input class="form-control" type="text" placeholder="Enter Contact name" data-bind="value: ContactPerson" data-validate='{"required":"true"}'><br />
<label class="control-label">ContactNo</label>
<input class="form-control" type="tel" data-bind="value: ContactNo" placeholder="ContactNo" data-validate='{"required":"true"}'><br />
<label class="control-label">E-Mail</label>
<input class="form-control" type="email" data-bind="value: Email" placeholder="Email" data-validate='{"required":"true","email":"true"}'><br />
<table class="table table-hover table-bordered" id="listTable">
<thead>
<tr>
<th>ContactPerson</th>
<th>ContactNo</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody data-bind="template:{name: 'Process-list',
foreach: rootViewModel.BodyContent.ProcessList }">
</tbody>
</table>
when I click on add button the data in the three text box should bind to grid ,
and when i click on delete button of row in grid it should disappear for this i need viewmodel.
Thanks
Here's a quick view model that does the requirements. I selected ContactNo as the primary key since they're supposed to be unique. You can use ids if needed instead. It would also be a good idea to run your validations before add method is called.
var viewModel = function(){
var self = this;
self.ContactPerson = ko.observable();
self.ContactNo = ko.observable();
self.Email = ko.observable();
self.ProcessList = ko.observableArray();
self.add = function(){
self.ProcessList.push({
ContactPerson: self.ContactPerson(),
ContactNo: self.ContactNo(),
Email: self.Email(),
});
self.ContactPerson('');
self.ContactNo('');
self.Email('');
};
self.delete = function(data, event){
self.ProcessList.remove(function(listObject){
return listObject.ContactNo === data.ContactNo;
});
};
};
ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label class="control-label">Contact Person</label>
<input class="form-control" type="text" placeholder="Enter Contact name" data-bind="value: ContactPerson" data-validate='{"required":"true"}'><br />
<label class="control-label">ContactNo</label>
<input class="form-control" type="tel" data-bind="value: ContactNo" placeholder="ContactNo" data-validate='{"required":"true"}'><br />
<label class="control-label">E-Mail</label>
<input class="form-control" type="email" data-bind="value: Email" placeholder="Email" data-validate='{"required":"true","email":"true"}'><br />
<button data-bind="click: add">Add Data</button>
<table class="table table-hover table-bordered" id="listTable">
<thead>
<tr>
<th>ContactPerson</th>
<th>ContactNo</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody data-bind="template:{name: 'Process-list',
foreach: ProcessList }">
</tbody>
</tbody>
</table>
<script type="text/html" id="Process-list">
<tr>
<td data-bind="text: ContactPerson"></td>
<td data-bind="text: ContactNo"></td>
<td data-bind="text: Email"></td>
<td><button data-bind="click: $root.delete">Delete</button></td>
</tr>
</script>
I am trying to integrate ccavenue payment gateway in my rails app..But I cant find any proper documentation. All they provide is 4 files for the integration. I cant figure out how to fit all these together.
1) ccavRequestHandler.html.erb
<html>
<head>
<title> Iframe</title>
</head>
<body>
<center>
<%
merchantData=""
working_key="" #Put in the 32 Bit Working Key provided by CCAVENUES.
access_code="" #Put in the Access Code in quotes provided by CCAVENUES.
params.each do |key,value|
merchantData += key+"="+value+"&"
end
crypto = Crypto.new
encrypted_data = crypto.encrypt(merchantData,working_key)
%>
<iframe width="482" height="500" scrolling="No" frameborder="0" id="paymentFrame" src="https://test.ccavenue.com/transaction/transaction.do?command=initiateTransaction&encRequest=<%=encrypted_data %>&access_code=<%=access_code %>"></iframe>
</center>
<script type="text/javascript" src="assets/javascripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('iframe#paymentFrame').load(function() {
window.addEventListener('message', function(e) {
$("#paymentFrame").css("height",e.data['newHeight']+'px');
}, false);
});
});
</script>
</body>
</html>
2) ccavResponseHandler.html.erb
<html>
<head>
<title>Response Handler</title>
<%= csrf_meta_tags%>
</head>
<body>
<%
workingKey=""#Put in the 32 Bit Working Key provided by CCAVENUES.
encResponse=params[:encResp]
crypto = Crypto.new
decResp=crypto.decrypt(encResponse,workingKey);
decResp = decResp.split("&")
%>
<center>
<font size="4" color="blue"><b>Response Page</b></font>
<table border="1">
<tr>
<td><b>Parameter Name</b></td>
<td><b>Parameter Value</b></td>
<%decResp.each do |key|%>
<tr>
<td><%=key.from(0).to(key.index("=")-1)%> </td>
<td><%=key.from(key.index("=")+1).to(-1)%> </td>
</tr>
<%end%>
</table>
</center>
</body>
</html>
3) crypto.rb
#*****************************************************************
# * COMPANY - AVENUES INDIA PVT Ltd.,
#*****************************************************************
#Name of the Program : AES Encryption/Decryption
#Created by : AVENUES INDIA PVT Ltd., TC-Team
#Created On : 16-02-2014
#Version : Version 1.0
#Contribution : eLitmus Evaluation Pvt Ltd
#*****************************************************************
class Crypto < ActiveRecord::Base
INIT_VECTOR = (0..15).to_a.pack("C*")
def encrypt(plain_text, key)
secret_key = [Digest::MD5.hexdigest(key)].pack("H*")
cipher = OpenSSL::Cipher::Cipher.new('aes-128-cbc')
cipher.encrypt
cipher.key = secret_key
cipher.iv = INIT_VECTOR
encrypted_text = cipher.update(plain_text) + cipher.final
return (encrypted_text.unpack("H*")).first
end
def decrypt(cipher_text,key)
secret_key = [Digest::MD5.hexdigest(key)].pack("H*")
encrypted_text = [cipher_text].pack("H*")
decipher = OpenSSL::Cipher::Cipher.new('aes-128-cbc')
decipher.decrypt
decipher.key = secret_key
decipher.iv = INIT_VECTOR
decrypted_text = (decipher.update(encrypted_text) + decipher.final).gsub(/\0+$/, '')
return decrypted_text
end
end
4) dataForm.html.erb
<html>
<head>
</head>
<body>
<form method="POST" name="customerData" action="/transaction/ccavRequestHandler">
<table width="40%" height="1" border='1' align="center"><caption><font size="4" color="blue"><b>Integration Kit</b></font></caption></table>
<table width="40%" height="100" border='1' align="center">
<tr>
<td>Parameter Name:</td><td>Parameter Value:</td>
</tr>
<tr>
<td colspan="2"> Compulsory information</td>
</tr>
<tr>
<td>Merchant Id :</td><td><input type="text" name="merchant_id" value="2954"/></td>
</tr>
<tr>
<td>Order Id :</td><td><input type="text" name="order_id" value="123654789"/></td>
</tr>
<tr>
<td>Amount :</td><td><input type="text" name="amount" value="1.00"/></td>
</tr>
<tr>
<td>Currency :</td><td><input type="text" name="currency" value="INR"/></td>
</tr>
<tr>
<td>Redirect URL :</td><td><input type="text" name="redirect_url" value="http://merchantdomain/transaction/ccavResponseHandler"/></td>
</tr>
<tr>
<td>Cancel URL :</td><td><input type="text" name="cancel_url" value="http://merchantdomain/transaction/ccavResponseHandler"/></td>
</tr>
<tr>
<td>Language :</td><td><input type="text" name="language" value="EN"/></td>
</tr>
<tr>
<td colspan="2">Billing information(optional):</td>
</tr>
<tr>
<td>Billing Name :</td><td><input type="text" name="billing_name" value="Charli"/></td>
</tr>
<tr>
<td>Billing Address :</td><td><input type="text" name="billing_address" value="Room no 1101, near Railway station Ambad"/></td>
</tr>
<tr>
<td>Billing City :</td><td><input type="text" name="billing_city" value="Indore"/></td>
</tr>
<tr>
<td>Billing State :</td><td><input type="text" name="billing_state" value="MP"/></td>
</tr>
<tr>
<td>Billing Zip :</td><td><input type="text" name="billing_zip" value="425001"/></td>
</tr>
<tr>
<td>Billing Country :</td><td><input type="text" name="billing_country" value="India"/></td>
</tr>
<tr>
<td>Billing Tel :</td><td><input type="text" name="billing_tel" value="9876543210"/></td>
</tr>
<tr>
<td>Billing Email :</td><td><input type="text" name="billing_email" value="person#gmail.com"/></td>
</tr>
<tr>
<td colspan="2">Shipping information(optional)</td>
</tr>
<tr>
<td>Shipping Name :</td><td><input type="text" name="delivery_name" value="Chaplin"/></td>
</tr>
<tr>
<td>Shipping Address :</td><td><input type="text" name="delivery_address" value="room no.701 near bus stand"/></td>
</tr>
<tr>
<td>shipping City :</td><td><input type="text" name="delivery_city" value="Hyderabad"/></td>
</tr>
<tr>
<td>shipping State :</td><td><input type="text" name="delivery_state" value="Andhra"/></td>
</tr>
<tr>
<td>shipping Zip :</td><td><input type="text" name="delivery_zip" value="425001"/></td>
</tr>
<tr>
<td>shipping Country :</td><td><input type="text" name="delivery_country" value="India"/></td>
</tr>
<tr>
<td>Shipping Tel :</td><td><input type="text" name="delivery_tel" value="9595226054"/></td>
</tr>
<tr>
<td>Merchant Param1 :</td><td><input type="text" name="merchant_param1" value="additional Info."/></td>
</tr>
<tr>
<td>Merchant Param2 :</td><td><input type="text" name="merchant_param2" value="additional Info."/></td>
</tr>
<tr>
<td>Merchant Param3 :</td><td><input type="text" name="merchant_param3" value="additional Info."/></td>
</tr>
<tr>
<td>Merchant Param4 :</td><td><input type="text" name="merchant_param4" value="additional Info."/></td>
</tr>
<tr>
<td>Merchant Param5 :</td><td><input type="text" name="merchant_param5" value="additional Info."/></td>
</tr>
<tr>
<td>Promo Code :</td><td><input type="text" name="promo_code" value=""/></td>
</tr>
<tr>
<td>Vault Info. :</td><td><input type="text" name="customer_identifier" value=""/></td>
</tr>
<tr>
<td>Integration Type :</td><td><input type="text" name="integration_type" value="iframe_normal"/></td>
</tr>
<tr>
<td></td><td><INPUT TYPE="submit" value="CheckOut"></td>
</tr>
</table>
</form>
</body>
</html>
These 4 files is the only docs they provides..
I can also see that in html.erb file they want us to put the keys?? Is it safe??
The gem they provide is really outdated and hence didnt even mention about it.. I really cant figure out where to start with this..Can someone give me a rough idea on how to do this???
We just moved an ASP MVC intranet website onto a local server and are experiencing something weird with the pics used on one page. For some reason, the URL contains an extra subfolder. What's weird about this is that this is that it's a URL that's used in the "master template" page, yet no other page is displaying this oddity. This is
Theses are the two pics in question:
<img src="../../Content/images/Monet3.png" id="MonetSig" />
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
When I bring up the developer tools in Chrome I get the following error messages for both pics:
GET http://insideapps.dev.company.com/Monet/Monet/Content/images/Monet3.png 404 (Not Found)
GET http://insideapps.dev.company.com/Monet/Monet/Content/images/TEST2body_top.png 404 (Not Found)
Again, no other pages display this error.
Here is a copy of the master layout for the site:
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script language="javascript">
function DoFun() {
}
</script>
</head>
<body>
#using Monet.Common
<div class="page">
<header>
<div style="margin: 10px;" id="Logo">
<img src="../../Content/images/Monet3.png" id="MonetSig" />
</div>
#* </a>*#
#* <div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>*#
<nav>
<ul id="menu">
<li>#Html.MenuLink("Agents", "Index", "Agent")</li>
<li>#Html.MenuLink("Products", "Index", "Product")</li>
<li>#Html.MenuLink("Product Training", "Index", "Course")</li>
<li>#Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li>#Html.MenuLink("Help", "About", "Home")</li>
</ul>
</nav>
</header>
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
Just in case, here is the Index.cshtml for the page in question
#model IEnumerable<Monet.Models.FollowUpItems>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#thetable").tablesorter();
}
);
function GetNotes(id) {
$('#' + id).dialog();
}
function GetMisc(id) {
var target = id + "Misc";
$('#' + target).dialog();
}
</script>
<h2>Follow Up Items</h2>
#using (Html.BeginForm())
{
<span id="searchBox" class="boxMe" >
<form method="post">
<select name="Table" title="Table" style="font-size:8pt;">
<option value="%">--Table Name--</option>
<option value="AgentContEd">CE</option>
<option value="AgentProductTraining">PT</option>
</select>
<select name="IssueType" style="font-size:8pt;">
<option value="%">--Issue Type--</option>
<option value="W">Warning</option>
<option value="E">Error</option>
</select>
<select name="Status" style="font-size:8pt;">
<option value="%">--Status Type--</option>
<option value="O">Open</option>
<option value="U">Under Review</option>
</select>
<input type="image" src="#Url.Content("~/Content/Images/Filter.bmp")" alt="Filter" style="padding-top: 0px;" />
</form>
</span>
<br />
<br />
<span id="programExplanation" style="width: 500px; float:left; padding: 5px; margin-left: 25px;"></span>
<span class="error" style="clear: both;">
#ViewBag.ErrorMessage
</span>
<span class="msg">
#ViewBag.Message
</span>
<br />
<br />
<br />
}
<table>
<tr>
<th>
Table
</th>
<th>
Issue
</th>
<th>
Status
</th>
<th>
Message
</th>
<th>
CreatedBy
</th>
<th>
CreatedOn
</th>
<th>
Key1
</th>
<th>
Key2
</th>
<th>
Notes
</th>
<th>
Misc.
</th>
<th></th>
</tr>
#foreach (var item in Model.Where(i => i.Status != "C" && i.IssueType != "S"))
{
var note = string.Empty;
if (!String.IsNullOrWhiteSpace(item.Notes))
{
note = item.Notes.ToString();
}
var id = item.Id;
var target = id + "Misc";
<tr>
<td>
#if (!String.IsNullOrWhiteSpace(item.TableName))
{
if (item.TableName.Equals("AgentContEd"))
{
#Html.Raw("CE");
}
else if (item.TableName.Equals("AgentProductTraining"))
{
#Html.Raw("PT");
}
else
{
#Html.DisplayFor(modelItem => item.TableName)
}
}
</td>
<td>
#Html.DisplayFor(modelItem => item.IssueType)
</td>
<td>
#Html.DisplayFor(modelItem => item.Status)
</td>
<td>
#Html.DisplayFor(modelItem => item.Message)
</td>
<td>
#Html.DisplayFor(modelItem => item.CreatedBy)
</td>
<td>
#Html.DisplayFor(modelItem => item.CreatedOn)
</td>
<td>
#Html.DisplayFor(modelItem => item.Key1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Key2)
</td>
<td>
#if (!String.IsNullOrWhiteSpace(item.Notes))
{
<span id="notes" onclick='GetNotes(#id);'>
<img src="#Url.Content("~/Content/images/magnify.gif")" alt="Show Notes" />
</span>
}
<div id="#id" title="Notes" style="display:none;">
#Html.DisplayFor(modelItem => item.Notes)
</div>
</td>
<td>
#if (!String.IsNullOrWhiteSpace(item.LastUpdateBy) || !String.IsNullOrWhiteSpace(item.LastUpdateOn.ToString()))
{
<span id="misc" onclick='GetMisc(#id);'>
<img src="#Url.Content("~/Content/images/magnify.gif")" alt="Show Notes" />
</span>
}
<div id="#target" title="Misc" style="display:none;">
#Html.DisplayFor(modelItem => item.LastUpdateBy)
#Html.DisplayFor(modelItem => item.LastUpdateOn)
</div>
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id })
</td>
</tr>
}
</table>
Always use heleprs when dealing with urls in an ASP.NET MVC application and never hardcode them as you did.
So:
<img src="#Url.Content("~/Content/images/Monet3.png")" id="MonetSig" />
<img src="#Url.Content("~/Content/images/TEST2body_top.png")" id="topPic" alt="tag" />
and if you are using WebPages v2.0 (which is the default in ASP.NET MVC 4) you could do this:
<img src="~/Content/images/Monet3.png" id="MonetSig" />
<img src="~/Content/images/TEST2body_top.png" id="topPic" alt="tag" />
The Url helper will take care of generating proper url to the resource no matter where and how your application is hosted.
I have 2 forms on a single razor view that open in seperate dialog boxes. The forms are submitted using jquery post..
First form works perfectly but the second form isnt recognised at all and when I try to serializr the data it returns an empty string.
Code below:
#using (Html.BeginForm("SaveElectricReading", "Store", FormMethod.Post, new { id = "frmSaveElectricReading" }))
{
<div id="electricDialog" style="display: none;" title="Electric Readings">
<p>
Please ensure the electric readings have been entered!
</p>
<table width="100%">
<tr>
<th>
Serial:
</th>
</tr>
<tr>
<td>
<input type="text" name="Serial" />
</td>
</tr>
<tr>
<th>
Reading:
</th>
</tr>
<tr>
<td>
<input type="text" name="Reading" />
</td>
</tr>
<tr>
<th>
Comment:
</th>
</tr>
<tr>
<td>
<div class="textwrapper">
<textarea rows="5" cols="10" name="Comment"></textarea>
</div>
</td>
</tr>
</table>
</div>
}
#using (Html.BeginForm("SaveWaterReading", "Store", FormMethod.Post, new { id = "myform" }))
{
<div id="waterDialog" style="display: none;" title="Water Readings">
<p>
Please ensure the water readings have been entered!
</p>
<table width="100%">
<tr>
<th>
Serial:
</th>
</tr>
<tr>
<td>
<input type="text" name="WaterSerial" />
</td>
</tr>
<tr>
<th>
Reading:
</th>
</tr>
<tr>
<td>
<input type="text" name="WaterReadingsdfsdf" />
</td>
</tr>
<tr>
<th>
Comment:
</th>
</tr>
<tr>
<td>
<div class="textwrapper">
<textarea rows="5" cols="10" name="WaterComment"></textarea>
</div>
</td>
</tr>
</table>
</div>
}
function showWaterDialog() {
var $dialog = $('#waterDialog').dialog({
autoOpen: false,
modal: true,
width: 400,
height: 400,
buttons: {
Submit: function () {
// $('#frmCreateStore').submit();
var data = $('#frmSaveWaterReading');
$.post("/Store/SaveWaterReading",
$("#frmSaveWaterReading").serialize(),
function () {
$("#waterDialog").dialog("close");
});
//$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
}
In the jquery function for showing the dialog with the form in it, I needed to add that dialog content to the second form on the page as follows:
$("#waterDialog").parent().appendTo($("form").eq(1)[0]);
I am trying to upload a picture, and save it in database.
If I do the following I get this error:
Failed to convert property value of type
org.springframework.web.multipart.commons.CommonsMultipartFile to
required type java.lang.Byte[] for property picture1; nested exception
is java.lang.IllegalArgumentException: Cannot convert value of type
[org.springframework.web.multipart.commons.CommonsMultipartFile] to
required type [java.lang.Byte] for property picture1[0]:
PropertyEditor
[org.springframework.beans.propertyeditors.CustomNumberEditor]
returned inappropriate value
If i do it this way:
if(request instanceof MultipartHttpServletRequest){
MultipartHttpServletRequest mpr = (MultipartHttpServletRequest)request;
CommonsMultipartFile f = (CommonsMultipartFile) mpr.getFile("picture1");
}
I get this error:
Executing action [save] of controller [com.testapp.RequestController]
caused exception: Cannot cast object '
org.springframework.web.multipart.commons.CommonsMultipartFile#34ae1f02'
with class
'org.springframework.web.multipart.commons.CommonsMultipartFile' to
class 'java.lang.Byte'
What should I do to make this work?
Domain
package com.testapp
class Request{
String requestID
Date dateCreated
String subject
String startedBy
String description
String status
String priority
Productline productline
Topic topic
Subtopic subtopic
String company
Byte [] picture1
Byte [] picture2
Byte [] picture3
String acceptedBy
static constraints = {
requestID(blank:true,nullable:true)
dateCreated(blank:true,nullable:true)
subject()
description(maxSize:5000)
status (blank:true,nullable:true)
priority(inList:["Normal","Urgent","Not urgent"])
productline(blank:true,nullable:true)
topic(blank:true,nullable:true)
subtopic(blank:true,nullable:true)
company(blank:true,nullable:true)
startedBy(blank:true,nullable:true)
acceptedBy(blank:true,nullable:true)
picture1(blank:true,nullable:true)
picture2(blank:true,nullable:true)
picture3(blank:true,nullable:true)
}
}
GSP:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<g:set var="entityName" value="${message(code: 'request.label', default: 'Request')}" />
<title><g:message code="New request" args="[entityName]" /></title>
</head>
<body>
<div class="nav">
<span class="menuButton"><a class="home" href="${createLink(uri: '/')}"><g:message `code="default.home.label"/></a></span>`
<span class="menuButton"><g:link class="list" action="userList"><g:message code="Lista zahteva" `args="[entityName]" /></g:link></span>`
</div>
<div class="body">
<h1><g:message code="New request" args="[entityName]" /></h1>
<g:if test="${flash.message}">
<div class="message">${flash.message}</div>
</g:if>
<g:hasErrors bean="${requestInstance}">
<div class="errors">
<g:renderErrors bean="${requestInstance}" as="list" />
</div>
</g:hasErrors>
<g:form action="save" method="post" enctype="multipart/form-data">
<div class="dialog">
<table>
<tbody>
<tr class="prop">
<td valign="top" class="name">
<label for="subject"><g:message code="request.subject.label" default="Subject" /></label>
</td>
<td valign="top" class="value ${hasErrors(bean: requestInstance, field: 'subject', 'errors')}">
<g:textField name="subject" value="${requestInstance?.subject}" />
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="description"><g:message code="request.description.label" default="Opis" /></label>
</td>
<td valign="top" class="value ${hasErrors(bean: requestInstance, field: 'description', 'errors')}">
<g:textArea name="description" cols="40" rows="5" value="${requestInstance?.description}" />
</td>
</tr>
<tr>
<td valign="top" class="name">
<label for="picture1"><g:message code="request.picture1.label" default="Printscreen" /></label>
</td>
<td valign="top" class="value">
<input type="file" id="picture1" name="picture1"/>
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="priority"><g:message code="request.priority.label" default="Priority" /></label>
</td>
<td valign="top" class="value ${hasErrors(bean: requestInstance, field: 'status', 'errors')}">
<g:select name="priority" from="${requestInstance.constraints.priority.inList}" value="${requestInstance?.priority}" valueMessagePrefix="request.priority" />
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="productline"><g:message code="request.productline.label" default="Productline" /></label>
</td>
<td valign="top" class="value ${hasErrors(bean: requestInstance, field: 'productline', 'errors')}">
<g:select name="productline.id" from="${com.testapp.Productline.list()}" optionKey="id" value="${requestInstance?.productline?.id}" />
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="topic"><g:message code="request.topic.label" default="Topic" /></label>
</td>
<td valign="top" class="value ${hasErrors(bean: requestInstance, field: 'topic', 'errors')}">
<g:select name="topic.id" from="${com.testapp.Topic.list()}" optionKey="id" value="${requestInstance?.topic?.id}" />
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="subtopic"><g:message code="request.subtopic.label" default="Subtopic" /></label>
</td>
<td valign="top" class="value ${hasErrors(bean: requestInstance, field: 'subtopic', 'errors')}">
<g:select name="subtopic.id" from="${com.testapp.Subtopic.list()}" optionKey="id" value="${requestInstance?.subtopic?.id}" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="buttons">
<span class="button"><g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" /></span>
</div>
</g:form>
</div>
</body>
Controller:
def save = {
def requestInstance = new Request(params)
def requestNumberInstance = new RequestNumber()
def upPic1 = request.getFile('picture1')
def lastReqNum = RequestNumber.find("from RequestNumber ORDER BY requestNumber desc")
if(lastReqNum){
requestNumberInstance.requestNumber = lastReqNum.requestNumber + 1
}
else{
requestNumberInstance.requestNumber = 110000
}
requestInstance.requestID = "CSC" + requestNumberInstance.requestNumber
def currentUserContact = Contact.findByUser(springSecurityService.getCurrentUser())
requestInstance.startedBy = currentUserContact.realname
requestInstance.company = currentUserContact.company
requestInstance.status = "Opened"
requestInstance.acceptedBy = "Not yet accepted"
requestInstance.picture1 = upPic1
if(requestNumberInstance.save()){
if (requestInstance.save()) {
flash.message = "${message(code: 'default.created.message', args: [message(code: 'request.label', default: 'Request'), requestInstance.id])}"
redirect(action: "show", id: requestInstance.id)
}
else {
render(view: "create", model: [requestInstance: requestInstance])
}
}
else{
render(view: "create", model: [requestInstance: requestInstance])
}
}
Please dont mind the spaghetti code. I'm just trying to get some basic concepts. I will clear it later.
Simplified example:
def save = {
def requestInstance = new Request(params)
def requestNumberInstance = new RequestNumber()
if(requestInstance.validate() && requestInstance.save(flush: true)){
println "Saved successfully with ${requestInstance.picture1.length} bytes"
}
else {
println "Save failed"
}
Update after question edit
The error is probably caused by this:
def upPic1 = request.getFile('picture1')
...
requestInstance.picture1 = upPic1
request.getFile() is returning a MultipartFile, and you're trying to assign it to a Byte[] field. Considering my small example (below), you shouldn't even need to try to make this assignment. The def requestInstance = new Request(params) will bind the byte[] automatically.
Uploaded files bind automatically to byte[] fields. Here's a working example:
Domain: grails-app/domain/my/Example.groovy
package my
class Example {
byte[] file
}
Controller: grails-app/controllers/my/ExampleController.groovy
package my
class ExampleController {
def create = { }
def save = {
def example = new Example(params)
if(example.validate() && example.save(flush: true)) {
println "Saved successfully with ${example.file.length} bytes"
} else {
println "Save failed"
}
redirect(action: 'create')
}
}
GSP: grails-app/views/example/create.gsp
<!DOCTYPE html>
<html>
<body>
<g:uploadForm action="save">
<input type="file" name="file"/>
<g:submitButton name="submit"/>
</g:uploadForm>
</body>
</html>
When I upload a small file using the GSP form, I see the following console output:
Saved successfully with 23 bytes
Suggestions
Try using Grails data binding to save your file contents.
Make sure your form is a <g:uploadForm> or has an enctype="multipart/form-data" if you're using a vanilla`.
Make sure you're binding the params using the domain constructor, domain.properties, or bindData().
I am guessing your typing is messed up.
What happens if you simply do:
def f = request.getFile('myFile')
as described in the manual. If you want strong typing it should be MultiPartfile, not CommonsMultiPartFile, as far as I remember (and you get it right from the request object).
This is the interface you're working on: http://static.springsource.org/spring/docs/3.0.x/javadoc-api/org/springframework/web/multipart/MultipartFile.html
The relevant method for you, should be getBytes().
Edit for edited question:
As I said, you want getBytes(), you are trying to shove a MultiPartFile into a byte array, thats not going to work.
requestInstance.picture = upPic.getBytes() and you should be allright.
It only worked when I changed my domain properties picture1,picture2,picture3 to:
byte [] picture1
byte [] picture2
byte [] picture3
and added those mappings:
static mapping = {
picture1 column:"picture1", sqlType: "blob"
picture2 column:"picture2", sqlType: "blob"
picture3 column:"picture3", sqlType: "blob"
}