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>

jQuery/asp.net - Enable/Disable button only after user enters text in the textboxes and selects a value from the dropdown list

This is the aspx code for the controls The feature that I want over here is that when I enter the value for the textboxes and select a dropdown value.. only after that should the button be enabled else the button should be disabled.
<div id="div1" class="panel-collapse collapse in">
<div class="form-inline">
<div class="form-group">
<label class="control-label">Part Number:</label>
<asp:TextBox type="text" class="form-control" ID="itemOne" runat="server" />
</div>
<div class="form-group">
<label>Name:</label>
<asp:TextBox type="text" class="form-control" ID="itemTwo" runat="server" />
</div>
<div class="form-group">
<label>Price:</label>
<asp:TextBox type="text" class="form-control" ID="itemThree" runat="server" />
</div>
<div class="form-group">
<label>Weight:</label>
<asp:TextBox type="text" class="form-control" ID="itemFour" runat="server" Style="width: 100px" />
</div>
<div class="form-group">
<label>Quantity:</label>
<asp:TextBox type="text" class="form-control" ID="miscItemQuantity" runat="server" Style="width: 80px" />
</div>
<div class="form-group">
<asp:DropDownList ID="dropdownList" CssClass="form-control" runat="server" Width="150" />
<%-- Items are added dynamically from the codebehind --%>
</div>
<asp:Button runat="server" ID="addItem" type="submit" Text="Add Item" CssClass="btn btn-primary pull-right"></asp:Button>
</div>
</div>
This is the jQuery code that I have tried to enable and disable the button with just one textbox
$(document).ready(function () {
$("#<%=itemOne.ClientID%>").keyup(function () {
if ($(this).val().length > 2) {
$("#<%=addItem.ClientID%>").removeAttr('disabled');
}
else {
$("#<%=addItem.ClientID%>").attr('disabled', 'disabled');
}
}).trigger('keyup');
});
I will be very glad to receive any solutions.

I think you are looking for something like this. First add a listener to each TextBox and DropDownList in div1 to check for changes. Then validate all controls withing the div for the correct values and set the button visibility accordingly.
<script type="text/javascript">
$(document).ready(function () {
$("#div1 input[type='text']").keyup(function () {
checkValues();
});
$("#div1 select").change(function () {
checkValues();
});
checkValues()
});
function checkValues() {
var isValid = true;
$("#div1 input[type='text']").each(function () {
if ($(this).val().length < 2) {
isValid = false;
}
});
$("#div1 select").each(function () {
if ($(this).prop('selectedIndex') === 0) {
isValid = false;
}
});
if (isValid) {
$("#<%=addItem.ClientID%>").removeAttr('disabled');
}
else {
$("#<%=addItem.ClientID%>").attr('disabled', 'disabled');
}
}
</script>

CSS alignment code and displaying data on next pane

when I click on option 1 the data should be visible in next pane and vice versa
Whenever the user clicks on Option1 it should show data to next pane as given in the figure.
so for that what shall be done?

Considering the Options as buttons
asp code
<asp:Button ID="Option1Btn" class="btn" runat="server" OnClick="showDivContent1" />
<asp:Button ID="Option2Btn" class="btn" runat="server" OnClick="showDivContent2" />
<div runat="server" id="option1Content" Visible="false">Some Content </div>
<div runat="server" id="option2Content" Visible="false">Some Content </div>
Backend Code
protected void showDivContent1(object sender, EventArgs e)
{
Option1Btn.Visible = false;
option1Content.Visible = true;
}
Likewise, you can do for the 2nd option as well
protected void showDivContent2(object sender, EventArgs e)
{
Option2Btn.Visible = false;
option2Content.Visible = true;
}

HTML
<div class="left-pan" style="float: left; border-right: 1px solid;">
<div class="Option-1" onclick="Option1Click();">
Option1
</div>
<div class="Option-2" onclick="Option2Click();">
Option2
</div>
</div>
<div class="right-pan">
<div class="showOption1" style="display: none;">
This is Option 1
</div>
<div class="showOption2" style="display: none;">
This is Option 2
</div>
</div>
Javascript :
function Option1Click() {
$(".showOption1").css('display', 'block');
$(".showOption2").css('display', 'none');
}
function Option2Click() {
$(".showOption2").css('display', 'block');
$(".showOption1").css('display', 'none');
}

Radio button value is null

I'm trying to get the value of the radio button clicked but so far the value is null. The code below has a couple of things going on:
1) when the button is clicked it should move the radio buttons to the left.
2) I need to the get value of which radio button is clicked
The first part works but I can't get the second part. This is my code:
<script>
$(document).ready(function(){
$("#form1").click(function(){
$("#list_of_btns").animate({left: '-150px'});
});
});
</script>
//this is the form for radio button...it must be centered to middle of the page
<div id="list_of_btns" style="padding-top: 80px; position:fixed;">
<div class="row" style="position:fixed;">
<div class="col-md-8 col-md-offset-4" style="position:fixed;">
<div class="list-group" style="position:fixed;">
<form role="radio_button_form" style="position:fixed;">
<div class="radio">
<label><input type="radio" value="male" name="method">male</label>
</div>
<div class="radio">
<label><input type="radio" value="female" name="method">female</label>
</div>
</form>
</div>
</div>
</div>
</div>
//this is the enter button.
<div class="row" style="padding-top: 80px; position:relative;">
<div class="col-md-8 col-md-offset-16" style="position:relative;">
<form id="form1" runat="server" style="position:relative;">
<asp:LinkButton class="btn btn-info" ID="getStarted_btn" runat="server" OnClick="btn_clicked" Text="Enter" />
</form>
</div>
</div>
This is where I am trying to get value of the radio button, in my c# code:
public void btn_clicked (object sender, EventArgs args)
{
Console.Out.WriteLine ("sdsfdsfdfsdf");
if (Request.Form["method"] != null)
{
string selectedGender = Request.Form["method"].ToString();
Console.Out.WriteLine (selectedGender);
}
}
Does anybody have any idea on what I'm doing wrong or is there a better way in achieving this?

I have edited your code and this is working.Plz check
<body>
<form id="form1" runat="server" style="position: relative;">
<div id="list_of_btns" style="padding-top: 80px; position: fixed;">
<div class="row" style="position: absolute;">
<div class="col-md-8 col-md-offset-4" style="position: fixed;">
<div class="list-group" style="position: fixed;">
<div class="radio">
<label>
<input type="radio" value="male" name="method">male</label>
</div>
<div class="radio">
<label>
<input type="radio" value="female" name="method">female</label>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding-top: 80px; position: relative;">
<div style="position: relative;">
<asp:LinkButton class="btn btn-info" ID="getStarted_btn" runat="server" OnClick="btn_clicked" Text="Enter" />
</div>
</div>
</form>
Enclose the whole content inside single Form..

Selected Index Changed event not firing both Autopostback property

In my Dropdownlist Selected index change event not firing.Here i use auto post back true &
View state also true.But Selected Index Changed Event not firing
My Code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="AdminEagleViewLogin.aspx.cs" Inherits="AdminEagleViewLogin" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style>
body{padding-top:20px;}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="row">
User : <asp:DropDownList ID="drpusr" runat="server" Visible="true" OnSelectedIndexChanged="drpusr_SelectedIndexChanged" AutoPostBack="true" EnableViewState="true" ></asp:DropDownList>
Password: <asp:Label ID="lbluserpw" runat="server"></asp:Label>
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please sign in</h3>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form">
<fieldset>
<div class="form-group">
<asp:TextBox ID="txtusr" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<asp:TextBox ID="txtpw" runat="server" TextMode="Password"></asp:TextBox>
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me"> Remember Me
</label>
</div>
<asp:CheckBox ID="chkremember" runat="server" Visible="false" class="remchkbox" />
<asp:Button ID="submit" runat="server" class="btn btn-lg btn-success btn-block" Text="Submit" OnClick="submit_Click" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
ServerSide
User bind to Dropdown is working.
public partial class AdminEagleViewLogin : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
BindUsers();
//lbluserpw.Text = Membership.Provider.GetPassword(drpusr.SelectedValue, String.Empty);
}
protected void submit_Click(object sender, EventArgs e)
{
if (Membership.ValidateUser(txtusr.Text, txtpw.Text))
{
FormsAuthentication.SetAuthCookie(txtusr.Text, chkremember.Checked);
string[] CurrentUserRole = Roles.GetRolesForUser(txtusr.Text);
var admin = "Administrator";
var manager = "Manager";
var user = "User";
if (CurrentUserRole.Contains(admin))
{
Response.Redirect("Administrator.aspx");
}
else if (CurrentUserRole.Contains(manager))
{
Response.Redirect("Manager.aspx");
}
else
{
Response.Redirect("UserPage.aspx");
}
}
else
{
Response.Redirect("AdminEagleViewLogin.aspx");
}
}
protected void BindUsers()
{
DataAccess da = new DataAccess();
drpusr.DataSource = da.GetUsers();
drpusr.DataTextField = "UserName";
drpusr.DataValueField = "UserId";
drpusr.DataBind();
drpusr.Items.Insert(0, new ListItem("-- Select User --", "0"));
drpusr.Items.RemoveAt(1);
}
protected void drpusr_SelectedIndexChanged(object sender, EventArgs e)
{
lbluserpw.Text = Membership.Provider.GetPassword(drpusr.SelectedValue, String.Empty);
}
}

Try this:
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindUsers();
}
}

You shouldn't put a form element inside another form:
<form accept-charset="UTF-8" role="form">
<fieldset>
...
<asp:Button ID="submit" runat="server" class="btn btn-lg btn-success btn-block" Text="Submit" OnClick="submit_Click" />
</fieldset>
</form>
remove the inner form.
[Update]
Another problem is the "ID" property of the button.
change it to something else, other than "submit".