I have noticed a strange behavior in MVC 5 (C#) with the form validator.
This is my code to check on keyup for errors:
var $validatr = $('form').data('validator');
var settngs = $validatr.settings;
settngs.onkeyup = function (element, eventType) {
if (!$validatr.element(element)) {
$(this.currentForm).triggerHandler("invalid-form", [this]);
}
};
settngs.onfocusout = false;
I have noticed that this code works on some forms, on other not. I tried to get the validator also like this:
var $validatr = $('form').validate();
But it is still not working. Important: then I noticed that the the code is working for the registration form only if the user is not logged already. (I can access the registration form also when the user is logged). When the user is logged I get this error:
TypeError: $validatr is undefined
In this case the error for the input form pops-up only when there is an out_of_focus of the element.
UPDATE:
If I delete this cookie: AspNet.ApplicationCookie and refresh the page the user is logged out and the onKeyUp validation is working. What is going on?
If you have more than one form on a page or you have a popup that contains a form on the page the Jquery selector can have multiple forms targeted the way you are using your selector. I would suggest you target a form by Id instead
var $validatr = $('#myForm1').data('validator');
Or alternatively using a loop to target all form elements
$('form').each(function( index, form ) {
var settngs = form.settings;
settngs.onkeyup = function (element, eventType) {
if (!form.element(element)) {
form.triggerHandler("invalid-form", [this]);
}
};
settngs.onfocusout = false;
});
Related
I am using HTMLElementCollection, HtmlElement to iterate through a website and using Get/Set attributes of a website HTML and returning it to a ListView. Is it possible to get values from website a and website b to return it to the ListView?
HtmlElementCollection oCol1 = oDoc.Body.GetElementsByTagName("input");
foreach (HtmlElement oElement in oCol1)
{
if (oElement.GetAttribute("id").ToString() == "search")
{
oElement.SetAttribute("value", m_sPartNbr);
}
if (oElement.GetAttribute("id").ToString() == "submit")
{
oElement.InvokeMember("click");
}
}
HtmlElementCollection oCol1 = oDoc.Body.GetElementsByTagName("tr");
foreach (HtmlElement oElement1 in oCol1)
{
if (oElement1.GetAttribute("data-mpn").ToString() == m_sPartNbr.ToUpper())
{
HtmlElementCollection oCol2 = oElement1.GetElementsByTagName("td");
foreach (HtmlElement oElement2 in oCol2)
{
if (oElement2 != null)
{
if (oElement2.InnerText != null)
{
if (oElement2.InnerText.StartsWith("$"))
{
string sPrice = oElement2.InnerText.Replace("$", "").Trim();
double dblPrice = double.Parse(sPrice);
if (dblPrice > 0)
m_dblPrices.Add(dblPrice);
}
}
}
}
}
}
As one of the comments mentioned the better approach would be to use HttpWebRequest to send a get request to www.bestbuy.com or whatever site. What it returns is the full HTML code (what you see) which you can then parse through. This kind of approach keeps you from seinding too many requests and getting blacklisted. If you need to click a button or type in a text field its best to mimic human input to avoid being blacklisted also. I would suggest injecting a simple javascript into the page header or body and execute it from the app to send a 'onClick' event from the button (which would then reply with a new page to parse or display) or to modify the text property of something.
this example is in c++/cx but it originally came from a c# example. the script sets the username and password text fields then clicks the login button:
String^ script = "document.GetElementById('username-text').value='myUserName';document.getElementById('password-txt').value='myPassword';document.getElementById('btn-go').click();";
auto args = ref new Platform::Collections::Vector<Platform::String^>();
args->Append(script);
create_task(wv->InvokeScriptAsync("eval", args)).then([this](Platform::String^ response){
//LOGIN COMPLETE
});
//notes: wv = webview
EDIT:
as pointed out the absolute best approach would be to get/request an api. I was surprised to see that site mason pointed out for bestbuy developers. Personally I have only tried to work with auto part stores who either laugh while saying I can't afford it or have no idea what I'm asking for and hang up (when calling corporate).
EDIT 2: in my code the site used was autozone. I had to use chrome developer tools (f12) to get the names of the username, password, and button name. From the developer tools you can also watch what is sent from your computer to the site/server. This allows you to recreate everything and mimic javascript input and actions using post/get with HttpWebRequest.
I have a trouble to get angular working with .Net partial postbacks.
Question is basically same to this : Re-initialize Angular bindings after partial postback
Basically I have a tab on which I have angular app, then I have second tab with some c# control, I have to do partial postback between tabs and when I am going back to my app, there is nothing.
I have tried routing with ngView then I have tried $route.reload() (it goes to the controller and I can see that the template is being pulled down but the result on the page is none). Then I tried compile(templateCache.get(lazyTableControllerRoute.current.templateUrl))(scope) as mentioned here. Nothing.
Please help :)
After each postback I am putting on page this html :
LiteralControl lazyControl = new LiteralControl("<div ng-app=\"LazyLoadingApp\" style=\"padding:10px\" ng-controller=\"LazyTableController\" ng-view><lazy-table> </lazy-table></div>");
Controls.Add(lazyControl);
And some config constants like templateUrl.
Here is my code :
var app = angular.module('LazyLoadingApp', ['ui.bootstrap', 'ngRoute'], function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
app.config(function ($routeProvider, $locationProvider, tableTemplateUrl) {
$routeProvider.when('/Page.Web.UI/sptl_project.aspx', {
controller: 'LazyTableController',
templateUrl: tableTemplateUrl,
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
//**This objects I am using after partial postback to check in the console if e.g. $route.reload() works..**
var lazyTableControllerRoute = null;
var templateCache = null;
var compile = null;
var scope = null;
app.directive('lazyTable', ['tableTemplateUrl',
function (tableTemplateUrl) {
return {
name: 'lazyTable',
priority: 0,
restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
templateUrl: tableTemplateUrl
};
}
]).controller('LazyTableController', ['$scope', '$rootScope', 'lazyFactory', 'opsPerRequest', 'header', '$route', '$templateCache', '$compile',
function ($scope, $rootScope, lazyFactory, opsPerRequest, header, $route, $templateCache, $compile) {
lazyTableControllerRoute = $route;
var loadingPromise = null;
templateCache = $templateCache;
compile = $compile;
scope = $scope;
(...) rest is not important
UPDATE:
I was trying with require.js.. (Again, it's working after full page load.) My idea was to bootstrap element after partial postback.
I built simple test case that in Update Panel along with my app there is simple button, just making partial postback. After click (when app disappeared) I tried in console:
angular.bootstrap(document, ['LazyLoadingApp'])
But then I got error which I cannot remove:
App Already Bootstrapped with this Element 'document'
Here is plunker for app in require.js way (but please keep in mind that it's just for code review purpose..)
don't use ng-app and angular.bootstrap all together at once.
did you compile "ng-app", if so don't.
ngtutorial.com/learn/bootstrap
Alright ! Problem solved.. So in order to work with partial postbacks you need to :
Define app like this: (remember that you have to remove ng-app from html !)
<base href="/">
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="fire" runat="server" Text="fire!" />
<div id="parent" > <div id="boodstapped" ng-view ></div></div>
</ContentTemplate>
</asp:UpdatePanel>
Instantiate app like this:
var app = angular.module('LazyLoadingApp', ['ui.bootstrap', 'ngRoute']);
jQuery(document).ready(function ($) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
function EndRequestHandler(sender, args) {
jQuery('#parent').children().remove();
jQuery('#parent').append('<div id="boodstapped" ng-view ></div>');
angular.bootstrap(jQuery('#boodstapped'), ['LazyLoadingApp']);
}
prm.add_endRequest(EndRequestHandler);
});
Then when you will try to do partial postback EndRequestHandler will bootstrap app again. What's important to remove previously bootstrap element, to avoid angular "already bootstrapped" error.
Click Here for more information.
Though the other answers probably do work I've found that best course of action is to try to not be in a 'mixed' state of .net controls and angular controls that depend on interaction between the two.
The process for this is undocumented at best... and you end up writing a lot of code to accommodate simple things.
I wouldn't recommend doing the following for long and only suggest it as a temporary/transitional solution and I know this may not solve every case .... but note you can always attack this problem from the dot.net side as follows and redirect back to the page you are on...
protected void cbChecked_My_DotNet_CallBack(object sender, EventArgs e)
{
DoDotNetStuff();
if(NeedToSignalToAngular){
response.redirect(yourpage.aspx?yourparams=xxx)
}
}
This question already has answers here:
Calling JavaScript Function From CodeBehind
(21 answers)
Closed 9 years ago.
I am trying to learn asp.net. Assuming that I have this code:
if (command.ExecuteNonQuery() == 0)
{
// JavaScript like alert("true");
}
else
{
// JavaScript like alert("false");
}
How to I can invoke JavaScript from C# code behind? How to do that by putting that JavaScript in Scripts directory which is created by default in MS Visual Studio?
Here is method I will use from time to time to send a pop message from the code behind. I try to avoid having to do this - but sometimes I need to.
private void LoadClientScriptMessage(string message)
{
StringBuilder script = new StringBuilder();
script.Append(#"<script language='javascript'>");
script.Append(#"alert('" + message + "');");
script.Append(#"</script>");
Page.ClientScript.RegisterStartupScript(this.GetType(), "messageScript", script.ToString());
}
You can use RegisterStartupScript to load a javascript function from CodeBehind.
Please note that javascript will only run at client side when the page is render at client's browser.
Regular Page
Page.ClientScript.RegisterStartupScript(this.GetType(), "myfunc" + UniqueID,
"myJavascriptFunction();", true);
Ajax Page
You need to use ScriptManager if you use ajax.
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myfunc" + UniqueID,
"myJavascriptFunction();", true);
Usually these "startupscripts" are handy for translations or passing settings to javascript.
Although the solution Mike provided is correct on the .Net side I doubt in a clean (read: no spaghetti code) production environment this is a good practice. It would be better to add .Net variables to a javascript object like so:
// GA example
public static string GetAnalyticsSettingsScript()
{
var settings = new StringBuilder();
var logged = ProjectContext.CurrentUser != null ? "Logged" : "Not Logged";
var account = Configuration.Configuration.GoogleAnalyticsAccount;
// check the required objects since it might not yet exist
settings.AppendLine("Project = window.Project || {};");
settings.AppendLine("Project.analytics = Project.analytics || {};");
settings.AppendLine("Project.analytics.settings = Project.analytics.settings || {};");
settings.AppendFormat("Project.analytics.settings.account = '{0}';", account);
settings.AppendLine();
settings.AppendFormat("Project.analytics.settings.logged = '{0}';", logged);
settings.AppendLine();
return settings.ToString();
}
And then use the common Page.ClientScript.RegisterStartupScript to add it to the HTML.
private void RegisterAnalyticsSettingsScript()
{
string script = GoogleAnalyticsConfiguration.GetAnalyticsSettingsScript();
if (!string.IsNullOrEmpty(script))
{
Page.ClientScript.RegisterStartupScript(GetType(), "AnalyticsSettings", script, true);
}
}
On the JavaScript side it might look like this:
// IIFE
(function($){
// 1. CONFIGURATION
var cfg = {
trackingSetup: {
account: "UA-xxx-1",
allowLinker: true,
domainName: "auto",
siteSpeedSampleRate: 100,
pluginUrl: "//www.google-analytics.com/plugins/ga/inpage_linkid.js"
},
customVariablesSetup: {
usertype: {
slot: 1,
property: "User_type",
value: "Not Logged",
scope: 1
}
}
};
// 2. DOM PROJECT OBJECT
window.Project = window.Project || {};
window.Project.analytics = {
init: function(){
// loading ga.js here with ajax
},
activate: function(){
var proj = this,
account = proj.settings.account || cfg.trackingSetup.account,
logged = proj.settings.logged || cfg.customVariablesSetup.usertype.value;
// override the cfg with settings from .net
cfg.trackingSetup.account = account;
cfg.customVariablesSetup.usertype.value = logged;
// binding events, and more ...
}
};
// 3. INITIALIZE ON LOAD
Project.analytics.init();
// 4. ACTIVATE ONCE THE DOM IS READY
$(function () {
Project.analytics.activate();
});
}(jQuery));
The advantage with this setup is you can load an asynchronous object and override the settings of this object by .Net. Using a configuration object you directly inject javascript into the object and override it when found.
This approach allows me to easily get translation strings, settings, and so on ...
It requires a little bit knowledge of both.
Please note the real power of tis approach lies in the "direct initialization" and "delayed activation". This is necessary as you might not know when (during loading of the page) these object are live. The delay helps overriding the proper objects.
This might be a long shot, but sometimes I need a c# property/value from the server side displaying or manipulated on the client side.
c# code behind page
public string Name {get; set;}
JavaScript on Aspx page
var name = '<%=Name%>';
Populating to client side is generally easier, depending on your issue. Just a thought!
I am creating a address validator web application using google maps.my UI:
]
Now which I want is after pressing ok button address should be shown into your address look like field like this 701 1st, Sunnywale, CA 94089
now my ok button click event is
FullAddress.Text = AddressLine1.Text + ',' + ' ' + City.Text + ',' + ' ' + State.Text+ ' ' +Zip.Text;
but when i add javascript to call google maps with my program its not working its throgh a error like as sample pic. Please help me guys.
ok button :
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="OK"
Width="62px" style="margin-left: 0px" />
Validate & Locate Me Button code:
<asp:Button ID="Submit" runat="server" style="margin-left: 97px" Text="Validate & Locate Me" Width="137px" />
Now jQuery and geocode part:
<script type="text/javascript">
// The following code show execute only after the page is fully loaded
$(document).ready(function () {
if ($('#MyForm').exists()) {
// Enable jQuery Validation for the form
$("#MyForm").validate({ onkeyup: false });
// Add validation rules to the FullAddress field
$("#FullAddress").rules("add", {
fulladdress: true,
required: true,
messages: {
fulladdress: "Google cannot locate this address."
}
});
// This function will be executed when the form is submitted
function FormSubmit() {
$.submitForm = true;
if (!$('#MyForm').valid()) {
return false;
} else {
if ($("#FullAddress").data("IsChecking") == true) {
$("#FullAddress").data("SubmitForm", true);
return false;
}
alert('Form Valid! Submit!');
// return true; // Uncomment to submit the form.
return false; // Supress the form submission for test purpose.
}
}
// Attach the FormSubmit function to the Submit button
if ($('#Submit').exists()) {
$("#Submit").click(FormSubmit);
}
// Execute the ForumSubmit function when the form is submitted
$('#MyForm').submit(FormSubmit);
}
});
// Create a jQuery exists method
jQuery.fn.exists = function () { return jQuery(this).length > 0; }
// Position the Google Map
function Map(elementId, geolocation) {
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(elementId), myOptions);
map.setCenter(geolocation);
}
// FullAddress jQuery Validator
function FullAddressValidator(value, element, paras) {
// Convert the value variable into something a bit more descriptive
var CurrentAddress = value;
// If the address is blank, then this is for the required validator to deal with.
if (value.length == 0) {
return true;
}
// If we've already validated this address, then just return the previous result
if ($(element).data("LastAddressValidated") == CurrentAddress) {
return $(element).data("IsValid");
}
// We have a new address to validate, set the IsChecking flag to true and set the LastAddressValidated to the CurrentAddress
$(element).data("IsChecking", true);
$(element).data("LastAddressValidated", CurrentAddress);
// Google Maps doesn't like line-breaks, remove them
CurrentAddress = CurrentAddress.replace(/\n/g, "");
// Create a new Google geocoder
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': CurrentAddress }, function (results, status) {
// The code below only gets run after a successful Google service call has completed.
// Because this is an asynchronous call, the validator has already returned a 'true' result
// to supress an error message and then cancelled the form submission. The code below
// needs to fetch the true validation from the Google service and then re-execute the
// jQuery form validator to display the error message. Futhermore, if the form was
// being submitted, the code below needs to resume that submit.
// Google reported a valid geocoded address
if (status == google.maps.GeocoderStatus.OK) {
// Get the formatted Google result
var address = results[0].formatted_address;
// Count the commas in the fomatted address.
// This doesn't look great, but it helps us understand how specific the geocoded address
// is. For example, "CA" will geocde to "California, USA".
numCommas = address.match(/,/g).length;
// A full street address will have at least 3 commas. Alternate techniques involve
// fetching the address_components returned by Google Maps. That code looks even more ugly.
if (numCommas >= 3) {
// Replace the first comma found with a line-break
address = address.replace(/, /, "\n");
// Remove USA from the address (remove this, if this is important to you)
address = address.replace(/, USA$/, "");
// Check for the map_canvas, if it exists then position the Google Map
if ($("#map_canvas").exists()) {
$("#map_canvas").show();
Map("map_canvas", results[0].geometry.location);
}
// Set the textarea value to the geocoded address
$(element).val(address);
// Cache this latest result
$(element).data("LastAddressValidated", address);
// We have a valid geocoded address
$(element).data("IsValid", true);
} else {
// Google Maps was able to geocode the address, but it wasn't specific
// enough (not enough commas) to be a valid street address.
$(element).data("IsValid", false);
}
// Otherwise the address is invalid
} else {
$(element).data("IsValid", false);
}
// We're no longer in the midst of validating
$(element).data("IsChecking", false);
// Get the parent form element for this address field
var form = $(element).parents('form:first');
// This code is being run after the validation for this field,
// if the form was being submitted before this validtor was
// called then we need to re-submit the form.
if ($(element).data("SubmitForm") == true) {
form.submit();
} else {
// Re-validate this property so we can return the result.
form.validate().element(element);
}
});
// The FullAddress validator always returns 'true' when initially called.
// The true result will be return later by the geocode function (above)
return true;
}
// Define a new jQuery Validator method
$.validator.addMethod("fulladdress", FullAddressValidator);
</script>
</body>
</html>
Please help after pressing ok button full address isnt shown into Your address look like field.Instead of that its through a message: This Field is required. If further more details needed please mention it
Simply use 2 FORMS to keep your controls. First one will have the address fields and the OK button.
Second will have the rest. Change your code accordingly. It should work. Otherwise you need to assign classes and group the controls into 2 sets.
What I mean by 2 sets is that "OK" button should validate the fields above it. And "Validate and Locate Me" button should validate only "Your address look like" text box. With jquery you can think of many ways how to group controls and validate them.
If this is not solving please provide the HTML as well or use http://jsfiddle.net/
-- edit --
The problem you have is when you press OK, it validates a field beneath it. Now what I feel is you have used a Required Field Validator without any grouping. Please specify a ValidationGroup property to separate the validation criteria of "OK" button and "Validate and Locate Me" button.
If you don't know how to use ValidationGroup let me know.
~ CJ
I am attempting to help a user log into their account using a custom WebBrowser control. I am trying to set the value of an input tag to the players username using the WebBrowser's InvokeScript function. However, my current solution is doing nothing but rendering a blank white page.
My current code looks like this (web is the name for my WebBrowser control):
web.Navigate(CurrentURL, null, #"<script type='text/javascript'>
function SetPlayerData(input) {
username.value = input;
return true;
}
</script>");
web.Navigated += (o, e) =>
{
web.IsScriptEnabled = true;
web.InvokeScript("SetPlayerData", #"test");
};
As mentioned, this does not work right now. I am attempting to do this on Windows Phone so a number of the example's I have found here and in other places will not work as I do not have access to the same functions.
How would I perform this successfully?
EDIT: Perhaps I was not clear, but I am working with Windows Phone, which has a limited API available meaning I do not have access to the Document property and a number of other functions. I do have access to InvokeScript, but not much more.
webBrowser1.Document.GetElementById("navbar_username").InnerText ="Tester";
webBrowser1.Document.GetElementById("navbar_password").InnerText = "xxxxxxxxxxx";
foreach (HtmlElement HtmlElement1 in webBrowser1.Document.Body.All)
{
if (HtmlElement1.GetAttribute("value") == "Log in")
{
HtmlElement1.InvokeMember("click");
break;
}
}
you may find more here : http://deltahacker.gr/2011/08/15/ftiakste-to-diko-sas-robot/
It's been along time since this question is posted but I think I'll post an answer to this so that it will help some one who came across the same situation
try
{
webBrowser1.Document.GetElementById("navbar_username").SetAttribute("value", "your user");
webBrowser1.Document.GetElementById("navbar_password").SetAttribute("value", "your pass");
webBrowser1.Document.GetElementById("Log in").InvokeMember("click");
}
catch { }