Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/bootstrap.min.css")
<link rel="stylesheet" href="/Mickey/stylesheet.css" type="text/css" />
<style type="text/css">
.albiLogo
{
background: url("Images/AlbacoreLogo.jpg");
background-position: center center;
background-repeat: no-repeat;
display: block;
height: 100px;
}
.mvcBootstrapLogo
{
font-family: mickeyregular;
font-size: 44px;
color: white;
margin-right: 20px;
}
.mvcBootstrapLogo:hover
{
font-family: mickeyregular;
font-size: 44px;
color: fuchsia;
margin-right: 20px;
}
.dropdown-menu > li
{
position: relative;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor: pointer;
}
.dropdown-menu .sub-menu
{
left: 100%;
position: absolute;
top: 0;
display: none;
margin-top: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-color: #fff;
box-shadow: none;
}
.txtBlue
{
color: blue;
}
.txtWhite {
color: #ffffff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-inverse" style="margin-top: 5px;">
<div class="container container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span>
</button>
@Html.ActionLink("MvcBootStrap", "Index", new { controller = "Home" }, new { @class = "navbar-brand, mvcBootstrapLogo" })
</div>
<div id="navbar" class="navbar-inner">
<ul class="nav navbar-nav">
@*LogIn*@
<li><button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogIn">Log In</button></li>
@*Examples*@
<li id="ddExamples" class="dropdown">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Examples <span class="caret"></span>
</button>
<ul id="ddExamples-menu" class="dropdown-menu">
<li>@Html.ActionLink("Carousel", "Carousel", new { controller = "Home" })</li>
<li>@Html.ActionLink("Comics API", "ComicsAPI", new { controller = "Home" })</li>
<li>@Html.ActionLink("Responsive Grids", "Columnizer", new { controller = "Home" })</li>
</ul>
</li>
@*Snippets*@
<li id="ddSnippets" class="dropdown">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Snippets <span class="caret"></span>
</button>
<ul id="ddSnippets-menu" class="dropdown-menu" role="menu">
@*API*@
<li id="ddComicsAPI" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
data-target="ddComicsAPI">API <span class="glyphicon glyphicon-triangle-right"></span></a>
<ul id="ddComicsAPI-menu" class="dropdown-menu submenu sub-menu">
<li>@Html.ActionLink("Comics API", "ComicsAPI_controller", new { controller = "Snippets" })</li>
</ul>
</li>
@*Controllers*@
<li id="ddControllers" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
data-target="ddControllers-menu">Controllers <span class="glyphicon glyphicon-triangle-right"></span></a>
<ul id="ddControllers-menu" class="dropdown-menu submenu sub-menu">
<li>@Html.ActionLink("ComicsAPI", "ComicsAPI_controller", new { controller = "Snippets" })</li>
<li>@Html.ActionLink("Home", "Home_controller", new { controller = "Snippets" })</li>
<li>@Html.ActionLink("Snippets", "Snippets_controller", new { controller = "Snippets" })</li>
</ul>
</li>
@*Style*@
<li id="ddStyle" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
data-target="ddStyle">CSS <span class="glyphicon glyphicon-triangle-right"></span></a>
<ul id="ddStyle-menu" class="dropdown-menu submenu sub-menu">
<li>@Html.ActionLink("MyStyle", "MyStyle_style", new { controller = "Snippets" })</li>
</ul>
</li>
@*JavaScript*@
<li id="ddJS" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
data-target="ddJS-menu">Javascript <span class="glyphicon glyphicon-triangle-right"></span></a>
<ul id="ddJS-menu" class="dropdown-menu submenu sub-menu">
<li>@Html.ActionLink("_Layout", "Layout_js", new { controller = "Snippets" })</li>
</ul>
</li>
@*Modals*@
<li id="ddModals" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
data-target="ddModals">Modals <span class="glyphicon glyphicon-triangle-right"></span></a>
<ul id="ddModals-menu" class="dropdown-menu submenu sub-menu">
<li>@Html.ActionLink("Contact Us", "ContactUs_modal", new { controller = "Snippets" })</li>
<li>@Html.ActionLink("Forgot Log In", "ForgotLogIn_modal", new { controller = "Snippets" })</li>
<li>@Html.ActionLink("Log In", "LogIn_modal", new { controller = "Snippets" })</li>
<li>@Html.ActionLink("Register", "Register_modal", new { controller = "Snippets" })</li>
</ul>
</li>
@*Models*@
<li id="ddModels" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
data-target="ddModels-menu">Models <span class="glyphicon glyphicon-triangle-right"></span></a>
<ul id="ddModels-menu" class="dropdown-menu submenu sub-menu">
<li>@Html.ActionLink("Comic", "Comic_model", new { controller = "Snippets" })</li>
</ul>
</li>
@*Views*@
<li id="ddViews" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
data-target="ddViews">Views <span class="glyphicon glyphicon-triangle-right"></span></a>
<ul id="ddViews-menu" class="dropdown-menu submenu sub-menu">
<li>@Html.ActionLink("_Layout", "Layout_cshtml", new { controller = "Snippets" })</li>
<li>@Html.ActionLink("Carousel", "Carousel_cshtml", new { controller = "Snippets" })</li>
<li>@Html.ActionLink("Comics4Sale", "Comics4Sale_cshtml", new { controller = "Snippets" })</li>
<li>@Html.ActionLink("Comics API", "ComicsAPI_cshtml", new { controller = "Snippets" })</li>
<li>@Html.ActionLink("Index", "Index_cshtml", new { controller = "Snippets" })</li>
<li>@Html.ActionLink("Responsive Grids", "Columnizer_cshtml", new { controller = "Snippets" })</li>
</ul>
</li>
@*Add new lineitems here*@
</ul>
</li>
<li>@Html.ActionLink("Home", "Index", new { controller = "Home" })</li>
<li><a href="#" data-toggle="modal" data-target="#modalContactUs">Contact Us</a></li>
<li>@Html.ActionLink("About", "About", new { controller = "Home" })</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="row row-fluid">
@*@Html.Partial("~/Views/PartialViews/_logInpets.cshtml")
<form class="navbar-form navbar-left">
<input id="txtEmail" type="text" placeholder="User Name" class="form-control" />
<input id="txtPword" type="password" placeholder="Password" class="form-control" />
<button id="btnLogIn" name="btnLogIn" class="btn btn-info btn-sm" type="button" onclick="ajaxLogInn();">
Log In
</button>
<a href="#" data-toggle="modal" data-target="#modalForgotLogIn" class="btn mybtn-info">
Forgot Log In</a> <a href="#" data-toggle="modal" data-target="#modalRegister" class="btn mybtn-info">
Register</a> @Html.ActionLink("Register", "Register", new { controller = "Home" })
</form>*@
</div>
<div class="row row-fluid" style="padding: 2px 0 10px 0; color: blue; font-size: large;">
<label id="lblErrMsg" class="control-label">@ViewBag.lblErrMsg</label>
</div>
@RenderBody()
<footer>
<div class="row text-center txtBlue">
copyright © MvcBootstrap 2015
</div>
</footer>
@*Contact Us*@
<div id="modalContactUs" 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">
Contact Us</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name"
value="" />
</div>
</div>
<div class="form-group">
<label for="txtEmailC" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="txtEmailC" name="txtEmailC" placeholder="example@domain.com"
value="" />
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div class="text-center">Jerry Allen 714-801-8862</div>
</div>
</div>
</div>
</div>
@*Log In*@
<div id="modalLogIn" 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">Log In</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="txtUnameL" name="txtUnameL" placeholder="User Name"
value="" />
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="txtPasswordL" name="txtPasswordL" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input id="btnSubmitL" name="submit" type="submit" value="Submit" class="btn btn-info" />
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalRegister">Register</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modalForgotLogIn">Forgot Log In</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@*Forgot LogIn*@
<div id="modalForgotLogIn" 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">Forgot Log In</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">User</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nameF" name="nameF" placeholder="User Name"
value="" />
</div>
</div>
<div class="form-group">
<label for="txtEmailM" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="txtEmailM" name="txtEmailM" placeholder="example@domain.com"
value="" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input id="submitF" name="submit" type="submit" value="Send" class="btn btn-primary" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@*Register*@
<div id="modalRegister" 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">Register</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
<label for="txtUnameM" class="col-sm-3 control-label">
User Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="txtUnameM" name="txtUnameM" placeholder="User Name"
value="" />
</div>
</div>
<div class="form-group">
<label for="txtEmailM2" class="col-sm-3 control-label">
Email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="txtEmailM2" name="txtEmailM2" placeholder="example@domain.com"
value="" />
</div>
</div>
<div class="form-group">
<label for="txtPasswordM" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="txtPasswordM" name="txtPasswordM" value="" />
</div>
</div>
<div class="form-group">
<label for="txtFnameM" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="txtFnameM" name="txtFnameM" value="" />
</div>
</div>
<div class="form-group">
<label for="txtLnameM" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="txtLnameM" name="txtLnameM" value="" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input id="btnSubmitM" name="submit" type="submit" value="Submit" class="btn btn-primary" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="../../Style/MyStyle.css" rel="stylesheet" type="text/css" />
</div>
<script type="text/javascript">
function AlbacoreComics() {
var url = '@Url.Content("~/Index/AlbacoreComics")';
window.location.href = url;
}
function searchByTitle() {
var txtval = document.getElementById("txtSearch").value;
var url = '@Url.Content("~/Index/AlbacoreComics")';
url.replace("-999", txtval);
window.location.href = url;
}
function ajaxSearchByTitle() {
var title = document.getElementById("txtSearch").value;
$.ajax({
url: 'Home/ComicsByTitle',
data: { inString: title },
success: function (data) {
if (data == 'True') {
document.getElementById("lblErrMsg").innerHTML = "Howdy " + document.getElementById("txtEmail").value;
}
else {
document.getElementById("lblErrMsg").innerHTML = "Invalid Search: " + title;
}
},
error: function (e) {
alert('Search Error occured ' + e);
}
});
}
function ajaxLogInn() {
var instring = document.getElementById("txtEmail").value + ";pWord=" + document.getElementById("txtPword").value;
$.ajax({
url: 'Home/LogInn',
data: { inString: instring },
success: function (data) {
if (data == 'True') {
document.getElementById("lblErrMsg").innerHTML = "Howdy " + document.getElementById("txtEmail").value + ". Thanks for stopping by.";
}
else {
document.getElementById("lblErrMsg").innerHTML = "Invalid Login credentials";
}
},
error: function (e) {
alert('MvcBootstrap Log In error occured ' + e);
}
});
}
function logEmIn(inString) {
alert("432 logEmIn= " + inString);
}
//Handle dropdowns
$('#ddAjax').hover(function () {
$('#ddAjax-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddAjax-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddComicsAPI').hover(function () {
$('#ddComicsAPI-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddComicsAPI-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddComicStore').hover(function () {
$('#ddComicStore-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddComicStore-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddControllers').hover(function () {
$('#ddControllers-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddControllers-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddCSS').hover(function () {
$('#ddCSS-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddCSS-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddCSharp').hover(function () {
$('#ddCSharp-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddCSharp-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddExamples').hover(function () {
$('#ddExamples-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddExamples-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddViews').hover(function () {
$('#ddViews-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddViews-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddJS').hover(function () {
$('#ddJS-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddJS-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddModels').hover(function () {
$('#ddModels-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddModels-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddModals').hover(function () {
$('#ddModals-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddModals-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddSnippets').hover(function () {
$('#ddSnippets-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddSnippets-menu').stop(true, true).delay(200).fadeOut("fast");
});
$('#ddStyle').hover(function () {
$('#ddStyle-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$('#ddStyle-menu').stop(true, true).delay(200).fadeOut("fast");
})
//handle stacked Modals
$('#modalRegister').on('show', function () {
$('#modalLogIn').css('opacity', .5);
$('#modalLogIn').unbind();
});
$('#modalRegister').on('hidden', function () {
$('#modalLogIn').css('opacity', 1);
$('#modalLogIn').removeData("modal").modal({});
});
$('#modalForgotLogIn').on('show', function () {
$('#modalLogIn').css('opacity', .5);
$('#modalLogIn').unbind();
});
$('#modalForgotLogIn').on('hidden', function () {
$('#modalLogIn').css('opacity', 1);
$('#modalLogIn').removeData("modal").modal({});
});
</script>
@*
Works in progress: get the submit button to work on my modals
These are snippets from various sources to try out*@
<script type="text/javascript">
//http: //bootsnipp.com/snippets/featured/modal-login-with-jquery-effects
//modalContactUs
//modalForgotLogIn
//modalRegister
$("form").submit(function () {
switch (this.id) {
case "login-form":
var $lg_username = $('#login_username').val();
var $lg_password = $('#login_password').val();
if ($lg_username == "ERROR") {
msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error");
} else {
msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK");
}
return false;
break;
case "lost-form":
var $ls_email = $('#lost_email').val();
if ($ls_email == "ERROR") {
msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error");
} else {
msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK");
}
return false;
break;
case "register-form":
var $rg_username = $('#register_username').val();
var $rg_email = $('#register_email').val();
var $rg_password = $('#register_password').val();
if ($rg_username == "ERROR") {
msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error");
} else {
msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK");
}
return false;
break;
default:
return false;
}
return false;
});
</script>
@* http://stackoverflow.com/questions/32285593/bootstrap-modal-login-with-ajax*@
<script>
$('#form').submit(function (e) {
var form = $(this);
var formdata = false;
if (window.FormData) {
formdata = new FormData(form[0]);
}
var formAction = form.attr('action');
$.ajax({
type: 'POST',
url: 'login.php',
cache: false,
data: formdata ? formdata : form.serialize(),
contentType: false,
processData: false,
dataType: 'json',
success: function (response) {
//TARGET THE MESSAGES DIV IN THE MODAL
if (response.type == 'success') {
$('#messages').addClass('alert alert-success').text(response.message);
} else {
$('#messages').addClass('alert alert-danger').text(response.message);
}
}
});
e.preventDefault();
});
//If you want to implement AJAX, the button which does the submission has a type of submit and fires the submit event on the form, which will not let your code even reach the function that does the AJAX call.
//Instead, you could change the type of the button from submit to button, and add the following handler to trigger when the form submits:
//$('#login').submit(function(){
// //prepare your username, password and callback
// login(username, password, callback);
//});
@* check out; prepend message to Modal
https://www.youtube.com/watch?v=CvwiXDZqp-E
<pop:form id="contact-form" name="contact">
<pop:success>
<div class="alert-box success form-feedback">Thank you. I'll get back to you"
</pop:success>
<pop:error>
<div class="alert-box error form-feedback>There was an error.
</pop:error>
Name & textbox etc
$(function() }
$("#contact-form").submit(function(e) {
e.preventDefault();
$form=$(this);
$.post(document.location.url, $(this).serialize(), function(data) {
$feedback = $("<div>").html(data).find(".form-feedback").hide();
$form.prepend($feedback)[0].reset();
$feedback.fadeIn(1500);
});
});
})*@
</script>
</body>
</html>