I have a multi step form on a web page using ASP.NET. I have two features on a form I would like to use. Autosuggest on a textbox which works fine. Also when you click on a button I want it to show a modal which shows data from a gridview. Everytime I try and click on the button, the modal does not appear.
I have a button which calls a method in the back end this calls the gridview bind method and ClientScript.RegisterStartupScript to Open the Modal. When I debug it steps through but nothing happens. And no errors in the console.
I have an update panel wrapped around my button to prevent auto-postback on the button click as I dont want the page to refresh and start the form from the beginning again.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Create Template</li>
<li>Add Recipients</li>
<li>Select Content</li>
<li>Add Style</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create new Template</h2>
<h3 class="fs-subtitle">Provide following information</h3>
<div id="applicationselectdiv" runat="server">
</div>
<input type="text" name="tempname" placeholder="Template Name"/>
<input type="text" name="subname" placeholder="Subject Line"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Add Recipients</h2>
<h3 class="fs-subtitle">Add multiple recipients</h3>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="viewrecpbutton" runat="server" class="btn btn-primary" Text="View Recipients" OnClick="ViewRecipient_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<div id="recipienttypediv" runat="server">
</div>
<input type="text" id="SearchInput" class="autosuggest" name="initialname" placeholder="Initials"/>
<div id="subteamdiv" runat="server">
</div>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="addbtn" runat="server" Text="Add" OnClick="AddRecipient_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Recipients</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" runat="server">
<asp:GridView ID="gvCurrentRecipients" runat="server" AutoGenerateColumns="true">
</asp:GridView>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Select Content</h2>
<h3 class="fs-subtitle">This is what will appear in the email</h3>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Add Style</h2>
<h3 class="fs-subtitle">Colour scheme</h3>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="submit" name="submit" class="submit action-button" value="Submit"/>
</fieldset>
</div>
</div>
</div>
</form>
protected void ViewRecipient_Click(object sender, EventArgs e)
{
GetgvRecipients();
ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
}
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
Order of my libraries:
<script src="Scripts/jquery-3.0.0.js"></script>
<script src="Scripts/jquery-ui-1.12.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"/>
<!-- Custom styles for this template-->
<link href="css/cr-admin.css" rel="stylesheet"/>
<link href="NewTemplate.css" rel="stylesheet" />
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<script src="NewTemplate.js"></script>
Related
i am trying to render partial view(reusable) in order to delete customer with cus_id within table(list of Customers)
but every time i submit form only first row id is submitting please tell me correct solution.
#foreach (var item in Model)
{
....
<td>
#await Html.PartialAsync("~/Views/Shared/Modal.cshtml", item.cus_id)
#*<partial name="~/Views/Shared/Modal.cshtml" for="#item.cus_id"/>*#
</td>
}
Here is My View
#model int
<span>
<i class="fas fa-trash-alt" title="Delete"></i>
</span>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header ">
<h4 class="modal-title">Warning</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form asp-action="Delete" asp-route-id="#Model" method="post">
<span>
<span><b>Are you sure you want to delete?</b></span>
<button type="submit" class="btn btn-danger">Yes</button>
No
</span>
</form>
</div>
</div>
</div>
</div>
The problem is in your partial view.
<i class="fas fa-trash-alt" title="Delete"></i>
You used the id selector, it will always select the first modal which id is "myModel". While all the modals' ids are the same. So, every time you submit, only the first row id is submitting.
You can apply the cus_id to the modal id to distinguish which modal should be opened.
<span>
<i class="fas fa-trash-alt" title="Delete"></i>
</span>
<div id="myModal_#Model" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header ">
<h4 class="modal-title">Warning</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form asp-action="Delete" asp-route-id="#Model" method="post">
<span>
<span><b>Are you sure you want to delete #Model?</b></span>
<button type="submit" class="btn btn-danger">Yes</button>
No
</span>
</form>
</div>
</div>
</div>
This modal is not popping up at all.the modal should pop up on a failed login attempt.
I have uploaded the design and code behind code for reference.
this is design page code.
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<title>SFPL's AMS</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/assets/css/form-elements.css">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="shortcut icon" href="/assets/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/assets/ico/apple-touch-icon-57-precomposed.png">
<script src="/assets/js/jquery-1.11.1.min.js"></script>
<script src="/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/js/jquery.backstretch.min.js"></script>
<script src="/assets/js/scripts.js"></script>
<script type="text/javascript">
function ShowPopup() {
$("#btnShowPopup").click();
}
</script>
</head>
<body >
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text">
<h1><strong>पदोन्नति</strong></h1>
<div class="description">
<p>
Login Form Pre-Design Phase Starts Here.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>xxxxxxx</h3>
<p>Enter your username and password to log on:</p>
</div>
<div class="form-top-right">
<i class="fa fa-lock"></i>
</div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="login-form" runat="server">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<asp:TextBox ID="txtUserName" CssClass="form-control" placeholder="Enter User ID" runat="server"></asp:TextBox>
</div>
<div class="input-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtUserName"
CssClass="text-danger" ErrorMessage="The user name field is required." />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-key"></span></span>
<asp:TextBox ID="txtPassword" CssClass="form-control" placeholder="Enter Your Password" runat="server" TextMode="Password"></asp:TextBox>
</div>
<div class="input-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtPassword" CssClass="text-danger" ErrorMessage="The password field is required." />
</div>
</div>
<div class="form-group">
<asp:Button ID="btnLogin" CssClass="btn btn-success" Text="Login"
runat="server" OnClick="btnLogin_Click" Style="width: 100%"> </asp:Button>
<asp:Label ID="lblLoginSuccess" data-toggle="modal" data-target="#myModal" runat="server" ></asp:Label>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<button type="button" style="display: none;" id="btnShowPopup" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal">
<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">
Registration done Successfully</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMessage" runat="server" />
</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>
</div>
</div>
</body>
I copied this code from the the
web(https://www.aspforums.net/Threads/111893/Open-Show-BootStrap-Modal-Popup-from-Server-Side-using-C-and-VBNet-in-ASPNet/)
, this works perfectly fine in a new web-application but its not working here at all.
Please let me know what i am missing
what's running from behind is:
protected void btnLogin_Click(object sender, EventArgs e)
{
Cls_BA_FieldStaffEO user = new Cls_BA_FieldStaffEO();
user.LoadFieldStaffbyUserAccountName(txtUserName.Text);
lblLoginSuccess.CssClass = "error";
lblLoginSuccess.Text = "";
string password;
if (txtPassword.Text != "" && user.Password != null)
{
password = Cls_StringHelpers.Decrypt(user.Password.Trim());
//BEGIN: Fix for Bug ID -18020
if (txtPassword.Text == password && user.IsActive == true)
{
//END: Fix for Bug ID - 18020
Session["Roles"] = (Cls_MA_RoleEOList)ViewState["Roles"];
Session["UserID"] = user.ID;
Session["UserName"] = user.UserAccountName;
Session["BaseRegionID"] = user.RegionID;
Session["BaseRegionName"] = user.RegionName;
Session["BaseDistrictID"] = user.DistrictID;
Session["BaseDistrictName"] = user.DistrictName;
Session["BaseBranchID"] = user.BranchID;
Session["BaseBranchName"] = user.BranchName;
Session["BaseUnitID"] = user.UnitID;
Session["BaseUnitName"] = user.UnitName;
//Session["Ver"] = trigger.InnerText.Trim();
//Session["VerToolTip"] =Convert.ToString(ViewState["VerToolTip"]);
if (user.CheckDuplicateLogUser(Convert.ToInt32(Session["UserID"])))
{
//lblMsg.CssClass = "error";
Cls_MA_ListLoginUserResultBOList LoginDetails = new Cls_MA_ListLoginUserResultBOList();
LoginDetails.List(Convert.ToInt32(Session["UserID"]));
Session["UnitID"] = LoginDetails[0].UnitId;
//lblLoginSuccess.CssClass = "text-danger";
//lblLoginSuccess.Text = "<b>Please Logout As You Are ALREADY LOGGED IN </b> From <b>" + LoginDetails[0].UnitName.Trim() + "</b> Unit.<br/>Or<br />The <b>Browser Was Closed</b> Forcefully.";
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
this.lblMessage.Text = "Your Registration is done successfully. Our team will contact you shotly";
}
else
{
Response.Redirect("~/Common/f_CN_OuterHome.aspx");
}
}
else
{
//lblLoginSuccess.Text = (string)HttpContext.GetGlobalResourceObject("Master_ErrorMessages", "regLoginSuccess");
//lblLoginSuccess.CssClass = "text-danger";
//ClearControls();
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
this.lblMessage.Text = "Your Registration is done successfully. Our team will contact you shotly";
}
}
else
{
//lblLoginSuccess.Text = (string)HttpContext.GetGlobalResourceObject("Master_ErrorMessages", "regLoginSuccess");
//lblLoginSuccess.CssClass = "text-danger";
//ClearControls();
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
this.lblMessage.Text = "Your Registration is done successfully. Our team will contact you shotly";
}
}
I called that popup in a button click like this:
<li>
<span class="glyphicon glyphicon-user"></span> <asp:Label runat="server" ID="lblUserName"></asp:Label>
</li>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I dont know why it is comming like that. I cant even close that.
I want it to be like this:
The code you have have works on my machine! There must be another problem outside of the code you have given. Paste this code into a blank .html document and run it then work back to what the difference is between it and yours.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<li>
<span class="glyphicon glyphicon-user"></span> <asp:Label runat="server" ID="lblUserName"></asp:Label>
</li>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have to write below code on close button event :
$('#myModal').modal('hide');
$('.modal-backdrop').removeClass('modal-backdrop');
$('.fade').removeClass('fade');
$('.in').removeClass('in');
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
});
Please use below code for trigger button event :
$.ajax({
url: '/test/test?id=' + id,
type: "Post",
async: false,
dataType: "html",
contentType: "application/json;charset=utf-8",
success: function (result) {
//Your div name where you want to show model popup data
$("#YourResultDivName").empty();
$("#YourResultDivName").html(result);
//your button click event trigger from here for open model popup
$("#btnhdnModelPopup").trigger('click');
}
});
Check Below HTML code for model popup :
<form id="ModelPopupForm" class="form-horizontal">
<button type="button" id="btnhdnModelPopup" style="display: none;" class="btn btn-info btn-lg" data-toggle="modal" data-target="#divModelPopup"></button>
<div class="modal fade" id="divModelPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-95" role="document">
<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" id="myModalLabel">Model Title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
Your Data
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnClose" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
it will work perfectly !!
I have a best practice question. I have a page with many chat rooms.
When you click on a chat room a modal prompts asking for a nickname and VIA post gets the information and takes you to the room.
The questions is, I have multiple rooms so I have one modal:
#using (Html.BeginForm("DebateV2", "Home", FormMethod.Post)){
#Html.AntiForgeryToken()
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content ">
<div class="modal-header modal-header-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="modalTitle">
<span class="glyphicon glyphicon-lock pull-left"></span> #Resources.IngresoALaGrieta
</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="Nickname"><span class="glyphicon glyphicon-user"></span> #Resources.ElejiNombre</label>
<input type="text" class="form-control" id="Nickname" name="Nickname" placeholder="#Resources.ElejiNick">
</div>
<input type="hidden" id="Debate" name="Debate" />
<input type="hidden" id="Team" name="Team" />
<button type="submit" id="connect" disabled="disabled" class="btn btn-success btn-block"><span class="glyphicon glyphicon-fire"></span> #Resources.Entrar</button>
</form>
</div>
</div>
</div>
</div>
}
And when the button is clicked it appends some information about the chatroom to the modal form, like this:
$('.open-modal')
.each(function() {
var $this = $(this);
$this.on("click",
function() {
$("#Debate").val($(this).data('debate'));
$("#Team").val($(this).data('team'));
$("#modalTitle").val($(this).data('titulo'));
$('#myModal').modal('show');
});
});
Now I want to send some information via QUERYSTRING so I have in the browser address the name of the room like this:
www.debates.com/debate?debate=debate-name
what is the best practice to do that? I am really lost.
I have the following _Layout.cshtml:
#using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
<title>Structured Content </title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
#Scripts.Render("~/bundles/jquery")
</head>
<body>
<div id="layout">
<div id="header">
<div class="menu_header">
<h2 style="float: left;">Logo</h2>
#RenderSection("menu_header");
</div>
</div>
<div id="bottom_menu">
</div>
<div id="media">
#RenderSection("media");
</div>
<div id="content">
<div id="maincontent">
#RenderBody();
</div>
</div>
<div id="footer">
Foooter
</div>
</div>
#RenderSection("scripts", required: false)
</body>
</html>
In my index.cshtml, I have the following:
#{
Layout = "../Shared/_Layout.cshtml";
}
#section menu_header {
<div class="login_menu_links">
<ul>
<li>
Top ranked▼
</li>
</ul>
</div>
<div class="sign_in_style">
<form>
<span style="display:inline-block">
<label>Email</label><br/>
<input type="text" name="email">
</span>
<span style="display:inline-block">
<label>Password</label><br/>
<input type="password" name="pass">
<input type="submit" name="submit" value="Log in">
</span>
</form>
</div>
}
#section media {
<img src="https://marshallamps.com/wp-content/themes/marshallamps/images/brand-video-overlay.jpg" width="755">
<img src="https://www.marshallheadphones.com/media/upload/pressimages/marshall/MIXEDMEDIA/EVENT/instac.jpg">
<img src="http://blog.weddingfavorsbynette.com/wp-content/uploads/2013/05/wedding-music-dj-624x416.jpg" width="498">
}
<div id="leftcontent">
<h2 class="news_title">Get discovered as a band or musician<br />here on Namn. </h2>
<ul class="info_text">
<li><img src="https://cdn3.iconfinder.com/data/icons/vote/16/medal_star_rank-512.png" width="30" height="30">Gather karma points - get ranked</li>
<li><img src="http://findicons.com/files/icons/770/token_dark/128/headphones.png" width="32" height="32">Explore new music - all genres</li>
<li><img src="https://cdn3.iconfinder.com/data/icons/gray-user-toolbar/512/social_network-512.png" width="30" height="30">Connect - with musicians and friends</li>
</ul>
</div>
<script type="text/javascript">
$('#top_ranked_menu').mouseover(function () {
$('#bottom_menu').show();
});
$('#bottom_menu').mouseout(function () {
$(this).hide();
});
</script>
When I run my application, I get the following error message:
Section not defined: "menu_header".
Description: An unhandled exception occurred during the execution of
the current web request. Please review the stack trace for more
information about the error and where it originated in the code.
Exception Details: System.Web.HttpException: Section not defined:
"menu_header".
As I can see, I have defined them?