Develop Reference

How to pop up the modal div MVC

I want to pop up my div class that contains user at password text box but nothings happen and I test also my function if its running correctly that's why I put alert in my function. This my code bellow. I try so many solution and yet still not show my div. Can any give me a best solution regarding this matter or other way to pop up the web form without leaving my current page.
#model TBSWebApp.Models.User
#{
ViewBag.Title = "UserLogin";
Layout = "~/Layout/_webLayout.cshtml";
}
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button" class="btn btn-sm btn-default pull-left col-lg-11 button button4">
Sign-in
</button>
<div class="modal fade" tabindex="-1" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Satya Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="text" placeholder="Login Username" id="inputUserName" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Login Password" type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">
©
<script>document.write(new Date().toDateString());</script>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
//$(document).ready(function () {
$("#btnShowModal").click(function () {
alert("test");
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
// });
</script>
I already solved my problem
<script>
$(document).ready(function () {
$("#submitButton").click(function () {
if (($("#userNameTextBox").val() != "") && ($("#passwordTextBox").val() != ""))
$.ajax(
{
type: "POST", //HTTP POST Method
url: "UserLogin/UserLogin", // Controller/View
dataType: "text/html",
data:
{ //Passing data
UserID: $("#userNameTextBox").val(),
Password: $("#passwordTextBox").val(),
}
});
});
});
//$(document).ajaxStart(function () { $("#loadingImg").show(); });
//$(document).ajaxStop(function () { $("#loadingImg").hide(); });
</script>

Trying to enable show/hide feature in asp.net

I am trying to enable show/hide password feature. I am creating an asp.net web form using C#.
My code is as below,
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class show : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
if (CheckBox1.Checked == false)
{
TextBox1.TextMode = TextBoxMode.Password;
}
if (CheckBox1.Checked == true)
{
TextBox1.TextMode = TextBoxMode.SingleLine;
}
}
}
On mypage.aspx,
there is a checkbox whose autopostback property is true and a textbox whose textmode is password.
The expected result is:-
show password into text when checkbox is checked.
hide password when checkbox is unchecked.
The problem is :-
This code is working only once i.e. it is not being executed when checkbox is checked or unchecked again.
The textbox becomes blank.
Please help me soon.

You are losing value within TextBox because on selection change, the page loads again, you need to check whether its a postBack or first time load and set the textBox value.
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
string Password = TextBox1.Text;
TextBox1.Attributes.Add("value", Password);
}
}
Your problem will be solved. I've tested it.
Hope it helps!

There's exactly zero need to use a postback for this. An example using jQuery:
Markup:
<label>Password fields are just a UI convenience:</label>
<input type="password" id="password" value="super secret password" />
<label>
<input type="checkbox" id="toggle-password" /> Toggle
</label>
jQuery code:
$(function() {
$('#toggle-password').on('change', function(e) {
var _this = $(this);
if (_this.is(':checked')) {
$('#password').attr({
'type': 'text'
});
} else {
$('#password').attr({
'type': 'password'
});
}
})
});
A vanilla JS version:
var toggle = document.getElementById('toggle-password');
var textbox = document.getElementById('password');
toggle.addEventListener("click", function() {
var isChecked = toggle.checked;
if (isChecked) {
textbox.type = "text";
} else {
textbox.type = "password";
}
})

You can't set the text property of a Password Type field for security reasons.So another way to set the value after changing mode is
if (CheckBox1.Checked == false)
{
string pass = TextBox1.Text;
TextBox1.TextMode = TextBoxMode.Password;
TextBox1.Attributes.Add("value", pass);
}
if (CheckBox1.Checked)
{
TextBox1.TextMode = TextBoxMode.SingleLine;
}

<head runat="server">
<title>Show Hide Password</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#show_password').hover(function show() {
//Change the attribute to text
$('#txtCurrentpassword').attr('type', 'text');
$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
},
function () {
//Change the attribute back to password
$('#txtCurrentpassword').attr('type', 'password');
$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
});
//CheckBox Show Password
$('#ShowPassword').click(function () {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#show_password1').hover(function show() {
//Change the attribute to text
$('#txtNewPassword').attr('type', 'text');
$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
},
function () {
//Change the attribute back to password
$('#txtNewPassword').attr('type', 'password');
$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
});
//CheckBox Show Password
$('#ShowPassword').click(function () {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#show_password2').hover(function show() {
//Change the attribute to text
$('#txtConfirmPassword').attr('type', 'text');
$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
},
function () {
//Change the attribute back to password
$('#txtConfirmPassword').attr('type', 'password');
$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
});
//CheckBox Show Password
$('#ShowPassword').click(function () {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<br />
<br />
<br />
<div class="col-md-10">
<div class="" style="display: none" runat="server" id="divStatusMsg">
<asp:HiddenField ID="lblLoginUserId" runat="server" />
<asp:HiddenField ID="HidEncrptedPWD" runat="server" />
<asp:HiddenField ID="HidCurrEncrptedPWD" runat="server" />
<asp:HiddenField ID="hidError" runat="server" />
</div>
</div>
<h2>Update Password</h2>
<label class="col-form-label" style="color: red">(Min 10 Character including 1 Upper, 1 Lower Charcter, 1 Numeric & 1 Special Character)</label>
<div class="row">
<div class="col-md-6">
<label>User Name</label>
<div class="input-group">
<asp:TextBox ID="txtUserName" TextMode="SingleLine" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Current Password</label>
<div class="input-group">
<asp:TextBox ID="txtCurrentpassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-append">
<button id="show_password" class="btn btn-primary" type="button">
<span class="fa fa-eye-slash icon"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>New Password</label>
<div class="input-group">
<asp:TextBox ID="txtNewPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-append">
<button id="show_password1" class="btn btn-primary" type="button">
<span class="fa fa-eye-slash icon"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Re-Enter Password :</label>
<div class="input-group">
<asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-append">
<button id="show_password2" class="btn btn-primary" type="button">
<span class="fa fa-eye-slash icon"></span>
</button>
</div>
</div>
</div>
</div>
<br />
<!--Button Region-->
<div class="row">
<div class="col-lg-6 text-right" id="divDateSearch">
<div class="form-group">
<button type="button" id="btnSave" runat="server" class="btn btn-success btn-border btn-sm" onserverclick="btnSave_click">Change</button>
<button type="button" id="btnReset" runat="server" class="btn btn-default btn-border btn-sm" onserverclick="btnReset_click">Reset</button>
</div>
</div>
</div>
<!--Button Region-->
</div>
</form>
</body>

Asp.net Loading frame src from code behind

am having problem seting my frame src from code behind to use in my modal on button click.the frame src is getting the value but not displaying the page in the modal.
the modal code
<div class="modal fade " id="modal-info" role="dialog" data-keyboard="false" style="border: none; height: 500px;" >
<div class="modal-dialog col-md-push-1">
<!-- Modal content-->
<div class="modal-content" style="width: 700px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Set Leave</h4>
</div>
<div class="modal-body">
<iframe id="frm" runat="server" width="96.6%" style="border: none; height: 300px;"></iframe>
</div>
<div class="modal-footer">
<button type="button" id="Button2" class="btn btn-primary" data-dismiss="modal" runat="server" onserverclick="close_ServerClick">OK</button>
</div>
</div>
</div>
</div>
then in code behind on button click
frm.Src = "../Popups/staff_leave_calender.aspx";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "", "$('#modal-info').modal();", true);
it only works only if the frame src in set on page load
protected void Page_Load(object sender, EventArgs e)
{
frameinfo.Src = "../Popups/staff_leave_calender.aspx";
}
and i needed to do something like
Session["leaveid"] = StrID;
frameinfo.Src = "../Popups/staff_leave_calender.aspx?lvv=" + StrID;
will use Str ID in the page loaded in modal.what are other options or what else can i do.

use it from javascript full code
in your aspx file addd on top script as
<script type="text/javascript">
$(document).ready(function () {
/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = "../Popups/staff_leave_calender.aspx?lvv="+"<%= Session["leaveid"].ToString() %>";
/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
document.getElementById("<%= btnAlelrt.ClientID %>").on('hide.bs.modal', function () {
$("#frm").attr('src', '');
});
/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
document.getElementById("<%= btnAlelrt.ClientID %>").on('show.bs.modal', function () {
$("#frm").attr('src', url);
});
});
</script>
and in code behind file create the session leaveid if it is not exist already in your app

How to call user control method using jQuery AJAX in Asp.Net

Here is the acsx page.
I have two drop down in Bootstrap modal (State and City).
Based on the state selection, City dropdown should populate option.
I have created two methods in code behind for state FillStatedata() and for city getCitydata().
I need to call getCitydata() method on state selection change using jQuery AJAX and then bind the city data with city drop down.
I am getting Statename on state change but not able to executive getCitydata() method using statename as parameter.
Why?
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Registeration.ascx.cs" Inherits="WebApplication1.UserControl.Registeration" %>
<%# Import Namespace = "System.Web.Security" %>
<script src="~/scripts/jquery-1.10.2.js"></script>
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<!--jquery start here-->
<script>
$(document).ready(function () {
var getSelState;
$("#State").change(function () {
$.ajax({
type: "POST", //HTTP method
url: "UserControl/Registeration.ascx/getCitydata", //page/method name
data: alert("{'Statename':'" + $('#State').val() + "'}"), //json to represent argument
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg) { //handle the callback to handle response
//request was successful. so Retrieve the values in the response.
}
})
});
});
</script>
<input type="hidden" id="myhiddenField" name="myhiddenField" value="" ClientIDMode="Static" runat="server" />
<div class="form-horizontal" role="form" runat="server">
New User?
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Register</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="full-name" class="col-sm-2 control-label">FullName:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="full-name">
</div>
</div>
<div class="form-group">
<label for="User-Name" class="col-sm-2 control-label">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="User-Name">
</div>
</div>
<div class="form-group">
<label for="Create-Password" class="col-sm-2 control-label">Create Password:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Create-Password">
</div>
</div>
<div class="form-group">
<label for="confirm-Password" class="col-sm-2 control-label">Confirm Password:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Confirm-Password">
</div>
</div>
<div class="form-group">
<label for="Mobile-Number" class="col-sm-2 control-label">Mobile No:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Mobile-Number">
</div>
</div>
<div class="form-group">
<label for="State" class="col-sm-2 control-label">State:</label>
<div class="col-sm-10">
<select class="form-control" id="State" runat="server" ClientIDMode="Static">
</select>
</div>
</div>
<div class="form-group">
<label for="City" class="col-sm-2 control-label">City:</label>
<div class="col-lg-10">
<select class="form-control" id="City" runat="server" DataTextField="Cityname"
DataValueField="Cityname"></select>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>

First things first.
just use one library either min for prod or non min for dev.
data:{} should have to be an object or string value.
use one of it:
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
var getSelState;
$("#State").change(function() {
$.ajax({
type: "POST", //HTTP method
url: "UserControl/Registeration.ascx/getCitydata", //page/method name
data: "{'Statename':'" + this.value + "'}", //json to represent argument
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function(msg) { //handle the callback to handle response
console.log(msg);
}
});
});
});
</script>

function getCitydata()(obj) {
var ddlcity = document.getElementById('<%= ddlcity.ClientID %>');
ddlcity.innerHTML = '';
$.support.cors = true;
var serviceUrl = '/ashx/map/Address.ashx';
if (serviceUrl.indexOf('?') > -1)
serviceUrl += '&jsonp='
else
serviceUrl += '?jsonp='
serviceUrl += '?&type=1&StateId=';
serviceUrl += document.getElementById('<%= ddlState.ClientID%>').value;
$.ajax({
type: 'GET',
crossDomain: true,
async: false,
contentType: 'application/json; charset = utf-8',
url: serviceUrl,
data: '{}',
dataType: 'jsonp',
success: function (data) {
if (data != null && data.length > 0) {
$.map(data, function (item, index) {
var newListItem = document.createElement('option');
newListItem.text = item.City;
newListItem.value = item.CityId;
ddlcity.options.add(newListItem);
});
}
},
error: function (error) {
alert('error ' + error);
}
});
} // getCitydata()
To use this function you have to create one ashx file eg. Address.ashx file which consist method for getting the data from database

link button is not fireing but button is working

I'm having two pages inbox.aspx and compose.aspx
by ajax I'm loading the compose page inside a div in inbox page
so I'm facing a problem with form coz I'm using form in master page for inbox and in compose page
when I'm loading compose page i will have two nested form :(
i tried to omit it but the page won't load without it specially when i put asp control inside it
till now every things worked without an error but in compose page i have link button when i click it I'm having an error
(too much recursion,Empty string passed to getElementById())
and it is not firing , but asp:button tag is working perfectly
here is the code
inbox.aspx
<div class="row email">
<div id="list-toggle" class="col-md-2">
<ul class="list-unstyled">
<li class="composeBtn">
<a href="javascript:;" data-title="Compose" class="btn Compose btn-danger">Compose
</a>
</li>
</ul>
<ul class="emailNav nav nav-pills nav-stacked margin-bottom-10">
<li class="inbox active">
<a href="javascript:;" data-title="Inbox">
<i class="fa fa-inbox fa-fw"></i>Inbox (2)
</a>
</li>
<li class="starred">
<a href="javascript:;" data-title="Starred">
<i class="fa fa-star fa-fw"></i>Starred
</a>
</li>
<li class="sent">
<a href="javascript:;" data-title="Sent">
<i class="fa fa-mail-forward fa-fw"></i>Sent Items
</a>
</li>
<li class="draft">
<a href="javascript:;" data-title="Draft">
<i class="fa fa-files-o fa-fw"></i>Drafts
</a>
</li>
<li class="spam">
<a href="javascript:;" data-title="Spam">
<i class="fa fa-ban fa-fw"></i>Spam
</a>
</li>
<li class="trash">
<a href="javascript:;" data-title="Trash">
<i class="fa fa-trash-o fa-fw"></i>Trash
</a>
</li>
</ul>
</div>
<div class="col-md-10">
<div class="emailContent"></div>
</div>
</div>
javascript
var Inbox = function () {
var main_content = $('.emailContent');
/*-----------------------------------------------------------------------------------*/
/* Show single email view
/*-----------------------------------------------------------------------------------*/
var showSingleEmail = function (el, name, resetMenu) {
alert('');
var url = 'inbox_email.html';
main_content.html('');
toggleButton(el);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
main_content.html(res);
App.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
/*-----------------------------------------------------------------------------------*/
/* Show WYSIWYG Editor
/*-----------------------------------------------------------------------------------*/
var showWYSIWYG = function () {
alert('');
function initToolbarBootstrapBindings() {
var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
'Times New Roman', 'Verdana'],
fontTarget = $('[title=Font]').siblings('.dropdown-menu');
$.each(fonts, function (idx, fontName) {
fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
});
$('a[title]').tooltip({container:'body'});
$('.dropdown-menu input').click(function() {return false;})
.change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
.keydown('esc', function () {this.value='';$(this).change();});
$('[data-role=magic-overlay]').each(function () {
var overlay = $(this), target = $(overlay.data('target'));
overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
});
if ("onwebkitspeechchange" in document.createElement("input")) {
var editorOffset = $('#editor').offset();
$('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
} else {
$('#voiceBtn').hide();
}
};
function showErrorAlert (reason, detail) {
var msg='';
if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
else {
console.log("error uploading file", reason, detail);
}
$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
};
initToolbarBootstrapBindings();
$('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
}
/*-----------------------------------------------------------------------------------*/
/* Show Inbox view
/*-----------------------------------------------------------------------------------*/
var showInbox = function (el, name) {
alert('');
var url = 'inbox_main.html';
main_content.html('');
toggleButton(el);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
main_content.html(res);
App.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
/*-----------------------------------------------------------------------------------*/
/* Show email reply view
/*-----------------------------------------------------------------------------------*/
var showEmailReply = function (el) {
alert('');
var url = 'inbox_email_reply.html';
main_content.html('');
toggleButton(el);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
main_content.html(res);
handleCCControl();
handleCCBCC();
showWYSIWYG();
$('#editor').html($('#reply-content').html());
$('#reply-content').hide();
App.initUniform();
$('#editor').focus();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var showCompose = function (el) {
alert('');
var url = 'InboxCompose.aspx';
main_content.html('');
//toggleButton(el);
//
$.ajax({
type: "POST",
cache: false,
url: url,
//dataType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(res)
{
// $(".emailContent").load("InboxCompose.aspx #EmailComposeContent");
// toggleButton(el);
//$(".emailContent").load("InboxCompose.aspx");
main_content.html(res);
// showWYSIWYG();
// handleCCBCC();
// $('#editor').focus();
// App.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
// App.setPage("Teacher"); //Set current page
// App.setAction("ComposeEmail"); //Set current page
// App.init(); //Initialise plugins and elements
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var handleCCBCC = function () {
alert('');
$('.emailCompose .address').on('click', '.emailCC', function () {
handleCCControl();
});
$('.emailCompose .address').on('click', '.emailBCC', function () {
handleBCCControl();
});
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var handleCCControl = function () {
alert('');
var the = $('.emailCompose .address .emailCC');
var input = $('.emailCompose .inputCC');
the.hide();
input.show();
$('.close', input).click(function () {
input.hide();
the.show();
});
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var handleBCCControl = function () {
alert('');
var the = $('.emailCompose .address .emailBCC');
var input = $('.emailCompose .inputBCC');
the.hide();
input.show();
$('.close', input).click(function () {
input.hide();
the.show();
});
}
/*-----------------------------------------------------------------------------------*/
/* Toggle button
/*-----------------------------------------------------------------------------------*/
var toggleButton = function (el) {
alert('');
if (typeof el == 'undefined') {
return;
}
if (el.attr("disabled")) {
el.attr("disabled", false);
} else {
el.attr("disabled", true);
}
}
return {
init: function () {
alert('');
///* Show main inbox screen */
//$('.emailNav > li.inbox > a').click(function () {
// showInbox($(this), 'inbox');
//});
/* Show compose screen */
$('.email .composeBtn').on('click', 'a.Compose', function () {
showCompose($(this));
});
///* Show email reply screen */
//$('.email').on('click', '.replyBtn', function () {
// showEmailReply($(this));
//});
///* Show single email screen */
//$('.emailContent').on('click', '.viewEmail', function () {
// showSingleEmail($(this));
//});
///* Handle CC control links */
//$('.emailCompose .address').on('click', '.emailCC', function () {
// handleCCControl();
//});
///* Handle BCC control links */
//$('.emailCompose .address').on('click', '.emailBCC', function () {
// handleBCCControl();
//});
///* Show main inbox for the first load */
//$('.emailNav > li.inbox > a').click();
}
};
}();
Compose.aspx
<html>
<body>
<form id="form" runat="server" method="get">
<div id="EmailComposeContent" class="emailCompose form-horizontal">
<div class="emailField" >
<label class="control-label pl-none">
<span>To:</span>
</label>
<div class="fields col-md-11">
<asp:TextBox type="hidden" class="bigdrop js-data-example-ajax col-md-9 selectDynamic noborder" runat="server"
data-groupname="ToGroup" data-groupcontrol="ToGroupList"
ID="TextBoxToIDs" data-url="InboxCompose.aspx/GetXMLData" value="16340"></asp:TextBox>
<div class="col-md-3">
<ul id="ToGroupList" class="pagination pagination-sm mb-none mt-none">
<li id="ParentGroup" class="anchor Sections "
onclick="setSection(this);">
<span class='f-lightergray'><span data-original-title="Parent" data-title="P" class="text">P</span>
<input id='RadioParentGroup' name="ToGroup" checked="checked" type="radio" value="3" style="display: none" /></span>
</li>
<li id="StudentGroup" class="anchor Sections "
onclick="setSection(this);">
<span class='f-lightergray'><span data-original-title="Student" data-title="S" class="text">S</span>
<input id='RadioStudentGroup' name="ToGroup" type="radio" value="2" style="display: none" /></span>
</li>
<li id="AdviserGroup" class="anchor Sections "
onclick="setSection(this);">
<span class='f-lightergray'><span data-original-title="Adviser" data-title="A" class="text">A</span>
<input id='RadioAdviserGroup' name="ToGroup" type="radio" value="5" style="display: none" /></span>
</li>
</ul>
</div>
</div>
</div>
<div class="emailField">
<label class="control-label ">
Title:</label>
<div class="fields col-md-9">
<asp:TextBox CssClass="form-control" ID="TextBoxTitle" runat="server" type="text" ></asp:TextBox>
</div>
</div>
<div class="emailField">
<label class="control-label ">
Expiry Date:</label>
<div class="fields col-md-4">
<asp:TextBox CssClass="form-control datepicker" ID="TextBoxExpiryDate" runat="server" type="text" ></asp:TextBox>
</div>
<label class="control-label ">
Publish Date:</label>
<div class="fields col-md-4">
<asp:TextBox CssClass="form-control datepicker" ID="TextBoxPublishDate" runat="server" type="text" ></asp:TextBox>
</div>
</div>
<div class="emailField">
<div class="divide-20"></div>
<div id="alerts"></div>
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font"><i class="fa fa-font"></i><b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
<li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
<li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
<a class="btn btn-default" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
<a class="btn btn-default" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
<a class="btn btn-default" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
<a class="btn btn-default" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
<a class="btn btn-default" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-outdent"></i></a>
<a class="btn btn-default" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
<div class="dropdown-menu input-append">
<input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
<button class="btn btn-default" type="button">Add</button>
</div>
<a class="btn btn-default" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-scissors"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
<a class="btn btn-default" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
</div>
<input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
</div>
<div id="editor">
Write email here…
</div>
</div>
<div class="emailComposeButtons">
<button class="btn btn-default">Discard Draft</button>
<button class="btn btn-default"><i class="fa fa-paperclip"></i> Attach Files</button>
<asp:LinkButton type="submit" runat="server" OnClick="Send_Click" ID="SendBtn" CssClass="btn btn-info"><i class="fa fa-check-square-o"></i> Send</asp:LinkButton>
<asp:LinkButton runat="server" OnClick="Unnamed_Click" ID="sdzs">sfsfsfsf</asp:LinkButton>
<asp:Button ID="btn" OnClick="btn_Click" runat="server"/>
<i class="fa fa-check-square-o" onclick=" document.getElementById('btn').click();"></i>
</div></div>
</form>
</body>
</html>
c#
protected void btn_Click(object sender, EventArgs e)
{
BusinessLayer.EmailsController oEmailsController = new BusinessLayer.EmailsController();
oEmailsController.Title = TextBoxTitle.Text;
oEmailsController.PublishedDate = DateTime.Parse(TextBoxPublishDate.Text);
oEmailsController.ExpiryDate = DateTime.Parse(TextBoxExpiryDate.Text);
oEmailsController.FromGroupID = 1;
string toIDs = TextBoxToIDs.Text;
oEmailsController.FromID = Convert.ToInt32(System.Web.HttpContext.Current.User.Identity.Name.Split('$')[2]);
oEmailsController.SendStatus = (int)Enumeration.EmailSendStatus.send;
oEmailsController.ToLevelGroupID = (int)Enumeration.EmailSendStatus.send;
Response.Redirect("inbox.aspx", false);
}

Try Replacing href="javascript:;" to href="javascript:void(0);" in your tags