How to add and validate google captche in dnn page - dotnetnuke

I have work on dnn 7.1 .I have add the Google catcha in DNN page.
see reference from this site
code for add captcha in asp.net
with the help of this reference i have add the captcha in dnn page. but in the captcha validation is not work. anything write in the text box. not show the error message. and form submit successfully . Any one help me what can i do for validation.
code are given below
<%--<%# Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>--%>
<%# Control Language="C#" ClassName="Admin.ContactUs" Inherits="DotNetNuke.Entities.Modules.PortalModuleBase" %>
<%# Import Namespace="System" %>
<%# Import Namespace="System.Collections" %>
<%# Import Namespace="System.Configuration" %>
<%# Import Namespace="System.Data" %>
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
SendMailTest();
}
else
{
}
}
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<div class="contactusform-left commonclass lF">
<asp:Label ID="lblmsg" runat="server" Text=""></asp:Label>
/* Code for textbox, dropdowm */
</div>
<div class="contactusform-right commonclass lF">
<div class="contactusform-set-textarea contactusform-set" style="height:150px;">
<label class="lF">
Captcha <span>*</span></label>
<div style="clear:left;width:100%;height:100px;">
<recaptcha:RecaptchaControl ID="recaptcha" runat="server" PublicKey="6LdCxeYSAAAAAAP-uIGWnsZHeW7rn8rzeeblc5g"
PrivateKey="6LdCxeYSAAAAAFvnxCiaN_7vkHp-vaVRRYb9yVF" />
<asp:Label Visible=false ID="lblResult" runat="server" />
</div>
</div>
<div style="clear:both;"></div>
<div class="contactusform-set " style="margin-top:10px;">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"
ValidationGroup="ContactUsValidate" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Style="color: #8D8D8D; cursor: pointer;
float: right; font-weight: bold; height: 34px; margin-right: 5px; text-transform: uppercase;
width: 120px;" />
</div>
</div>

Without sample code it will be very hard to give you a valid answer here, but the most common cause of it would be if you are using a "ValidationGroup" on the button or other controls, but not on the CAPTCHA.
Otherwise, we need to see your specific code.

Do you know that DotNetNuke provides the Telerik captcha control? You can use it exactly as described here: http://demos.telerik.com/aspnet-ajax/captcha/examples/overview/defaultcs.aspx but you just need to replace radCaptcha by dnnCaptcha in your code and add these two lines at the beginning of your file:
<%# Register TagPrefix="dnn" Namespace="DotNetNuke.UI.WebControls" Assembly="DotNetNuke" %>
<%# Register TagPrefix="dnn" Namespace="DotNetNuke.Web.UI.WebControls" Assembly="DotNetNuke.Web" %>

Related

Is it possible to populate Episerver.Forms field with data

I'm using Episerver 10 together with Episerver.Forms addon. I created a form which contains several fields. I wonder if there's an option to prepopulate those fields with data.
Example:
A field for email address. If user is logged in I want this field to has email from user profile set as a value.
I created my own custom field for email and I tried to use SetDefaultValues method but apparently it's meant for something different.
EDIT:
My Custom form field:
public class PostalCodeFormField : TextboxElementBlock
{
public override void SetDefaultValues(ContentType contentType)
{
base.SetDefaultValues(contentType);
base.PredefinedValue = "Hello world";
}
}
Template for that field:
#model My.Valid.Namespace.PostalCodeFormField
<div class="Form__Element FormTextbox" data-epiforms-element-name="#Model.FormElement.ElementName">
<label for="#Model.FormElement.Guid">
My label
</label>
<p>#Model.PredefinedValue</p>
<input type="text" name="#Model.FormElement.ElementName" class="FormTextbox__Input" id="#Model.FormElement.Guid" value="#Model.PredefinedValue" />
<span data-epiforms-linked-name="#Model.FormElement.ElementName" class="Form__Element__ValidationError" style="display: none;">*</span>
</div>
Thing is #Model.PredefinedValue is empty like SetDefaultValues was never called
If you don't want to create a custom element (but i think that is the best solution) you can change the view of the element. It should be located under: \modules \ _protected \ EPiServer.Forms \ Views \ ElementBlocks
For your email example i would change the TextboxElementBlock.ascx into something like this:
<%# import namespace="System.Web.Mvc" %>
<%# import namespace="EPiServer.Web.Mvc.Html" %>
<%# import namespace="EPiServer.Forms.Core.Models" %>
<%# import namespace="EPiServer.Forms.Helpers" %>
<%# import namespace="EPiServer.Forms.Implementation.Elements" %>
<%# Import Namespace="EPiServer.Personalization" %>
<%# control language="C#" inherits="ViewUserControl<TextboxElementBlock>" %>
<%
var formElement = Model.FormElement;
var labelText = Model.Label;
var isEmailField = formElement.Validators.Any(x => x is EPiServer.Forms.Implementation.Validation.EmailValidator);
var defaultValue = Model.GetDefaultValue();
if (isEmailField)
{
defaultValue = EPiServerProfile.Current.Email;
}
%>
<div class="Form__Element FormTextbox <%: Model.GetValidationCssClasses() %>" data-epiforms-element-name="<%: formElement.ElementName %>">
<label for="<%: formElement.Guid %>" class="Form__Element__Caption"><%: labelText %></label>
<input name="<%: formElement.ElementName %>" id="<%: formElement.Guid %>" type="text" class="FormTextbox__Input"
placeholder="<%: Model.PlaceHolder %>" value="<%: defaultValue %>" <%: Html.Raw(Model.AttributesString) %> />
<span data-epiforms-linked-name="<%: formElement.ElementName %>" class="Form__Element__ValidationError" style="display: none;">*</span>
<%= Model.RenderDataList() %>
</div>
Edit:
Didn't see you edit the question. Remove the "base" from base.PredefinedValue in SetDefaultValues and it should work.
public class PostalCodeFormField : TextboxElementBlock
{
public override void SetDefaultValues(ContentType contentType)
{
base.SetDefaultValues(contentType);
PredefinedValue = "Hello world";
}
}
For setting a "dynamic value you can add a new property to the class (getting current user email here):
public virtual string UserEmail => EPiServerProfile.Current != null ? EPiServerProfile.Current.Email : string.Empty;
And update the input in the view:
<input type="text" name="#Model.FormElement.ElementName" class="FormTextbox__Input" id="#Model.FormElement.Guid" value="#Model.UserEmail" />
It is, but not out of the box. We typically solve this by creating custom elements.
David Knipe wrote an excellent blog on this, https://www.david-tec.com/2016/01/building-out-a-custom-form-element-with-the-new-episerver-forms/
Check the form model
public override void SetDefaultValues(ContentType contentType)
{
base.SetDefaultValues(contentType);
// override
base.PredefinedValue = "Hello world";
}
The new Episerver Forms has Autofill API to help you do exactly that job.

overflow-y not working with ng-if in Internet Explorer with Angular

I am using Angular 1.2.16 and testing with IE 11.
In my app, in settings.html, I have the following section:
<section class='scrollable'>
<section class='hbox stretch'>
<aside class="aside-md bg-white b-r" data-ng-controller='RecipientsCtrl'>
<div data-ng-if='inputMode' data-ng-include="'partials/recipient-form.html'"/>
</section>
</section>
where 'scrollable' class is defined as:
.scrollable {
overflow-x: hidden;
overflow-y: auto;
}
and recipient.form:
<div class="panel-body">
<form name='rform' ng-submit='addRecipient(rform)' novalidate='novalidate' role="form">
<label>Recipient's Name</label>
<input type="text" class="form-control" ng-model='recipient.name' name="name" placeholder="Enter name" required='', data-mongoose-error=''/>
....
<button type="submit" class="btn btn-sm btn-success">Add</button>
</form>
</div>
A button click puts the controller in 'inputMode'. This works fine with Chrome, Safari and Firefox. In IE, when you click the button to get into the 'inputMode' it seems like nothing happens, but when you resize the window a bit you see the form.
The following makes it work in IE:
Remove the 'scrollable' class from the section (not an option as I need that)
Display the form directly without the 'inputMode' condition (not an option)
I tried ng-show as well at no avail.
Any ideas?
Thanks.
Changing the css seems to have fixed it:
.scrollable {
overflow-x: hidden;
overflow-y: auto;
min-height: 100%;
}

Playing video using Silverlight

Here I am new to Silverlight and I have to implement a video player in asp.net with C# , I found some article about video player and media player. I am implementing according the tutorials but the that is not working here I am sending my code please find out what is problem. Tell me what is the difference between media element and media player in Silverlight?
here is the code of .aspx page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
<%# Register assembly="AjaxControlToolkit" amespace="AjaxControlToolkit" tagprefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>SILVERLIGHT MEDIA PLAYER | DEMO</title>
</head>
<body>
<form id="form1" runat="server">
<div id="xx" runat="server"></div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<div style="float:left">
<asp:DropDownList ID="cmbSkins" runat="server"
onselectedindexchanged="cmbSkins_SelectedIndexChanged" />
</div>
<div><h3>SELECT PLAYER STYLE</h3></div>
</div>
<asp:MediaPlayer ID="MediaPlayer1" runat="server"
Width="600px"
Height="440px"
PlaceholderSource="http://www.webinfocentral.com/VIDEO/JJ2008/ImgMain.JPG">
</asp:MediaPlayer>
<hr />
<hr />
</form>
</body>
</html>
and this the code behind page:
public partial class _Default : System.Web.UI.Page
{
protected enum MediaPlayerSkins
{
AudioGray,
Basic,
Classic,
Console,
Expression,
Futuristic,
Professional,
Simple
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MediaPlayer1.AutoPlay = true;
MediaPlayer1.ScaleMode = System.Web.UI.SilverlightControls.ScaleMode.Zoom;
cmbSkins.Items.Add(MediaPlayerSkins.Classic.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Console.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Expression.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Futuristic.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Professional.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.AudioGray.ToString());
cmbSkins.Items.Add(MediaPlayerSkins.Simple.ToString());
cmbSkins.AutoPostBack = true;
cmbSkins.SelectedIndex = 4;
MediaPlayer1.MediaSource = Server.MapPath("~/") + "Wildlife.wmv";
xx.InnerHtml = Server.MapPath("~/") + "Wildlife.wmv";
MediaPlayer1.MediaSkinSource = "~/MediaPlayerSkins/" + cmbSkins.SelectedValue + ".xaml";
}
}
protected void cmbSkins_SelectedIndexChanged(object sender, EventArgs e)
{
MediaPlayer1.MediaSkinSource = "~/MediaPlayerSkins/" + cmbSkins.SelectedValue + ".xaml";
}
}
I don't know anything about Silverlight and this is done using a article, I only changed the source of player nothing else and this is not working.
One question is arising in my mind that which is the best for playing video flash player or this one while we have a low bandwidth internet connection. Please tell me some useful solution?
Thanks
To answer this part of your question:
tell me what is the difference between media element and media player in silver light.
The MediaPlayer element you've used is an ASP.NET control which consists of a basic Silverlight player (using Silveright 1.0 I think). All you have to do is point it at the video file and it will play. The MediaPlayer gives you all the basic controls for playing media (play/pause, etc).
A MediaElement is a Silverlight type used in a Silverlight application, not an ASP.NET application like the MediaPlayer. MediaElements are used in XAML (i.e. Silverlight markup) to represent, well, media elements. The MediaElement doesn't give you controls for playing the media, it just renders it (whether audio or visual). You can use other elements in XAML to control the MediaElement, e.g. if you wanted a play/pause button, you could create another element to do that.
guys i found why it was not working i am missing the proper source path that should be "~/MediaFile.wmv" instead of server.mappath(....).

Silverlight module doesnt load with firefox (ASP.NET tag)

I am using IE and firefox, this is the default statement that was created using a default asp.net tag.
This works perfectly fine with IE but with firefox, nothing is rendered.
<%# Page Title="" Language="C#" MasterPageFile="~/Core.Master" AutoEventWireup="true"
CodeBehind="photoalbum.aspx.cs" Inherits="mkuk.photoalbum" %>
<%# Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentLeft" runat="server">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/Static/silverlight/PhotoAlbum.xap"
MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentRight" runat="server">
</asp:Content>
change Width="100%" Height="100%" to Width=600px Height= 800px. FF and IE7/IE8 cause problem with 100% values.
check this out -
Any chance you installed FireFox after installing the Silverlight plugin? Maybe you could uninstall Silverlight (plugin only) and reinstall. You could also try loading this page in FireFox on multiple machines to see if its really a FireFox issue (shouldn't be).

Silverlight app and an iframe co-existing on the same page

this should be simple...could someone provide me a simple code sample that has an aspx page hosting both a silverlight app (consisting of, say a button) and an iframe (pointing to, say stackoverflow.com). The silverlight app and iframe could be in separate div's, the same div, whatever.
Everything I've tried so far leaves me with a page that has no silverlight control rendered on it.
EDIT: At the request for what my xaml looks like (Plus I should point out that my controls render just fine if I comment out the iframe.)
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Background="Pink">
<Button Content="Click Me!"/>
</Grid>
</UserControl>
Thats it. Just for good measure here is my aspx page...
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div style="height:100%;">
<asp:Silverlight ID="Silverlight1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" MinimumVersion="2.0.30523" Width="400" Height="400" />
</div>
<iframe src ="http://www.google.com" width="400"/>
</form>
Hmm, sound a bit odd, a quick google gave me this top result which talks about using an Iframe and Silverlight on the same page, without problems.
Also a quick test with the following code:
<%# Page Language="C#" AutoEventWireup="true" %>
<%# Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head runat="server">
<title>Test Page</title>
</head>
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/Test.xap" MinimumVersion="2.0.30523" Width="400" Height="400" />
</div>
<iframe src ="http://www.google.com" width="400"></iframe>
</form>
</body>
</html>
Renders out both Silverlight and the Iframe quite happily.
What code were you using when trying and it didn't work?
What does your XAML look like?
It could be something along the lines of the size set on the usercontrol in XAML, doesn't match the size set on the plugin on the aspx page. In that case, your button might be there but just not in the viewable area... Try checking the size of things, make sure they match.
A quick test you could do is to change the background color of your root element in the XAML and see if anything happen on the page.
Also, does the silverlight work if you remove the Iframe but leave everything else as is?
Sorry if this a too simple suggestion but without knowing your experience level with XAML...
Funny enough, I just solved this issue by ensuring that I specify the iframe dimensions by pixel.

Resources