I want a fixed navigation bar in every page but this layout is changing the contents of other pages that are using this layout. Is it because of the scripts? Please try to explain from the basics. I have included the screenshot of the home page. The registration form is getting shrinked.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - MY BOOKS</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
#*<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>*#
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts",false)
</body>
</html>
Homepage
#model LogReg.Models.Login
<!DOCTYPE html>
<html>
<head>
<title>MyBooks Login Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link href="/RegisterTemplate/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
<link href="/RegisterTemplate/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900" rel="stylesheet">
</head>
<body>
<div class="signupform">
<h1>MyBooks Login Form</h1>
<div class="container">
<div class="agile_info">
<div class="w3l_form">
<div class="left_grid_info">
<h3>Welcome to MyBooks!</h3>
<h4>A place of Story makers, Dragon-tamers, Dream Catchers, Fact Finders and definitely a safer place.</h4>
<p>Books are the quietest and most constant of friends; they are the most accessible and wisest of counselors, and the most patient of teachers. </p>
</div>
</div>
<div class="w3_info">
<h2>Login to an Existing Account</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<form action="#" method="post">
<div class="input-group">
<span><i class="fa fa-user" aria-hidden="true"></i></span>
#Html.EditorFor(model => model.Email_ID, new
{
htmlAttributes = new
{
#class = "form-control",
#placeholder = "Enter Email Address",
required = "Required",
pattern = "[a-z0-9._%+-]+#[a-z0-9.-]+\\.[a-z]{2,3}$",
title = "example#email.com"
}
})
#Html.ValidationMessageFor(model => model.Email_ID, "", new { #class = "text-danger" })
</div>
<div class="input-group">
<span><i class="fa fa-user" aria-hidden="true" ></i></span>
#Html.EditorFor(model => model.Password, new
{
htmlAttributes = new
{
#class = "form-control",
#placeholder = "Enter Password",
required = "Required",
oninvalid = "this.setCustomValidity('Password cannot be empty')",
oninput = "setCustomValidity('')"
}
})
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
<div class="form-group">
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Remember_Me)
#Html.ValidationMessageFor(model => model.Remember_Me, "Remember Me", new { #class = "text-danger" })
</div>
</div>
</div>
<button class="btn btn-danger btn-block" type="submit">Login</button>
</form>
}
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<p>© MyBooks Login form 2018. All Rights Reserved | Design by Aniket Prashar</p>
</div>
</div>
</body>
</html>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I urge you to read an MVC tutorial or something similar as you do not yet understand the basic layout in ASP.NET MVC.
Assuming this is your layout, every page indicated to use this will have this layout and display the page content on the #RenderBody() meaning you should not reload scripts in your page view.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - MY BOOKS</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
#*<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>*#
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts",false)
</body>
</html>
Controller:
[HttpGet]
public ActionResult Homepage()
{
return View(new LogReg.Models.Login());
}
Homepage View:
#{
ViewBag.Title= "MyBooks Login Page";
}
<link href="/RegisterTemplate/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
<link href="/RegisterTemplate/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900" rel="stylesheet">
<div class="signupform">
<h1>MyBooks Login Form</h1>
<div class="container">
<div class="agile_info">
<div class="w3l_form">
<div class="left_grid_info">
<h3>Welcome to MyBooks!</h3>
<h4>A place of Story makers, Dragon-tamers, Dream Catchers, Fact Finders and definitely a safer place.</h4>
<p>Books are the quietest and most constant of friends; they are the most accessible and wisest of counselors, and the most patient of teachers. </p>
</div>
</div>
<div class="w3_info">
<h2>Login to an Existing Account</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<form action="#" method="post">
<div class="input-group">
<span><i class="fa fa-user" aria-hidden="true"></i></span>
#Html.EditorFor(model => model.Email_ID, new
{
htmlAttributes = new
{
#class = "form-control",
#placeholder = "Enter Email Address",
required = "Required",
pattern = "[a-z0-9._%+-]+#[a-z0-9.-]+\\.[a-z]{2,3}$",
title = "example#email.com"
}
})
#Html.ValidationMessageFor(model => model.Email_ID, "", new { #class = "text-danger" })
</div>
<div class="input-group">
<span><i class="fa fa-user" aria-hidden="true" ></i></span>
#Html.EditorFor(model => model.Password, new
{
htmlAttributes = new
{
#class = "form-control",
#placeholder = "Enter Password",
required = "Required",
oninvalid = "this.setCustomValidity('Password cannot be empty')",
oninput = "setCustomValidity('')"
}
})
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
<div class="form-group">
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Remember_Me)
#Html.ValidationMessageFor(model => model.Remember_Me, "Remember Me", new { #class = "text-danger" })
</div>
</div>
</div>
<button class="btn btn-danger btn-block" type="submit">Login</button>
</form>
}
</div>
<div class="clear"></div>
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
#section Scripts will appear in the position of #RenderSection("scripts", required: false) inside your layout view meaning it will not be rendered after the </div> tag.
Related
I am trying in ASP.NET MVC in navbar put dropdown menu with select language. When I click on first dropdown button all navbar button need to change language. I wrote Language Controller and it works but my problem is that I want to have in navbar only show pictures of country and I try everything and always I see and letters and pictures.
I want to have only pictures of flag, without ENG.
One example of code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brig</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="main_manu">
<div class="title">
<h2>Brig</h2>
<br />
<div class="navbar navbar-inverse navbar-fixed" id="navbarMenu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-colapse">
<ul class="nav navbar-nav">
<li class="dropdown">
#Html.LabelFor(model => model.ChoseLanguage) <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a>#Html.ActionLink("ENG", "Change", "Language", new { LanguageAbbrevation = "en" }, null)</a><img class="demo cursor" src="~/pictures/flag/gb.jpg" style="width:25%"></li>
<li><a>#Html.ActionLink("SPA", "Change", "Language", new { LanguageAbbrevation = "spa" }, null)</a><img class="demo cursor" src="~/pictures/flag/spa.png" style="width:25%"></li>
</ul>
</li>
<li>#Html.ActionLink(Resources.Resource.Home, "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })</li>
<li>#Html.ActionLink(Resources.Resource.Services, "Info", "Services", new { area = "" }, new { #class = "navbar-brand" })</li>
<li>#Html.ActionLink(Resources.Resource.Gallery, "Gallery", "Gallery", new { area = "" }, new { #class = "navbar-brand" })</li>
<li>#Html.ActionLink(Resources.Resource.Apartment, "Apartment", "Apartment", new { area = "" }, new { #class = "navbar-brand" })</li>
<li>#Html.ActionLink(Resources.Resource.Contact, "SendEmail", "Contact", new { area = "" }, new { #class = "navbar-brand" })</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Brig</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
I will appreciate your help. Thank you.
I am currently dealing with a problem i have been trying to solve through 'learn by doing', but i am getting no where and almost on the edge of leaving it alone and let it run the way i know it works.
The way it works now:
Currently i have scarfolded the whole identity area from asp.net, the login and registration both runs in separate views
The way i want it:
The login should be placed in the navigation bar, but to do so i need the model to paste in the username & password. If i use a model in _LoginPartial the registration does not work. Currently i can move the login form to navigation bar and login/logout as normal using the form, but then i am no longer allowed to register as it want the loginmodel for my registration page.
I can add other code if needed, but they are more or less default scarfolded classes.
_LoginPartial
#inject SignInManager<User> SignInManager
#inject UserManager<User> UserManager
#using Microsoft.AspNetCore.Identity
#using TVScreenViewer.Models.Identity
#model TVScreenViewer.Areas.Identity.Pages.Account.LoginModel
#if (SignInManager.IsSignedIn(User))
{
<form asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="#Url.Action("Index", "Home", new {area = ""})" method="post" id="logoutForm" class="navbar-nav navbar-right">
<ul class="navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello #UserManager.GetUserAsync(User).Result.Name!</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider"></div>
<button type="submit" class="btn btn-secondary btn-block" style="padding: 4px 24px; text-align: left;">Logout</button>
</div>
</li>
</ul>
</form>
}
else
{
<form asp-area="Identity" asp-page="/Account/Login" method="post" class="navbar-nav navbar-right">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="row">
<div style="margin: 0rem 1rem">
<input class="form-control form-control-sm" asp-for="Input.Username"/>
<span asp-validation-for="Input.Username" class="text-danger"></span>
</div>
<div>
<input class="form-control form-control-sm" asp-for="Input.Password"/>
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div style="margin: 0rem 1rem">
<button type="submit" class="btn btn-primary btn-sm">Log in</button>
</div>
</div>
</form>
#*<a asp-area="Identity" asp-page="/Account/Login">Login</a>*#
<a asp-area="Identity" asp-page="/Account/Register">Register</a>
}
#section Scripts {
<partial name="_ValidationScriptsPartial"/>
}
Finding UI:
Here's a sample in bootstrap 3, which is a login form as your need:
https://getbootstrap.com/docs/3.4/examples/jumbotron/
and another in v4 which is a search bar:
https://getbootstrap.com/docs/4.3/examples/sticky-footer-navbar/
you can inspect element:
and copy this part (depending on version it may differ
Coding (The Actual Issue)
The login it self is not something special
you can use old html form , or MVC beginForm and set the action to send data to Account page... authentication perform over server, and server assign cookies, so it doesn't matter as long as you send the data to the server. and you need two input depending on your model, can be Username & Password,
Also these: asp-page and asp-for ... are new to me, i do not remember seeing them anywhere, make sure you are using either #Html.TextBoxFor(m => m.Email, new { #class = "form-control" }) kind of rezor supported field, or <input name=""> html input with name attribute
Also here's default form by Microsoft on .NetBased MVC:
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
Default Microsoft Code for Login
Note
I noticed you are using Core MVC due to this line #using Microsoft.AspNetCore.Identity, which it's template may be different from .netframwork template, but the concept should be same
#using OpenAndDelete.Models
#model LoginViewModel
#{
ViewBag.Title = "Log in";
}
<h2>#ViewBag.Title.</h2>
<div class="row">
<div class="col-md-8">
<section id="loginForm">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<h4>Use a local account to log in.</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(m => m.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.Password, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Log in" class="btn btn-default" />
</div>
</div>
<p>
#Html.ActionLink("Register as a new user", "Register")
</p>
#* Enable this once you have account confirmation enabled for password reset functionality
<p>
#Html.ActionLink("Forgot your password?", "ForgotPassword")
</p>*#
}
</section>
</div>
<div class="col-md-4">
<section id="socialLoginForm">
#Html.Partial("_ExternalLoginsListPartial", new ExternalLoginListViewModel { ReturnUrl = ViewBag.ReturnUrl })
</section>
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I'm having troubles adding google reCAPTCHA to my page.
in the Layout I have added the Google Recaptcha js
_layout
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript">
<script type="text/javascript">
$(document).ready(function () {
$('#subject').on("change", function (e) {
e.preventDefault();
var selectedVal = $('#subject').val();
$.ajax({
// url: "/ContactUs/GetForm",
url: '#Url.Action("GetForm", "ContactUs")',
type: "POST",
data: { searchValue: selectedVal } ,
async: true,
success: function (data) {
$('#renderForms').empty();
$('#renderForms').append(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("An error has occured!!! " + xhr.status + " && " + xhr.responseText);
}
});
});
});
</script>
then in my index I select which form I want to show:
#Html.DropDownListFor(model => model.contactSelectListItems, new List<SelectListItem>
{
new SelectListItem() {Text = "option1", Value="option1"},
new SelectListItem() {Text = "option2", Value="option2"},
new SelectListItem() {Text = "option3", Value="option3"},
}, "--Choose--", new { id = "subject", #class= "dropdown-item" })
</div>
<div id="renderForms">
</div>
in both partial page there is a form where I do something similiar yet different viewmodels:
#using (Html.BeginForm("SendCustomerTeam", "ContactUs", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>CustomerTeamViewModel</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="container">
<div class="form-group form-group-sm col-sm-6">
<div class="row">
#Html.LabelFor(model => model.Phone, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-sm-9">
#Html.EditorFor(model => model.Phone, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Phone, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-12">
<div class="row">
#Html.LabelFor(model => model.Inquiry, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-sm-12">
#Html.EditorFor(model => model.Inquiry, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Inquiry, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-12">
<div class="row">
<div class="col-sm-12">
<div id="NotRobot">
<label>Are you Human?</label>
<div id='recaptcha' class="col-sm-12 g-recaptcha"
data-sitekey="#System.Configuration.ConfigurationManager.AppSettings["RecaptchaPublicKey"]"
>
</div>
<div id="recaptchaMessage" data-verifyrecaptchatokenurl="#Url.Action("VerifyReCaptchaToken", "Home")" style="display:none;padding:10px;color:red;font-weight:bold;" class="error">You need to verify reCAPTCHA.</div>
</div>
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<div class="col-sm-9">
<input id="Send" type="submit" value="Send" class="btn btn-default" />
</div>
</div>
</div> etc...
In my controller I handle it like this thou I would like to handle the reCAPTCHA as an ajax call I have yet to figure out how to do that.
public ActionResult Index()
{
ViewData["ReCaptchaKey"] = System.Configuration.ConfigurationManager.AppSettings["RecaptchaPublicKey"];
//do something here
}
public static bool ReCaptchaPassed(string gRecaptchaResponse, string secret)
{
HttpClient httpClient = new HttpClient();
var res = httpClient.GetAsync($"https://www.google.com/recaptcha/api/siteverify?secret={secret}&response={gRecaptchaResponse}").Result;
if (res.StatusCode != HttpStatusCode.OK)
{
//logger.LogError("Error while sending request to ReCaptcha");
return false;
}
string JSONres = res.Content.ReadAsStringAsync().Result;
dynamic JSONdata = JObject.Parse(JSONres);
if (JSONdata.success != "true")
{
return false;
}
return true;
}
[HttpPost]
public ActionResult SendCustomerTeam(CustomerTeamViewModel model)
{
ContactViewModel contactModel = new ContactViewModel();
contactModel.CustomerTeamModel = model;
ViewData["ReCaptchaKey"] = System.Configuration.ConfigurationManager.AppSettings["RecaptchaPublicKey"];
if (ModelState.IsValid)
{
if (!ReCaptchaPassed(
Request.Form["g-recaptcha-response"], // that's how you get it from the Request object
System.Configuration.ConfigurationManager.AppSettings["RecaptchaPrivateKey"]
))
{
ModelState.AddModelError(string.Empty, "You failed the CAPTCHA, stupid robot. Go play some 1x1 on SFs instead.");
return View(contactModel);
}
}
My problem is the reCAPTCHA never appears on my page.
Edit:
I've tried the following simplification to see if I could find the issue.
SimplePageViewModel
public class simplePageViewModel
{
public string Name { get; set; }
}
SimplePagePartialView
#model Contact_Portal.Models.simplePageViewModel
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>simplePageViewModel</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="container">
<div class="row">
<div class="form-group form-group-sm col-sm-6">
<div class="row">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-sm-9">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-12">
<div class="row">
<div class="col-sm-12">
<div id="NotRobot">
<label>Are you Human?</label>
<div id='recaptcha' class="col-sm-12 g-recaptcha" style="padding:10px;"
data-sitekey="#System.Configuration.ConfigurationManager.AppSettings["RecaptchaPublicKey"]">
</div>
<div id="recaptchaMessage" data-verifyrecaptchatokenurl="#Url.Action("VerifyReCaptchaToken", "Home")" style="display:none;padding:10px;color:red;font-weight:bold;" class="error">You need to verify reCAPTCHA.</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
in the controller I get the partial view shown through this line
return PartialView("View", contactModel.simplePageModel);
Still the same problem persist.
Could it be because I'm displaying my partial page containing the reCAPTCHA as part of an Jquery Ajax call ? like this:
$(document).ready(function () {
$('#subject').on("change", function (e) {
e.preventDefault();
var selectedVal = $('#subject').val();
$.ajax({
// url: "/ContactUs/GetForm",
url: '#Url.Action("GetForm", "ContactUs")',
type: "POST",
data: { searchValue: selectedVal } ,
async: true,
success: function (data) {
$('#renderForms').empty();
$('#renderForms').append(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("An error has occured!!! " + xhr.status + " && " + xhr.responseText);
}
});
});
I've now tried a entire new project where I've simplified it all the way down to one html file:
Index.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div id='recaptcha' class="col-sm-12 g-recaptcha" style="padding:10px;"
data-sitekey="#System.Configuration.ConfigurationManager.AppSettings["RecaptchaPublicKey"]"></div>
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
Still it is not visible it never appears. why is it not working ?
could it be that ASP.NET MVC is not supported by Recaptcha from google?
Your script src is wrong:
<script src='https://www.google.com/recaptcha/api.js async defer'></script>
to
<script src='https://www.google.com/recaptcha/api.js'></script>
Also could you check deveoper console, if there any error?
Well I found a solution I'm not happy with it but it works.
in my Layout file I've made a section like this:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript">
function enableBtn() {
document.getElementById("subject").disabled = false;
}
$(document).ready(function () {
document.getElementById("subject").disabled = true;
});
</script>
Then in my view I created this
<div class="g-recaptcha" data-sitekey="*********PublicKEY*************" data-callback="enableBtn"></div>
And it seems to be working.
I wish I could make it work in the partial view because now I have to have it no matter what else will happen and not just on a submit.
I don't know if I can verify this one server side anymore as it is also outside my form. ?
Anyone with a better option would be welcomed.
EDIT:
I found a better solution for me. I changed my ajax call like this:
$('#subject').on("change", function (e) {
e.preventDefault();
var selectedVal = $('#subject').val();
$.ajax({
// url: "/ContactUs/GetForm",
url: '#Url.Action("GetForm", "ContactUs")',
type: "POST",
data: { searchValue: selectedVal } ,
async: true,
success: function (data) {
$('#renderForms').empty();
$('#renderForms').append(data);
if (!debug) {
document.getElementById("Send").disabled = true;
grecaptcha.render('Captcha', {
'sitekey': '**********PublicKey*********',
'callback': function() {
document.getElementById("Send").disabled = false;
},
'expired-callback': function() {
//document.getElementById("subject").selectedIndex = 0;
document.getElementById("Send").disabled = true;
//document.getElementById("renderForms").innerHTML = "";
}
});
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert("An error has occured!!! " + xhr.status + " && " + xhr.responseText);
}
});
});
Now it is working as I intended. At least in the user interface part.
For a data entry field I want to display a hint for the user when they hover over the field. The field name is INACT and indicates if the record has been inactivated. Something like this is what is needed - Enter an I to Inactivate a record.
I have this in the ModelMetadata
[Display(Name = "INACT")]
[DisplayFormat(ConvertEmptyStringToNull = true)]
[StringLength(1)]
public string A_INACT;
And display in the Inact View - This view is the only place this field can be edited.
:
<div class="editor-label">
#Html.LabelFor(model => model.A_INACT)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.A_INACT , new { htmlAttributes = new { tabindex = 1 } })
#Html.ValidationMessageFor(model =>Model.A_INACT)
</div>
The INACT View
#model MTSapp.Models.mts_rename
#{
ViewBag.Title = "Inact";
}
<style>
.container {
width: 50%;
float: left;
}
</style>
<h2>RE NAME </h2>
<h2>Inact Re Number</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>mts_rename</legend>
<br />
<div class="editor-label">
#Html.LabelFor(model => model.A_ID)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.A_ID, new { #class = "form-control", #readonly = "readonly", #style = "background:#f2f3f3", tabindex = 4 })
</div>
<div class="editor-label">
#Html.LabelFor(model => model.A_RENO)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.A_RENO, new { #class = "form-control", #readonly = "readonly", #style = "background:#f2f3f3", tabindex = 5 })
</div>
<div class="editor-label">
#Html.LabelFor(model => model.A_INACT)
</div>
<div class="editor-field">
<span class="SpaceAvailableSearch">#Html.EditorFor(model => model.A_INACT, new { htmlAttributes = new { tabindex = 1, title = "Enter I to Inactivate Record" } }) </span>
#Html.ValidationMessageFor(model => model.A_INACT)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.A_NAME)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.A_NAME, new { #class = "form-control", #readonly = "readonly", #style = "background:#f2f3f3", tabindex = 6, #title = "This is the RE NAME." })
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Inact Page displayed in IE
This is the View Source:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Inact - MTS Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<link href="/Content/Myspec" rel="stylesheet" type="text/css" />
<link href="/Content/PagedList.css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">MATERIAL TEST SYSTEM</p>
</div>
<div class="float-right">
<section id="login">
Hello how are you today, <span class="username">AHTD\mase347</span>!
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>Login</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<style>
.container {
width: 50%;
float: left;
}
</style>
<h2>RE NAME </h2>
<h2>Inact Re Number</h2>
<form action="/MTS_RENAME/Inact/1" method="post"> <fieldset>
<legend>mts_rename</legend>
<br />
<div class="editor-label">
<label for="A_ID">ID</label>
</div>
<div class="editor-field">
<input class="form-control" data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="A_ID" name="A_ID" readonly="readonly" style="background:#f2f3f3" tabindex="4" type="text" value="1" />
</div>
<div class="editor-label">
<label for="A_RENO">RE NUMBER</label>
</div>
<div class="editor-field">
<input class="form-control" data-val="true" data-val-length="The field RE NUMBER must be a string with a maximum length of 3." data-val-length-max="3" id="A_RENO" name="A_RENO" readonly="readonly" style="background:#f2f3f3" tabindex="5" type="text" value="1" />
</div>
<div class="editor-label">
<label for="A_INACT">INACT</label>
</div>
<div class="editor-field">
<span class="SpaceAvailableSearch"> <input class="text-box single-line" data-val="true" data-val-length="The field INACT must be a string with a maximum length of 1." data-val-length-max="1" id="A_INACT" name="A_INACT" type="text" value="" /> </span>
<span class="field-validation-valid" data-valmsg-for="A_INACT" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="A_NAME">RE NAME</label>
</div>
<div class="editor-field">
<input class="form-control" data-val="true" data-val-length="The field RE NAME must be a string with a maximum length of 39." data-val-length-max="39" data-val-required="The RE NAME field is required." id="A_NAME" name="A_NAME" readonly="readonly" style="background:#f2f3f3" tabindex="6" title="This is the RE NAME." type="text" value="ZZ_TESTXDO THIS ZZXXXX" />
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
</form>
<div>
Back to List
</div>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2017 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/jquery-migrate-1.2.1.js"></script>
<script src="/bundles/bootstrap"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
</body>
</html>
HTML has a title attribute for a tooltip like this. (For anything more complex than a basic tooltip, you'd be looking at some custom styling and possibly JavaScript functionality to mimic a tooltip, depending on the approach taken. There are a variety of ready-made solutions available via Google for this.)
So where you set your custom HTML attributes:
htmlAttributes = new { tabindex = 1 }
You can simply add one for the title:
htmlAttributes = new { tabindex = 1, title = "Enter an I to Inactivate a record" }
you mean something like this?
#Html.EditorFor(model => model.A_INACT , new { #title="Enter an I to Inactivate a record." })
Or, if you want something more fancy, i would use jquery's tooltip
https://jqueryui.com/tooltip/
I'm using MVC 4 and Entity Framework and Grid.MVC for datagrid.
I have tried to implement a modal dialog to edit records using bootstrap.
When i click edit, modal window does not appear.
I follow the instruction how to create modal here:
Popup dialog for editing record using Grid.MVC in a ASP.NET MVC3
here is my code
YOU CAN DOWNLOAD MY SAMPLE PROJECT HERE
HomeController
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult HR201()
{
DCHREmployee dchremp = new DCHREmployee();
List<HREmployee> hrempList = new List<HREmployee>();
foreach (HREmployee hremp_ in dchremp.GetHREmployee(""))
{
hrempList.Add(hremp_);
}
return View(hrempList);
}
[HttpGet]
public ActionResult Edit(String EmpID)
{
DCHREmployee dchremp = new DCHREmployee();
List<HREmployee> hrempList = new List<HREmployee>();
foreach (HREmployee hremp_ in dchremp.GetHREmployee(EmpID))
{
hrempList.Add(hremp_);
}
return View(hrempList[0]);
}
}
HR201 cshtml view
#model IEnumerable<TAObjectModel.HREmployee>
#using GridMvc.Html
#using TAObjectModel
#{
ViewBag.Title = "HR201";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="#Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery-1.9.0.min.js")"></script>
<script src="#Url.Content("~/Scripts/gridmvc.min.js")"></script>
<title>Index</title>
</head>
<body>
<div class="container">
</div>
<div class="container">
#helper RenderDeleteForm(HREmployee hremp)
{
<form method="POST" action="#Url.Action("Delete", "HR201", new { EmpID = hremp.EmpID })">
<button type="submit" class="modal-link" onclick="return confirm('Are you sure you want to delete employee: #hremp.LastNm?');">
Delete
</button>
</form>
}
<h2>HR201</h2>
<div class="pull-left">
#using (Html.BeginForm())
{
<button type="submit" class="btn btn-primary">Add</button>
<button type="submit" class="modal-link">MODAL</button>
}
</div>
#Html.Grid(Model).Columns(columns =>
{
columns.Add(c => c.EmpID).Titled("EmpID").Filterable(true);
columns.Add(c => c.FirstNm).Titled("First Name");
//columns.Add(c => c.MiddleNm).Titled("Middle Name");
//columns.Add(c => c.LastNm).Titled("Lastn Name");
columns.Add(c => c.BirthDt).Titled("BirthDay").Format("{0:dd MMM yyyy}").Filterable(true);
columns.Add().Titled("Action")
.Sanitized(false)
.Encoded(false)
.RenderValueAs(d => Html.ActionLink("Edit", "Edit", new { EmpID = d.EmpID }, new { #class = "modal-link" }));
columns.Add().Titled("Action2")
.Sanitized(false)
.Encoded(false)
.RenderValueAs(c => RenderDeleteForm(c));
}).WithPaging(10).Sortable(true)
#Html.ActionLink("Click to Add Customer", "Edit",new{EmpID = "E9770003"}, new { #class = "modal-link" })
</div>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Loading…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<script>
//this script reset modal each time when you click on the link:
$(function () {
$(".modal-link").click(function (event) {
event.preventDefault();
$('#myModal').removeData("modal");
$('#myModal').modal({ remote: $(this).attr("href") });
});
})
</script>
</body>
</html>
EDIT VIEW
<div class="container">
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>HREmployee</legend>
<div class="editor-label">
#Html.LabelFor(model => model.EmpID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.EmpID)
#Html.ValidationMessageFor(model => model.EmpID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.FirstNm)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FirstNm)
#Html.ValidationMessageFor(model => model.FirstNm)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.LastNm)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LastNm)
#Html.ValidationMessageFor(model => model.LastNm)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.MiddleNm)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.MiddleNm)
#Html.ValidationMessageFor(model => model.MiddleNm)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.SenseID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.SenseID)
#Html.ValidationMessageFor(model => model.SenseID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.NickNm)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.NickNm)
#Html.ValidationMessageFor(model => model.NickNm)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.BirthDt)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.BirthDt)
#Html.ValidationMessageFor(model => model.BirthDt)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
</div>
**