We Keep Coding

How to use the asp.net button to validate by jquery and then go to the behind code web form

I have an asp.net webform and I want to validate the textboxes first
Then after that (after success), go to the behind code cs
but now when I press the button it doesn't work
the jquery code:
...
<script type="text/javascript">
(function () {
'use strict';
window.addEventListener('load', function () {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
</script>
...
the aspx page:
...
<div class="form-row" style="z-index:1">
<div class="form-group col-md-4" style="z-index:1">
<label for="inputEmail4">Birth Date</label>
<asp:TextBox ID="Birth_Date" class="form-control" runat="server" style="text-align:center" ValidationGroup="check" required></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True" TargetControlID="Birth_Date" Format="dd/MM/yyyy">
</cc1:CalendarExtender>
<div class="invalid-feedback">
enter date
</div>
</div></div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputEmail4">phone number</label>
<asp:TextBox ID="Phone" class="form-control" runat="server" style="text-align:center; z-index:-1" ValidationGroup="check" pattern="^\d{10}$" required></asp:TextBox>
<div class="invalid-feedback">
enter phone
</div>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="signup" runat="server" CssClass="btn btn-outline-success my-2 my-sm-0">save</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
...
the cs code:
...
protected void signup_Click1(object sender, EventArgs e)
{
if(Page.IsValid)
{
Birth_Date.Text = "ُWelcome";
}
}
...
I have more textbox in my aspx page

<script type="text/javascript">
function ftn(){
'use strict';
window.addEventListener('load', function () {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
}
</script>
and add onclientclick property to asp:button
<asp:LinkButton ID="signup" onclientclick="ftn()" runat="server" CssClass="btn btn-outline-success my-2 my-sm-0">save</asp:LinkButton>

Webcam streaming and image capture in C# ASP.NET

I'm trying to develop a web server application where an external webcam streams video so the client can capture an image from the video stream with a capture button, and if its possible apply some filters with the Accord.NET framework... I just need the webcam stram and the image capture so I can convert it to bitmap... Do someone know how can I do that?
I tried with a jquery plugin but I dont know why it doesn't work. Heres the code I have in imageprocessing.aspx page:
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeBehind="imageprocessing.aspx.cs" Inherits="SpaceExplorationWeb.imageprocessing" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<title>Image Processing</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src='<%=ResolveUrl("~/Webcam_Plugin/jquery.webcam.js") %>' type="text/javascript"></script>
<script type="text/javascript">
var pageUrl = '<%=ResolveUrl("~/imageprocessing.aspx") %>';
$(function () {
jQuery("#webcam").webcam({
width: 320,
height: 240,
mode: "save",
swffile: '<%=ResolveUrl("~/Webcam_Plugin/jscam.swf") %>',
debug: function (type, status) {
$('#camStatus').append(type + ": " + status + '<br /><br />');
},
onSave: function (data) {
$.ajax({
type: "POST",
url: pageUrl + "/GetCapturedImage",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("[id*=imgCapture]").css("visibility", "visible");
$("[id*=imgCapture]").attr("src", r.d);
},
failure: function (response) {
alert(response.d);
}
});
},
onCapture: function () {
webcam.save(pageUrl);
}
});
});
function Capture() {
webcam.capture();
return false;
}
</script>
<!--/content -->
<form runat="server">
<div class="news">
<div class="w3lnews-grid">
<div class="col-md-6 col-sm-6 news-left" >
<div id="webcam" style="height:240px; width:320px; ">
</div>
</div>
<div class="col-md-6 col-sm-6 news-right">
<h4>Real-Time Processing</h4>
<asp:DropDownList id="ddlFilters" runat="server"></asp:DropDownList>
<div class="more">
<br /><br />
<!-- <a id="applyRr" onclick="filterApplyR" href="#" class="hvr-shutter-in-vertical" data-toggle="modal" data-target="#myModal">Apply<span class="glyphicon glyphicon-arrow-right"></span></a> -->
<span id="camStatus"></span>
<asp:Button ID="applyR" runat="server" class="hvr-shutter-in-vertical" Text="Apply" onClick="applyR_Click"/>
Restore<span class="glyphicon glyphicon-arrow-right"></span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="w3lnews-grid">
<div class="col-md-6 col-sm-6 news-right">
<h4>Image Processing</h4>
<asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>
<div class="more">
<br /><br />
<!-- <a id="applyRr" onclick="filterApplyR" href="#" class="hvr-shutter-in-vertical" data-toggle="modal" data-target="#myModal">Apply<span class="glyphicon glyphicon-arrow-right"></span></a> -->
<asp:Button ID="btnCapture" Text="Capture" class="hvr-shutter-in-vertical" runat="server" OnClientClick="return Capture()" />
<!-- <asp:Button ID="Button1" runat="server" class="hvr-shutter-in-vertical" Text="Capture" onClick="Button1_Click"/> -->
<asp:Button ID="btnFiltro" Text="Aplicar Filtro" class="hvr-shutter-in-vertical" runat="server" OnClick="btnFiltro_Click" />
</div>
</div>
<div class="col-md-6 col-sm-6 news-left">
<div class="wthree-almubimg">
<asp:Image ID="imgCapture" runat="server" height="438" style="align-content: center;" />
<!-- <img runat="server" id="img2" src="" alt=" " height="438" style="align-content: center;"/> -->
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</form>
<!-- //content -->
</asp:Content>

Azure Media Player in Bootstrap Modal Popuo

I am trying to stream a file from Azure Media Player within a Modal Popup.
The html for this popup is generated on the GridView's rowcommand to bind the relative .manifest file to the video source
protected string BuildRecordingPlayback(string videoURL)
{
StringBuilder Playback = new StringBuilder();
//FIRST CLOSE ATTEMPT
////Playback.Append("<video id=\"vid1\" class=\"azuremediaplayer amp-flush-skin\" autoplay controls width=\"250\" height=\"100\" data-setup='{\"nativeControlsForTouch\": false}'>");
//FIRST CLOSEST ATTEMPT
Playback.Append("<video id=\"vid1\" class=\"azuremediaplayer amp-flush-skin\" width=\"250\" height=\"100\" autoplay controls>");
Playback.Append("<source src=\"" + videoURL + "\" type=\"audio/mp3\" />");
Playback.Append("<p class=\"amp-no-js\">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p></video>");
return Playback.ToString();
}
Here is the relevant RowCommand event
if (e.CommandName == "InvoiceIncident")
{
divRecording.InnerHtml = BuildRecordingPlayback(drIncident["StreamingUrl"].ToString());
upRecording.Update();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "modalIncidentRec", "$('#modalIncidentRec').modal();", true);
}
As for the aspx page a standard modal popup
<div class="modal fade" id="modalIncidentRec" role="dialog" aria-labelledby="modalIncidentRec" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upRecording" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
<asp:Label ID="Label1" runat="server" Text=""></asp:Label></h4>
</div>
<div class="modal-body" id="modal-body rec">
<asp:Label ID="Label2" runat="server" Text=""></asp:Label>
<div id="divRecording" runat="server">
<%--video goes here--%>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
I have tried various other ways including
Creating the blank video tags and assigning the source in javascript as per this example changing source on html5 video tag
I have also tried the Documented version (which is filled with syntax errors) http://amp.azure.net/libs/amp/latest/docs/index.html#quick-start
The code for that below
<script type="text/javascript">
function AzureVideoTag(sourceSQL) {
var myOptions = {
"nativeControlsForTouch": false,
controls: true,
autoplay: true,
width: "640",
height: "400",
}
myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{
"src": sourceSQL,
"type": "audio/mp3"
}
]);
}
</script>
<script type="text/javascript">
function AssignVideoTag(sourceSQL) {
var video = document.getElementById('vid3');
var source = document.createElement('source');
source.setAttribute('src', sourceSQL);
video.appendChild(source);
video.play();
setTimeout(function () {
video.pause();
source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4');
video.load();
video.play();
}, 3000);
}
</script>
...
<div id="divRecording" runat="server">
<%--video goes here--%>
<video id="vid2" autoplay controls width="250" height="200">
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
<video id="vid3" width="250" height="200"></video>
Any assistance would be highly appreciated, I have been stuck on this for days now -_-

Empty WebSite without code-behind imitate MVC

I create a new WebSite: File -> New -> WebSite (empty WebSite without helping files and folders).
And I want to create the registration form (I use in Bootstrap and aspx files without code behind of C#).
When I click to the "Register" button I want that my all data what putted in text boxes passed to the C# file or to the SQL Server.How can I do this ?
I'm adding a some script and source file also
I'm very Thank you for help!
<script type="text/javascript">
$(function () {
var Page = (function () {
var $navArrows = $('#nav-arrows'),
slitslider = $('#slider').slitslider({
autoplay: true
}),
init = function () {
initEvents();
$("#register").validate({
rules: {
email: {
required: true,
email: true
},
username: {
minlength: 3, required: true
},
password: {minlength: 3, required: true},
password_confirm: {minlength: 3, required: true, equalTo: "#password"}
},
messages: {
username: {required: "You need to enter a Username."},
email: {required: "You need to enter an Email Address."},
pass1: {required: "You need to enter a Password."},
pass2: {required: "You need to enter your password again.", equalTo: "Your passwords don't match."},
country: {required: "You need to tell us where you live."},
tandc: {required: "You need to read and agree to the Terms and Conditions to use CGE."}
},
})
},
initEvents = function () {
$navArrows.children(':last').on('click', function () {
slitslider.next();
return false;
});
$navArrows.children(':first').on('click', function () {
slitslider.previous();
return false;
});
};
return { init: init };
})();
Page.init();
});
</script>
<fieldset class="registration-form">
<div class="control-group">
<!-- Username -->
<div class="controls">
<input type="text" id="username" name="username" placeholder="Username" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- E-mail -->
<div class="controls">
<input type="text" id="email" name="email" placeholder="E-mail" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Password-->
<div class="controls">
<input type="password" id="password" name="password" placeholder="Password" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Password -->
<div class="controls">
<input type="password" id="password_confirm" name="password_confirm" placeholder="Password (Confirm)"
class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Password -->
<div class="controls" style="line-height:20px;">
<input type="checkbox" checked="checked" id="newsletter"/> <span style="position:relative;top:3px;font-weight:bold;font-size:14px;">Newsletter</span>
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<input type="submit" id="send" class="btn btn-success btn-large btn-block" value="Register">
</div>
</div>
</fieldset>

Login view control with coustom log in

I have a asp.net webpage that contain a custom login control like this:
<div id="login-box-name" style="margin-top: 20px;">
User Name:</div>
<div id="login-box-field" style="margin-top: 20px;">
<asp:TextBox ID="username" runat="server" CssClass="form-login"></asp:TextBox>
</div>
<div id="login-box-name">
Password:</div>
<div id="login-box-field">
<asp:TextBox ID="password" runat="server" CssClass="form-login" TextMode="Password"></asp:TextBox>
</div>
<br />
<span class="login-box-options">
<input type="checkbox" name="1" value="1">
Remember Me</span>
<br />
<br />
<asp:ImageButton ID="loginbtn" runat="server" ImageUrl="images/login-btn.png"
onclick="loginbtn_Click" />
and it looks like this:
and on the "loginbtn_Click" :
if(Membership.ValidateUser(username.Text,password.Text))
{
var user = Membership.GetUser(username.Text);
var userid = user.ProviderUserKey;
Session["UserID"] = userid;
Response.Redirect("~/Default.aspx");
}
and the 'login view control' is like this:
<li>
<asp:LoginView ID="LoginView1" runat="server">
<RoleGroups>
<asp:RoleGroup Roles="Admins">
<ContentTemplate>
Control Panel
</ContentTemplate>
</asp:RoleGroup>
<asp:RoleGroup Roles="Users">
</asp:RoleGroup>
</RoleGroups>
</asp:LoginView>
</li>
but my problem is after the admin logs in the 'login view' control doesn't show the link named 'control panel' , is it because the custom control i made for the log in or i missed the e.Authenticated = true;..or something else??

You need to set Authorization cookie
FormsAuthentication.SetAuthCookie(username.Text, true);
Also on logout make sure you clear it:
FormsAuthentication.SignOut();
Session.Clear();
Session.Abandon();
Response.Redirect("~/Default.aspx");