I have created an ASP.Net Master page with Bootstrap 3.3.7 and Jquery 3.1.0.
Default.master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="BootStrap_With_ASPDotNet.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>This is My Site Using BootStrap in ASP.Net</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Font Awesome inclusion for the icons on the pages -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text\css" />
<!-- Adding Google Web Fonts to Bootstrap -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
<link href="custom/custom.css" rel="stylesheet" type="text\css" />
<!-- Adding a web font -->
<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css />-->
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<!--Bootstrap Modal (Dialog Box / Pop-up Window) Example-->
<div id="MyModal" class="modal fade" role="dialog" runat="server">
<div class="modal-dialog" runat="server">
<div class="modal-content" runat="server">
<div class="modal-header" runat="server">
<button type="button" class="close" data- dismiss="modal">×</button>
<h4>This is Modal Header</h4>
</div>
<div class="modal-body" runat="server">This is Modal Body
</div>
<div class="modal-footer" runat="server">This is Modal Footer
<button type="button" class="btn btn-default" data-dismiss="modal" runat="server">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Bootstrap Model (Dialog Box / Popup Window)-->
</body>
</html>
As you can see I have placed a Popup Dialog at the bottom of the MasterPage so that every instance of the MasterPage i.e. Content Pages will be use this.
Also I have created a JavaScript Function called 'openModal()' has created at the head of the MasterPage to use across all the content pages.
Now I have created a content page 'WebForm1.aspx' using the previously created MasterPage and added a button. Please refer the code below.
WebForm1.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Default.Master"
AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="BootStrap_With_ASPDotNet.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Button ID="btnClickMe" runat="server" OnClick="btnClickMe_Click"
Text="Click Me" CssClass="btn btn-danger"/>
</asp:Content>
What I want is when I click the button it should show the popup and I need to do it from code behind. See below what I have tried.
protected void btnClickMe_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}
However it's not working. I can't figure it out why. So could someone help me on this?
Thanks
I got the answer by my self. Please refer the below information.
First place the below JS code in the .
function openModal() {
$('#myModal').modal('show');
}
Second In server side on button click add the below function()
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { openModal(); });", true);
FYI for others in search for Bootstrap 4 Modal not showing up.
I use master page and have the modal inside a child page, jquery 3.2.1 and bootstrap 4 beta 2.
If the modal do not show up, check the page source, and see if you can find it there.
When you find the modal, it will most likely have change id.
Use .modal or whatever class name used on the modal to be sure hit the it.
Javascript part also need to be before the the child page loads, as the code behind run when if gets to that content part.
Javascript (masterpage head tag):
function openModal() { $('.modal').modal('show'); }
code behind (child page):
ScriptManager.RegisterStartupScript(this, this.GetType(), "", "openModal();", true);
This code behind also works.
Page.ClientScript.RegisterStartupScript(this.GetType(), "", "openModal();", true);
Related
The problem:
aSignup is not recognized and returns the error :
"The name 'aSignup' does not exist in the current context
aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="learn.aspx.cs"
Inherits="RapidTyper.learn" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8">
<title>Learn</title>
<meta content="Learn" property="og:title">
<meta content="Learn" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>
<div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar w-nav">
<div class="w-container"><img src="images/keyboard.png" width="52" alt="" class="stone-logo"><div class="logo-text">Rapid typer</div>
<nav role="navigation" class="nav-menu w-nav-menu">a href="signUp.aspx" class="nav-link w-nav-link" runat="server" id="aSignup"></a></nav>
<div class="menu-button w-nav-button">
<form runat="server">
</form>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5f47de6d60aae827039f6108" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>
code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace RapidTyper
{
public partial class learn : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
aSignup.InnerText = "Account";
}
}
}
}
The problem:
aSignup is not recognized and returns the error :
"The name 'aSignup' does not exist in the current context
This might be just a typo in the question, but the element is missing the opening angle bracket (<).
Even then, rather than <a you should look at an <asp:HyperLink.
In addition to the fact that you have missed the < before declaring the anchor element as #Joel Coehoorn suggested, I would like to bring another thing in notice that is, while you are working with asp.net WebForms, make sure there is at least and at most ONE html form element with a runat="server" attribute on it as the parent element of all the server controls, which is not present in your markup. This could be a second issue on your page.
<form id="form1" runat="server"> <!-- This should be the parent of all the server controls. -->
<div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar w-nav">
<div class="w-container">
<a href="Home.aspx" class="brand w-clearfix w-nav-brand">
<img src="images/keyboard.png" width="52" alt="" class="stone-logo" />
<div class="logo-text">Rapid typer</div>
</a>
<nav role="navigation" class="nav-menu w-nav-menu">
</nav>
<div class="menu-button w-nav-button">
</div>
</div>
</div>
<!-- YOUR Scripts Go here-->
</form>
UPDATE
I see, you have updated you question and you have added a <form runat="server"></form> tag as well, but it is not added correctly as I suggested. So, what I am going to do is, modify your whole code as I see it suitable and you should then copy the entire aspx page.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="learn.aspx.cs"
Inherits="RapidTyper.learn" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8">
<title>Learn</title>
<meta content="Learn" property="og:title">
<meta content="Learn" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>
<form id="form1" runat="server">
<div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar w-nav">
<div class="w-container">
<a href="Home.aspx" class="brand w-clearfix w-nav-brand">
<img src="images/keyboard.png" width="52" alt="" class="stone-logo" />
<div class="logo-text">Rapid typer</div>
</a>
<nav role="navigation" class="nav-menu w-nav-menu">
</nav>
<div class="menu-button w-nav-button">
</div>
</div>
</div>
<!-- YOUR Scripts Go here-->
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5f47de6d60aae827039f6108" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</form>
</body>
</html>
Please replace your aspx code with the above.
is the 'a' tag inside of an 'asp:Content' tag? All elements referenced in the code behind should be inside of asp: tags EDIT: - only when using MasterPageFile directive.
Does the designer learn.aspx.designer.cs have a declaration for aSignup ?
e.g.:
namespace RapidTyper
{
public partial class learn
{
/// <summary>
/// aSignup control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlAnchor aSignup;
}
}
I have a jQuery UI tab control, created using asp.net repeater, and am trying to make sure on page load first tab is selected and also keep the selected tab on postbacks.
I have worked out the postback part but am having problem getting first tab's name. I have applied styling to tabs. This is what I have and what have tried:
<div id="divCategories">
<asp:Repeater runat="server" ID="rptCategories">
<HeaderTemplate>
<ul class="bronze nav nav-tabs" role="tablist">
</HeaderTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
<ItemTemplate>
<li>
<a href='#<%# Eval("Abbrev")%>' data-toggle="tab" aria-controls='<%# Eval("Abbrev")%>'>
<p class="tab title"><%# Eval("CourseCategory")%></p>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:HiddenField ID="hfSelCat" runat="server" />
<script type="text/javascript">
$(function () {
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {debugger
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
if I uncomment first line in the script that initializes the tabs; I lose tab styling; if I comment it out, I get an error on next line when I try to access .tabs('option','active') because tab is not initialized yet. So, I am using hard-coded tab name ('AnOps');
Because the tab names are generated dynamically, basically I am trying to get the name of the first tab, whatever it may be.
Update (based on Dee's suggestion)
I modified the script like below; it does set the selected tab to first one but none of the styling is applied.
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
According to documentation of active option it can be specified with integer value which tab will be active at initialisation (zero will activate the first tab). If I am not wrong this is all you need to keep the first tab selected whenever the page loads. HTH
Example:
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
});
</script>
To define your own look some classes of jquery-ui can be edited in Theme Roller. So you create your style-css file and link it the the page (probably master-page). Then just call tabs() function and the style will be applied. You shouldn't define style inside of the repeater yourself. Maybe this is your problem you mentioned in the comment?
First use Theme Roller and generate your style. For example I have changed the background and border of active item to black-red (pretty ugly :)).
Then save the generated files to local folder, I saved it to folder named js but the name is not important. Link the generated css files to your asp.net page. Here I have example with simple html file, but that is not important. As you can see the <ul> doesn't have any style.
Nobullman.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="js/external/jquery/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui.theme.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui.structure.css">
</head>
<body>
<!-- This content will be generated by the Repeater, but withou any styles -->
<div id="divCategories">
<ul>
<li>1.Tab</li>
<li>2.Tab</li>
<li>3.Tab</li>
</ul>
<div id="tabs-1">
<p>Text 123</p>
</div>
<div id="tabs-2">
<p>Text 456</p>
</div>
<div id="tabs-3">
<p>Text 789</p>
</div>
</div>
<script type="text/javascript">
$(function() {
// tabs will do the trick and create the tabs css styles inclusive
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
});
</script>
</body>
</html>
The relation of the Nobullman.html and the saved files from Theme Roller looks like this:
When this html file is loaded by browser it looks like this. The styles were applied by jquery-ui-tabs() them selves.
I have added fancybox v.2.1.5 in my webpage just like follows:
<script type="text/javascript" src="http://localhost/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="http://localhost/fancybox/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="http://localhost/fancybox/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="http://localhost/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="http://localhost/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="http://localhost/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="http://localhost/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
This is my html code:
<form id="aspnetForm" runat="server">
<a href="#fancyBoxDiv" class="fancybox" />//When the anchor is clicked, shows fancyBoxDiv
<div id="fancyBoxDiv">//This div is shown in fancybox
<asp:Button ID="btn" runat="server" OnClick="btn_Click" />
</div>
</form>
This is my c# code-behind:
protected void btn_Click(object sender, EventArgs e)
{
//This function is never called
}
And I have one c# button on one fancybox div, but when I press this button, the callback function in codebehind is not called.
What I'm doiing wrong? What I have to change?
You may need to put your asp:Button element inside a form tag like below:
<form id="form1" runat="server">
<a href="#fancyBoxDiv" class="fancybox" />//When the anchor is clicked, shows fancyBoxDiv
<div id="fancyBoxDiv">//This div is shown in fancybox
<asp:Button ID="btn" runat="server" OnClick="btn_Click" />
</div>
</form>
If you think your html structure is proper then you can check if you're getting any exception on client side in firebug. Or second option will be to check if you're able to call a client side function by using OnClientClick. If so then call the client side function and use _doPostBack.
I have the following Jquery in my user control which is loaded onto the page, however the jquery is not firing at all:
<script type="text/javascript" >
$(document).ready(function () {
$("div.holder").jPages({
containerID: "itemContainer",
perPage: 2,
first: false,
previous: "span.arrowPrev",
next: "span.arrowNext",
last: false
});
});
</script>
I have tried stripping this out and just using an alert when inside of document.ready but this still does not fire. How can i get this code to execute inside of a user control in aspx?
And simply this is the html i am using:
<div class="eng-container">
<!-- navigation holder -->
<div class="holder">
</div>
<!-- wrapped custom buttons for easier styling -->
<div class="customBtns">
<span class="arrowPrev"></span>
<span class="arrowNext"></span>
</div>
<ul id="itemContainer">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
There are no obvious errors with the code i can see.
EDIT
http://jsfiddle.net/p4LES/1/
EDIT 2
Heres the pastebin link for the code, it is quite long though for the whole page. At line 185 my script begins and my HTML code related to it.
http://pastebin.com/szknh76v
UPDATE
I've tried moving the jQuery code in question to the main.Master file for my project which looks to have fixed the problem in question and it is now firing. Although I have no clue as to why the javascript would not fire within the control.
I created a new HTML page and this worked for me:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jPages.min.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$("div.holder").jPages({
containerID: "itemContainer",
perPage: 2,
first: false,
previous: "span.arrowPrev",
next: "span.arrowNext",
last: false
});
alert("myMsg");
});
</script>
<head>
<title></title>
</head>
<body>
<div class="eng-container">
<!-- navigation holder -->
<div class="holder">
</div>
<!-- wrapped custom buttons for easier styling -->
<div class="customBtns">
<span class="arrowPrev"></span>
<span class="arrowNext"></span>
</div>
<ul id="itemContainer">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
</body>
</html>
I have created an Image Slider using html with Jquery. I am trying to put this image slider into a contentplaceholder on my homepage which is running off a masterpage template with c#. It is not working.
Image Slider HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Slider</title>
<style type="text/css">
.slider {
width:1025px;
height:500px;
overflow:hidden;
margin:30px auto;
}
.slider img{
width:1025px;
height:500px;
display:none;
margin:30px auto;
}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery- ui.min.js"></script>
<script type="text/javascript">
function Slider() {
$(".slider #1").fadeIn("fade, 500");
$(".slider #1").delay(5500).hide("slide", { direction: 'left' }, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function (){
$(".slider #" + count).show("slide",{direction:'right'}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count = 1;
}else{
count = count + 1;
}
}, 6500);
}
</script>
</head>
<body onload="Slider();">
<div class="slider">
<img id="1" src="Promotion1.png" border="0" alt="Promotion one" />
<img id="2" src="Promotion2.png" border="0" alt="Promotion two" />
</div>
</body>
</html>
Content Placeholder I am trying to put HTML into:
<asp:Content ID="Content3" runat="server" contentplaceholderid="ContentPlaceHolder1">
</asp:Content>
You must have a masterpage right that's why ur using a content page right ? You masterpage has already defined head / body and so on the HTML tags, so u need to just put the divs in the content place holder
<div class="slider" onload="Slider()";>
<img id="1" src="Promotion1.png" border="0" alt="Promotion one" />
<img id="2" src="Promotion2.png" border="0" alt="Promotion two" />
</div>
and your onload function call , you need to move your src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery- ui.min.js">
tag into the masterpage and put your jS in a JS file and reference it inside your masterpage ideally, you could put your JS code in the content page but this is not good practice, it just easier to create the js file and plonk in a reference in your masterpage...good luck !
First thing first, your CDN is wrong. it should be:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
notice you missed the https part. Then HTML for that single page should work by itself.
Then follow other suggestions using proper master and content tag, or comes back for more questiond :D
In a master page add the links to jquery, then add a content placeholder for the head.
Add a new page using the master page recently created. Add the function slider in that content placeholder. Remove the onload from the body and in the page use .load() using jquery to add the call.
Add a second place holder in the master to add content in the body and add your html for the slider.
Hope it helps.