This is what the browser shows me:
This is my _Layout:
#using Microsoft.AspNetCore.Mvc.Localization
#inject IViewLocalizer _localizer
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>#_localizer[(string)ViewData["Title"]] - Accounter</title>
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/site.webmanifest">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
<link rel="stylesheet" href="~/css/site.css"/>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.bootstrap-v4.min.css"/>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand navbar-light">
<div class="container">
<a class="navbar-brand" asp-action="Index">Tasker</a>
<div class="navbar-nav">
#if (User.Identity.IsAuthenticated)
{
<a class="nav-link text-dark" asp-controller="Authentication" asp-action="LogOut">#_localizer["Log out"]</a>
}
else
{
<a class="nav-link text-dark" asp-controller="Authentication" asp-action="Index">#_localizer["Log in"]</a>
}
</div>
<partial name="_SelectLanguagePartial"/>
</div>
</nav>
</header>
<div></div>
<div class="vh-100 pt-5 backdrop">
<div class="container rounded-3 p-3">
<main role="main">
#RenderBody()
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/cdc2f29cb5.js" crossorigin="anonymous"></script>
#await RenderSectionAsync("Scripts", false)
</body>
</html>
I require user to be authenticated and redirect to the authentication page in ConfigureServices.
services.AddAuthorization(options =>
{
options.FallbackPolicy = new AuthorizationPolicyBuilder()
.RequireAuthenticatedUser()
.Build();
});
services.ConfigureApplicationCookie(options =>
{
options.LoginPath = "/Authentication";
options.SlidingExpiration = true;
});
AuthenticationController:
public class AuthenticationController : Controller
{
private readonly IAuthenticationBL _authenticationBL;
public AuthenticationController(IAuthenticationBL authenticationBL)
{
_authenticationBL = authenticationBL;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Register([Bind("Email", "Password")] AuthenticationVM vm)
{
if (!ModelState.IsValid) return View("Index", vm);
await _authenticationBL.RegisterAsync(vm.Email, vm.Password, Request);
return RedirectToAction("Index", "GeneralInformation");
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> LogIn([Bind("Email", "Password")] AuthenticationVM vm)
{
if (!ModelState.IsValid) return View("Index", vm);
await _authenticationBL.LogInAsync(vm.Email, vm.Password, User);
return RedirectToAction("Index", "GeneralInformation");
}
public async Task<IActionResult> LogOut()
{
await _authenticationBL.LogoutAsync(User);
return RedirectToAction("Index");
}
}
Authentication Index view:
#model Web.Models.VMs.AuthenticationVM
#inject IViewLocalizer _localizer
#using Microsoft.AspNetCore.Mvc.Localization
#{
ViewData["Title"] = "Authentication";
}
<div class="card w-50 container justify-content-center">
<div class="card-body">
<h5 class="text-center mb-3">#_localizer["Log in"]</h5>
<form asp-controller="Authentication" id="authentication-form">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-floating mb-4 row">
<input asp-for="Email" class="form-control" placeholder="Email" autocomplete="email">
<label asp-for="Email">#_localizer["Email"]</label>
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-floating mb-4 row">
<input asp-for="Password" class="form-control" placeholder="Password">
<label asp-for="Password">#_localizer["Password"]</label>
<i class="btn fa-solid fa-eye" id="password-toggle"></i>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="row justify-content-between">
<button type="submit" class="col-sm-5 btn btn-primary" asp-action="Register">#_localizer["Register"]</button>
<button type="submit" class="col-sm-5 btn btn-primary" asp-action="LogIn">#_localizer["Log in"]</button>
</div>
</form>
</div>
</div>
#section Scripts {
<script src="~/js/authentication.js"></script>
}
The problem was that I deleted the indication of default action in Startup:
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
"default",
"{controller=Home}/{action}");
});
The framework wasn't able to understand what action to invoke on redirection to a controller, and I didn't get a page. Fix:
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
"default",
"{controller=Home}/{action=Index}");
});
Related
I'm playing around with ejs and want to know how to have some todos appear in the html?
This is what i have to work with:
app.get("/", (req, res) => {
db.collection("todoejs")
.find()
.toArray((err, todoejs) => {
res.render("todo");
});
});
app.post("/create-item", (req, res) => {
console.log(req.body);
db.collection("todoejs").insertOne({todo: req.body.item});
res.redirect("/");
});
I have a todo.ejs in my views folder and would like to know how to get the todos to show.
This is what's in the ejs file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple To-Do App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="display-4 text-center py-1">To-Do App</h1>
<div class="jumbotron p-3 shadow-sm">
<form action="create-item" method="POST">
<div class="d-flex align-items-center">
<input name="item" autofocus autocomplete="off" class="form-control mr-3" type="text" style="flex: 1;">
<button class="btn btn-primary">Add New Item</button>
</div>
</form>
</div>
<ul class="list-group pb-5">
<li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
<span class="item-text"><%= todoejs %></span>
<div>
<button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
<button class="delete-me btn btn-danger btn-sm">Delete</button>
</div>
</li>
</ul>
</div>
</body>
</html>
The second parameter of res.render takes in the variables you want to pass to the template.
In this example, you might want to do res.render("todo", { todoejs: todoejs });
Then todoejs is defined in the template and you can use it however you wish.
I am developing shopping cart project in visual studio 2017. I am using vue js for front end development and mysql for backend . I added the axios script in my html code . When i run the application I following errors in google chrome console windows ..
Uncaught (in promise) ReferenceError: axios is not defined
at Promise.then.products (index.html:75)
at new Promise (<anonymous>)
at Vue.getAllProducts (index.html:74)
at index.html:130
index.html:110 Uncaught (in promise) ReferenceError: axios is not defined
at Promise.then.vendors (index.html:110)
at new Promise (<anonymous>)
at Vue.findAllVendors (index.html:109)
at index.html:131
Here is my html code .
<!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="bootstap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.map"></script>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Show All Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/AddProducts.html">Add Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html"> cart</a>
</li>
</ul>
</nav>
<br />
<div class="container" id="app">
<select class="form-control" id="sel1" v-on:change="applyfilters($event.target.value)">
<option value="">Select Any value</option>
<option v-for="v in vendors" :value="v.id">{{ v.name }} </option>
<!-- <option value="v.id">{{v.name}}</option>-->
<!--<option value="2">MI</option>-->
</select>
<br />
<div class="row col-12" id="product-list">
<div class="col-4 card mx-2 p-2" v-for="product in products" style="margin-bottom: 20px">
<b>Product Name :</b>{{product.name}}
<div class="row">
<div class="col-4 m-3 p-3">
<b>Price :</b> {{product.price}}
</div>
<div class="col-4 m-3 p-3">
<b>Vendor :</b> {{product.vendor.name}}
</div>
<div class="col-6 m-2 p-3">
<button class="col btn btn-primary" v-on:click="addToCart(product.id)">Buy</button>
</div>
</div>
</div>
<br />
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
newTask: '',
id: 0,
url: '/todos',
status: false,
products: [],
vendors: []
},
methods: {
getAllProducts() {
new Promise((resolve) => {
axios.get('/api/products').then(function (response) {
resolve(response.data)
})
}).then((data) => {
this.products = data
// console.log(this.products)
})
},
addToCart(id) {
// console.log(id)
var obj = { productId: id };
// console.log(obj)
new Promise((resolve) => {
axios.post('/api/cart/', obj).then(function (response) {
resolve(response.data)
})
}).then((data) => {
// console.log(data)
console.log(data)
console.log(data.id)
if (!data.id) {
// console.log("fist login")
window.alert("Fist login ")
window.location = "signin.html";
}
else {
// console.log("successfully add to cart")
window.alert("product has been added to your cart")
}
})
},
findAllVendors() {
new Promise((resolve) => {
axios.get('/api/vendor').then(function (data) {
resolve(data.data)
// console.log(data.data)
})
}).then((data) => {
this.vendors = data
})
},
applyfilters(id) {
new Promise((resolve) => {
axios.get('/api/products/' + id).then(function (response) {
resolve(response.data)
})
}).then((data) => {
this.products = data
// console.log(this.products)
})
}
}
})
app.getAllProducts();
app.findAllVendors();</script>
</body>
</html>
Here is screen shot when i run the applications .
Did you try importing it? Maybe add this to your imports in head tag.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
I have a page with an <asp:FileUpLoad> tag that I place a glyphicon into. When I click on the submit button without selecting a file, bootstrapvalidator flags the field as invalid and displays the error message. The issue is that the glyphicon icon gets stretched to include the <asp:FileUpLoad> field and the bootstrap error message.
This is what the form looks like prior to clicking on Submit:
and this is what it looks like after I click on Submit:
Here is the code that I am running:
<head runat="server">
<title></title>
<script src="../Scripts/modernizr-2.6.2.js"></script>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link id="Link1" rel="stylesheet" type="text/css" href="../Content/bootstrap.css" />
<link id="Link2" rel="stylesheet" type="text/css" href="../Content/bootstrapValidator.min.css" />
<link id="Link3" rel="stylesheet" type="text/css" href="../Content/bootstrap-datepicker.min.css" />
<link id="StyleLink1" rel="stylesheet" type="text/css" href="../Content/Site_VSTT.css"/>
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="../Scripts/respond.js" type="text/javascript"></script>
<script src="../Scripts/moment.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script src="../Scripts/bootstrapValidator.js" type="text/javascript"></script>
</head>
<body>
<form runat="server" id="contactForm" class="form-horizontal" >
<div class="form-group">
<label class="col-md-3 control-label">File Name</label>
<div class="col-md-6 input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-file"></i>
</span>
<asp:FileUpload ID="uploadfile" name="uploadfile" CssClass="form-control" runat="server" ClientIDMode="Static" placeholder="Enter name of file to upload"/>
</div>
<br /><br />
<div class="col-md-1 col-md-offset-3">
<asp:LinkButton ID="btnCancel" runat="server" CssClass="btn btn-default btn-sm">
<span aria-hidden="true" class="glyphicon glyphicon-remove"></span> Cancel
</asp:LinkButton>
<button id="btnSubSearch" runat="server" type="submit" class="btn btn-primary btn-sm" >
<span aria-hidden="true" class="glyphicon glyphicon-arrow-right">
</span> Validate
</button>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('#contactForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
uploadfile: {
validators: {
notEmpty: {
message: 'The file name is required'
}
}
}
}
})
})
</script>
</body>
When calling a controller action like this:
controller/action
everything works great. But when calling the same action with a id-parameter like:
controller/action/id
ex. home/index/10
the view seems not to render according to mu css-file....
Anyone that know anything about this??
Call:
<INPUT class="btn btn-default" type="button" value="Last" onclick="window.location.href = '/Home/Statistics/4'">
Action
public ActionResult Statistics(string id)
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
Variables.logInStatusAvtiveUser = "notActive";
return View();
}
public ActionResult Home()
{
if (Variables.logInStatusAvtiveUser == "active")
{
string[] nameCampain = { "Omega3", "VitaminC", "VitaminD" };
string[] doublets = { "34", "22", "21" };
string[] customer = { "21", "12", "11" };
string[] hit = { "2", "4", "6" };
string[] nonValid = { "11", "12", "13" };
string[] batch = { "30", "40", "20" };
string[] batchActual = { "30", "40", "20" };
string[] total = { "30", "40", "20" };
string[] totalActual = { "30", "40", "20" };
string[] feedBackActual = { "30", "40", "20" };
ViewBag.chart = CToHTML.CreateHTMLChart(nameCampain, doublets, customer, hit, nonValid, batch, batchActual, total, totalActual, feedBackActual);
return View();
}
else
{
return RedirectToAction("Index", "Home");
}
}
public ActionResult Database()
{
if (Variables.logInStatusAvtiveUser == "active")
{
return View();
}
else
{
return RedirectToAction("Index", "Home");
}
}
public ActionResult Statistics(string id)
{
if (Variables.logInStatusAvtiveUser == "active")
{
string q = "`Name`,`Family Name`,`Gender`,`Zip Code`,`Town`,`Adress`";
MySqlBinding dbConn = new MySqlBinding(Variables.serverActiveUser, Variables.portActiveUser, Variables.databaseActiveUser, Variables.usernameActiveUser, Variables.passwordActiveUser);
if (id == "1")
{
ViewBag.DB = CToHTML.ConvertDataTableToHTML(dbConn.SelectFromDT(Variables.databaseActiveUser, "Leads", q, "0", "50"));
}
if (id == "2")
{
ViewBag.DB = CToHTML.ConvertDataTableToHTML(dbConn.SelectFromDT(Variables.databaseActiveUser, "Leads", q, "50", "100"));
}
if (id == "3")
{
ViewBag.DB = CToHTML.ConvertDataTableToHTML(dbConn.SelectFromDT(Variables.databaseActiveUser, "Leads", q, "100", "150"));
}
if (id == "4")
{
ViewBag.DB = CToHTML.ConvertDataTableToHTML(dbConn.SelectFromDT(Variables.databaseActiveUser, "Leads", q, "150", "200"));
}
return View();
}
else
{
return RedirectToAction("Index", "Home");
}
}
}
View:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Sticky Footer Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.css" rel="stylesheet">
<%# Import Namespace="CAIUGO_UI_BOOTSTRAP_V2" %>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CAIUGO</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Database</li>
<li class="active">Statistics</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<table style="width: 100%; margin-top: 100px;">
<tr>
<td style="width: 10%"> </td>
<td style="width: 60%"> </td>
<td style="width: 20%">
<div class="pull-right">
<INPUT class="btn btn-default" type="button" value="First" onclick="window.location.href = '/Home/Statistics/1'">
<INPUT class="btn btn-default" type="button" value="<-" onclick="window.location.href = '/Home/Statistics/2'">
<INPUT class="btn btn-default" type="button" value="->" onclick="window.location.href = '/Home/Statistics/3'">
<INPUT class="btn btn-default" type="button" value="Last" onclick="window.location.href = '/Home/Statistics/4'">
</div>
</td>
<td style="width: 10%"></td>
</tr>
</table>
<table style="width: 100%">
<tr>
<td style="width: 10%"> </td>
<% dataTable.InnerHtml = ViewBag.DB;%>
<td id="dataTable" runat="server">
<%-- Autocreated HTML Table here --%>
</td>
<td style="width: 10%"> </td>
</tr>
</table>
</div>
<!-- Begin page content -->
<div style="height: auto; width: 80%">
</div>
<div id="footer">
<div class="container">
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</form>
</body>
</html>
If the css is not applied it means css file is not loaded because it can be due to css file url issue, what you need to do is to use #Url.Content() helper for css and js file include like this:
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet">
and js file as well:
<script src="#Url.Content("~/js/bootstrap.min.js")"></script>
and ico icon as well:
<link rel="shortcut icon" href="#Url.Content("~/docs-assets/ico/favicon.png")">
this approach should be applied on img tags as well in the views, otherwise you will experience that sometimes images will also not load because of wrong url.
this will generate the correct url from the relative url to load the css and js in the view.
you can see here, why to use it:
Why should I use #Url.Content("~/blah-blah-blah")?
and here is MSDN docs
I have just started a new project in MVC4 using some code from an existing MVC3 project. I can force my form to ajax reload the specific DIV, but not using the normal submit method, only with the test doSomthing() javascript function. What am I missing?
To clarify: The first button does not work right, the second one does - but I don't want to do it that way.
VIEW
#using (Ajax.BeginForm("Method1", null,
new AjaxOptions { HttpMethod = "post", UpdateTargetId = "divPartial1" },
new { id = "form1" }))
{
<div class="data">
#Html.LabelFor(x => x.TotalSubmitted, new { #class = "total" })<div class="number total">#Html.FormatValue(Model.TotalSubmitted, "{0:n0}")</div>
...
</div>
<div class="details">
<div id="divPartial1">
#Html.Partial("ReportDashboardAppPartial")
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="k-button"><span class="k-icon k-i-search" /></button>
<button type="button" name="Save" value="Save" onclick="doSomething(); return false;"><span class="k-icon k-i-search" /></button>
</div>
}
<script type="text/javascript">
function doSomething() {
$.ajax({
url: '#Url.Action("Method1", "Controller")',
type: 'post',
data: $('form#form1').serialize(),
success: function (result) {
$('#divPartial1').html(result);
}
});
}
</script>
_Layout
#model BaseViewModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<link href="#Url.Content("~/Content/kendo.compatibility.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")" rel="stylesheet" type="text/css" />
#RenderSection("styles", false)
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/kendo.aspnetmvc.min.js")"></script>
#RenderSection("scripts", false)
</head>
<body>
#Html.Partial("_AlertWindow")
<div id="wrapper">
<header>
<div id="logindisplay">
#Html.Partial("_LoginPartial")
</div>
<a href="#Url.Action("Index", "Home")">
<div id="logo"></div>
</a>
<div id="title">
<h1>Ha!</h1>
</div>
#(Html.Kendo().Menu().Name("Menu").BindTo("Main").SecurityTrimming(true))
</header>
<div id="main">
#RenderBody()
</div>
<footer>
<div id="version">#Html.ActionLink("Version " + #Model.CurrentVersion, "About", "Home")</div>
</footer>
</div>
#RenderSection("end_scripts", false)
</body>
</html>
I know this should work.
I had the same problem. The solution is to add a statement in _Layout.cshtml page.
#Scripts.Render("~/bundles/jqueryval")
The definition of ScriptBundle("~/bundles/jqueryval") as below
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));