Well My purpose is to use checkbox to pick a template,after that it will be added to a database
but when i try to get the code of template into value it always display undefined.
Interface
Html Code:
<input type="checkbox" id="templatepick" name="picker" value="item.templatebodyclient" (change)="displaydata($event)">
templatebody attribut have the html of our template so i tried to get it from the checked template value to be set in database
Typescript code:
displaydata(event: { checked: any; }){
console.log("",event.checked) }
Any idea how i can solve this ? or another idea could be useful and thanks
You may use:
HTML
<input type="checkbox" id="templatepick" name="picker" [value]="item.templatebodyclient" (change)="displaydata($event)">
TS
displaydata(event: any) {
console.log(event.currentTarget.checked)
console.log(event.target.checked)
}
Related
I am new to web development with Razor pages .net core VS 2017.
I have index page that lists my data in the form of rows & columns using EF core Model.
I am also providing data filtering options via DropDowns and search box.
I want to export this tabular filtered/unfiltered data to excel. --- For which i think i can use NPOI nuget package (http://www.talkingdotnet.com/import-export-excel-asp-net-core-2-razor-pages/).
I want to do this using asp-page-handler with button click.
Questions:
1. Will this be GET request or POST ?
How to pass data (e.g. model object with all data) to the page handler ?
Any help is Appreciated.
Thanks.
For your first question about using GET or POST, both methods can be used but I personally use the POST method for cases like this.
For your second question I would not send to server all the filtered data but I would pass the filtering information which will be used in order to generate the data and export them to an Excel file.
Update 1
I made a simple example for you. Type the following html in your cshtml file:
<form method="post">
<button type="submit" class="btn btn-info"> Export</button>
<input asp-for="Value1" type="hidden" value="1" />
<input asp-for="Value2" type="hidden" value="2" />
</form>
The two inputs will be used in order to submit to the server values which will be used in order to filter your data. The following OnPost will return a static file but you can write your own code in order to return the filtered data and return them to the browser.
[BindProperty]
public int Value1 { get; set; }
[BindProperty]
public int Value2 { get; set; }
public ActionResult OnPost()
{
// example of returning a file
return File("~/Images/accounts.png", "image/png", "FileNameForBrowser.png");
}
Thanks #pitaridis for your valuable inputs.
i ended up doing like this:
` <a asp-page="./Index" asp-page-handler="Export"
asp-route-param1 = "#Model.data1"
asp-route-param2 = "#Model.data2"
asp-route-param3 = "#Model.data3"
class="btn btn-info">
Export
</a>
`
Page handler is OnGetExportAsync(...).On handler call I am getting page refresh, Not sure Why I have to again repopulate all the controls. Any idea on this ?
or other option could be to use the OnGetAsync() method & by passing a param that identify it as file download ?
there is this piece of code that provides a checkbox following from a link to the T&C.
<div class="checkbox accept_agreement">
<label class="control-label" for="step_data_accept_agreement">
<input type="hidden" name="step_data[accept_agreement]" value="0">
<input type="checkbox" name="step_data[accept_agreement]" id="step_data_accept_agreement" value="1">
<label for="step_data_accept_agreement">
<a target="_blank" href="/lanevillkor/">
<font><font>I agree, have read and stored the terms and conditions</font></font>
</a>
</label>
</label>
</div>
Now, I am working on a spock test using geb, and I try to retrieve the checkbox element
<input type="checkbox" name="step_data[accept_agreement]" id="step_data_accept_agreement" value="1">
to do so i have tried many things without the expected output. i was expected that something like
$("#step_data_accept_agreement").click() would be pretty straight forward but it is not. in the other side if I put $("[for='step_data_accept_agreement'] label").click() it clicks the link.
I tried to become as more specific but nothing looks to return the element correctly.
one of my last attempts was
termsAndConditionsOption(wait: true) { $("#step_data_accept_agreement", name: "step_data[accept_agreement]") }
and the error message, as in the other cases too, was in one sentence
element not visible
What do I miss?
So the solution was to use js to click the checkbox. The simpliest way is:
def agreeOnTermsAndConditionsAccept() {
String mouseClickEvt = """
var evt = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
arguments[0].dispatchEvent(evt);
"""
browser.js.exec(termsAndConditionsOption.firstElement(), mouseClickEvt)
}
Geb provides js support to work with javascript, as we find in the documentation. Also another link shows how to simulate a click event with pure javascript.
This was required as the checkbox cant be found as it is hidden. With javascript we can 'see' the position of the element and perform an action in the location that we want. iniMouseEvent can be used as well as it is documentanted here
I am using the jQuery Validation Engine plugin to validate my form. I am also using Bootstrap to give the user feedback (success/fail) of the given input.
Here is how I am initializing the plugin:
jquery
$.validationEngine.defaults.promptPosition = 'inline';
$.validationEngine.defaults.onFieldFailure = function (field) {
console.log('onFieldFailure called');
field.parent().removeClass('has-success').addClass('has-error');
field.nextAll('span').children().removeClass('fa-check').addClass('fa-remove');
};
$.validationEngine.defaults.onFieldSuccess = function (field) {
console.log('onFieldSuccess called');
field.parent().removeClass('has-error').addClass('has-success');
field.nextAll('span').children().removeClass('fa-remove').addClass('fa-check');
};
$form.validationEngine('attach');
I am using CodeIgniter to handle the form server-side. Everything is working great.
html/php
<div class="form-group has-feedback">
<label for="email"><i class="fa fa-asterisk"><span class="sr-only">This field is required</span></i> E-mail Address</label>
<input type="text" class="form-control" id="email" name="email"
data-validation-engine="validate[required, custom[email], ajax[email_exists]]"
data-errormessage-value-missing="This field is required"
data-errormessage="Invalid E-mail address"
value="<?php echo set_value('email'); ?>"
placeholder="your#email.com">
<span class="form-control-feedback"><i class="fa fa-remove"></i></span>
<?php echo form_error('email'); ?>
</div>
Here is my controller (how I'm returning a response):
php
public function ajax_email_exists() {
if ($this->user_model->email_exists($this->input->get('fieldValue'))) {
echo json_encode(array('email', FALSE));
} else {
echo json_encode(array('email', TRUE));
}
}
When the user blurs out of the email field, I do an ajax call email_exists which is working fine as well. Here is what that looks like. It is located in the jquery.validation-engine-en.js file as suggested in the docs.
jquery
'email_exists': {
'url': 'path-to-my-script.php',
'alertTextLoad': '<i class="fa fa-cog fa-spin"></i> Validating, please wait...',
'alertTextOk': '<i class="fa fa-check-circle"></i> E-mail address is valid',
'alertText': '<i class="fa fa-exclamation-triangle"></i> That Email-address already exists'
},
The validation itself is working great. I am getting correct response back - the problem I'm running into is I can't seem to figure out how to make the success of the ajax call to call the onFieldSuccess method. As soon as I blur out of the email field onFieldFailure is called and my input is red. When the ajax validation is complete, I am unable to get rid of the invalid style and apply my valid style. In essence, call the onFieldSuccess method to give the correct feedback.
A thought I had was maybe I need to look at using funcCall instead?
Thank you for your time & suggestions!
EDIT
I've updated my initialize method to add css classes to the elment(s). It seems i'm always getting to addFailureCssClassToField even when I am getting a success result back from the server.
Just in case anyone come across this thread, here is how I came up with a solution.
As mentioned before, all of my validation is/was working correctly. The problem was updating the feedback accordingly. I was unable to update the style(s) to reflect what was happening.
I have updated/cleaned up the plugin code itself so my line numbers are going to be off. That said, around line #1578, you will find this:
jquery
if (options.showPrompts) {
// see if we should display a green prompt
if (msg) {
methods._showPrompt(errorField, msg, "pass", true, options);
options.onFieldSuccess(errorField); // Added this line.
} else {
methods._closePrompt(errorField);
}
}
Because I was getting a success response, I needed to call onFieldSuccess. I am also passing in the field element (jQuery object) to render to.
I have installed meteor-typeahead via npm. https://www.npmjs.org/package/meteor-typeahead
I have also installed
meteor add sergeyt:typeahead
from https://atmospherejs.com/sergeyt/typeahead
I am trying to get the data-source attribute example to function so I can display a list of countries when the user begins to type. I have inserted all countries into the collection :-
Country = new Meteor.Collection('country');
The collection is published and subscribed.
When I type into the input field, no suggestions appear. Is it something to do with activating the API? if so how do I do this? Please reference the website https://www.npmjs.org/package/meteor-typeahead
My form looks like this:
<template name="createpost">
<form class="form-horizontal" role="form" id="createpost">
<input class="form-control typeahead" name="country" type="text" placeholder="Country" autocomplete="off" spellcheck="off" data-source="country"/>
<input type="submit" value="post">
</form>
</template>
client.js
Template.createpost.helpers({
country: function(){
return Country.find().fetch().map(function(it){ return it.name; });
} });
In order to make your input to have typeahead completion you need:
Activate typeahead jQuery plugin using package API
Meteor.typeahead call in template rendered event handler.
Meteor.typeahead.inject call to activate typeahead plugin for elementes matched by CSS selector available on the page (see demo app).
Write 'data-source' function in your template understandable by typeahead plugin. It seems your 'data-source' function is correct.
Add CSS styles for typeahead input(s)/dropdown to your application. See example here in demo app.
Try this way in your template:
<input type="text" name="country" data-source="country"
data-template="country" data-value-key="name" data-select="selected">
Create template like country.html (for example /client/templates/country.html) which contains:
<template name="country">
<p>{{name}}</p>
</template>
In your client javascript:
Template.createpost.rendered = function() {
Meteor.typeahead.inject();
}
and
Template.createpost.helpers({
country: function() {
return Country.find().fetch().map(function(it){
return {name: it.name};
});
},
selected: function(event, suggestion, datasetName) {
console.log(suggestion); //or anything what you want after selection
}
})
I am using MVC, Razor, Knockout, typescript in my application. Need to prepare a excel file with a model/dataset that is set at client side. I am using the following code but the problem i understand is that the dataset is being taken as string and not exactly like the model it is supposed to take as. Here is the code
This is observable (dataset)
vmExportData = ko.observableArray<ExcelModel>([]);
Push data to the dataset
vmExportData.push(new ExcelModel (
e.sender.data()[i].Id,
e.sender.data()[i].Name,
e.sender.data()[i].Address1,
));
Html code, to prepare excel file (at the controller)
#using (Html.BeginForm("ExportToExcel", "MyController", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div data-bind="css:{hidden: true}">
<input type="text" data-bind="value: vmExportData" />
</div>
<input class='excelIcon' type="submit" data-ux-access="true" value="">
}
Controller method :
public ActionResult ExportToExcel(ExportModel exportModel)
{
The problem is, the exportModel parameter value is coming as null ! Any other way out to get it to work ? Is there a way to make excel at client side and render as well ?
Try setting name="exportModel" on your tag.
Also make sure to have an [HttpPost] on top of your controller action, since your form method is post.
What does the ExportModel class look like?