Develop Reference

How can I Close a Boot Strap Modal Using C#

I am using a Modal for the first time and need some help I have this Modal
<div id="User_Modal" class ="container">
<div class ="row">
<div class="col-xs-12">
<div class="modal" id="viewUserModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enter You Pin To Continue</h4>
</div>
<div class="modal-body">
<div>
<label for="inputPinNumber">Pin Number</label>
<br />
<input class="form-control" placeholder="Enter Your Pin #" type="number" id="txtUserPin" runat="server"/>
</div>
</div>
<div class="modal-footer">
<asp:Button runat="server" CssClass="btn btn-primary" ID="btnUser" Text="Go" OnClick="btnUser_Click" />
<button class =" btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I open or call the Modal using this C# code on the btnUser_Click method with this C# code
ScriptManager.RegisterStartupScript(this, GetType(), "Show Modal", "$('#viewUserModal').modal('show');", true);
After the user enters the Pin number I want to get that value check it against my data and then close the Modal. I trying to do that with this code:
protected void btnUser_Click(object sender, EventArgs e)
{
string strUserPin = txtUserPin.Value.ToString();
if (strUserPin.Length > 0)
{
Session["SessionPinEntered"] = strUserPin;
string strUser = Email.GetUser(strUserPin);
bool bolIsManager = true;//CheckUser(strUser);
if (bolIsManager)
{
ScriptManager.RegisterStartupScript(this, GetType(), "Close Modal", "$('#viewUserModal').modal('close');", true);
pnlGrid.Visible = true;
}
else
{
}
}
}
The code runs but the Modal does not close and my hidden asp Panel is not shown.
Can someone explain why this is not working?
UPDATE:
I was able to figure out how to hide the Modal with this code change:
ScriptManager.RegisterStartupScript(this, GetType(), "Hide Modal", "$('#viewUserModal').modal('hide');", true);
But the C# code to make the asp Panel visible is still not working. In debug I can watch the code being called and steps over put does not run? What's going on with that and how can I get this fixed

The solution to the problem was to rebind the grid after I changed the panel from being hidden. Once I did that the radgrid shows the data

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');
}

How to call c# code behind function using bootstrap

How to call a function from code behind when the save changes is clicked by the user?
<div class="container">
<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Warning you're going to delete a data</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to continue?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes </button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
something like this
protected void deleterecord(){
}

In MVC you can do this by sending request to controller's action like
#Html.ActionLink("Save Changes", "DeleteRecord", null, new { #class="btn btn-primary" })
or
<input type="button" value="Save Changes" class="btn btn-primary"
onclick="location.href='#Url.Action("DeleteRecord", "MainController")'" />
and add action in controller
public ActionResult DeleteRecord()
{
this.deleterecord();
return View();
}
In Web Forms you can append event handler on button click event
<asp:Button
ID="Button_Save"
runat="server"
Text="Save Changes"
CssClass="btn btn-primary"
OnClick="Button_Click" />
or
<input type="button" value="Save Changes" runat="server" class="btn btn-primary"
onclick="Button_Click" />
and add code behind handler for this event
protected void Button_Click(object sender, EventArgs e)
{
this.deleterecord();
}

You can try this in your web form with a button called btnSave for example:
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="javascript:SaveWithParameter('Hello Michael')">Close</button>
<script type="text/javascript">
function SaveWithParameter(parameter)
{
__doPostBack('btnSave', parameter)
}
And in your code behind add something like this to read the value and operate upon it:
public void Page_Load(object sender, EventArgs e)
{
string parameter = Request["__EVENTARGUMENT"]; // parameter
// Request["__EVENTTARGET"]; // btnSave
}

Text property of textbox not getting set

When I click a link button within a ASP.NET listview, a modal popup activates that contains a textbox (lbCBody).
The textbox property does not get set, even though when I put a breakpoint at lbCBody.Text this is set.
Any ideas what is going on here?
protected void lvCalendar_ItemCommand(object sender, ListViewCommandEventArgs e)
{
ScriptManager.RegisterStartupScript(this, typeof(Page), "ajaxScript", "showCalendar();", true);
//cast the postback causing control respectively, LinkButton/Button:
System.Web.UI.WebControls.LinkButton btn = e.CommandSource as System.Web.UI.WebControls.LinkButton;
//get the ListViewItem:
ListViewItem item = btn.NamingContainer as ListViewItem;
HiddenField hfViewCalID = item.FindControl("hfViewCalTodayID") as HiddenField;
int sID = Convert.ToInt32(hfViewCalID.Value);
UserCalendar selC = context.UserCalendars.FirstOrDefault(a => a.ID == sID);
//lbCHeading.Text = selC.EventName;
lbCBody.Text = selC.Description;
}
Modal Popup
<div id="viewCalendarModel" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
<asp:HiddenField ID="hfViewCal" ClientIDMode="Static" runat="server" />
<div class="modal-header">
<h3>
<asp:Label ID="lbCHeading" runat="server"></asp:Label></h3>
</div>
<div class="modal-body">
<div class="control-group">
<div class="controls controls-row">
<asp:TextBox ID="lbCBody" runat="server"></asp:TextBox>
</div>
</div>
</div>
<%--<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>--%>
</div>

This was caused by the calendar being inside an update panel, but the modal popup being outside the update panel.

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".