I am trying to create a Kendo Grid but I keep getting the same error, saying that the kendoGrid is not a function:
This is my view:
#model IEnumerable<ModelLayer.Models.TableNotificationModel>
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#addTagHelper *, Kendo.Mvc
#using Kendo.Mvc.UI
#{
ViewData["Title"] = "Index";
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js">
window.rootUrl = '#Url.Content("~/")';
</script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.aspnetmvc.min.js"></script>
<h1>Upload index</h1>
<div>
<h4>Upload file</h4>
<form asp-controller="Upload" asp-action="Upload"
enctype="multipart/form-data" method="post">
<input type="file" name="file" />
<button type="submit" id="btn">Upload</button>
</form>
#if (ViewBag.Message != null)
{
<script>
$(document).ready(function(){
alert('#Html.Raw(ViewBag.Message)');
});
</script>
}
</div>
<div class="clearfix">
#(Html.Kendo().Grid<ModelLayer.Models.TableNotificationModel>()
.Name("notificationGrid")
.Columns(columns =>
{
columns.Bound(c => c.OPERATOR_OBJECTID).Title("ID").Hidden();
columns.Bound(c => c.SETTLEMENT_CODE).Title("settlement code").Width("100px");
columns.Bound(c => c.TECHNOLOGY_CODE).Title("tech code").Width("100px");
columns.Bound(c => c.UPLOAD_SPEED_CLASS_CODE).Title("upload").Width("100px");
columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_CODE).Title("download").Width("100px");
columns.Bound(c => c.DATA_CATEGORY_QOS_CODE).Title("data category").Width("100px");
columns.Bound(c => c.SHAPE).Title("shape").Width("100px");
//columns.Bound(c => c.Message).Title("message").Width("100px");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Upload_Read", "Upload"))
)
)
</div>
I made sure not to have the jQuery script twice, so here's my _Layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - M20_AEK</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">M20_AEK</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="CustomerType" asp-action="LoadCustomerType">Customer Type</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="DataCategory" asp-action="LoadDataCategory">Data Category</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Upload" asp-action="Index">Upload</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - M20_AEK - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
This is my controller:
public ActionResult Upload_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(json_read.ToDataSourceResult(request));
}
I tried placing the Kendo and jQuery scripts in _Layout and that didn't help. I tried different formats for the columns and column menu and fields for the Kendo grid, but it still throws the same error.
What could the issue be?
<script src="https://code.jquery.com/jquery-1.12.3.min.js">
window.rootUrl = '#Url.Content("~/")'; </script>
does not look valid (you normally have src or code inside the tag - not both). I'd suggest removing the src.
I found the solution. If you are using jQuery Office, any version, look for the plugins file attached to your project which contains jQuery code and delete the next line completely:
( !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0): )
to the end of the line
{return C.$===k&&(C.$=Jt),e&&C.jQuery===k&&(C.jQuery=Qt),k},e||(C.jQuery=C.$=k), k});
Because it will be duplicated in jQuery.js file. This is what is causing the error:
Related
I'm trying to pass movie.Id as a parameter and my IDE is complaining that I have to do a boxing conversion. I've looked up boxing conversions but don't know how to do it in this context. Also I'm trying to pass movies to increment and decrement the page and running into the same problem. The error is happening inside the anchor tag inside the foreach loop.
#using System.Collections
#{
Layout = null;
int IncrementPage(MovieResults movies) => movies.Page++;
int DecrementPage(MovieResults movies) => movies.Page--;
IEnumerable<MovieResults> movieResults = (IEnumerable<MovieResults>)ViewData["movies"]
Root movies = ViewData["movies"] as Root;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Movie Streaming Availability App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-4">
<button type="button" asp-controller="Home" asp-action="Index" style="background: #1b6ec2">Home Page</button>
</div>
<div class="col-6">
<h1 class="text-center">Movie Streaming Availability App</h1>
</div>
<div class="dropdown col-4">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropDownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="False">Sort by Genres</button>
<div class="dropdown-menu" aria-labelledby="dropDownMenuButton">
<a class="dropdown-item" asp-controller="Movie" asp-action="GetMovies" asp-route-genreId="28">Action</a>
<a class="dropdown-item" asp-controller="Movie" asp-action="GetMovies" asp-route-genreId="12">Adventure</a>
<a class="dropdown-item" asp-controller="Movie" asp-action="GetMovies" asp-route-genreId="16">Animation</a>
<a class="dropdown-item" asp-controller="Movie" asp-action="GetMovies" asp-route-genreId="35">Comedy</a>
<a class="dropdown-item" asp-controller="Movie" asp-action="GetMovies" asp-route-genreId="80">Crime</a>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row">
#foreach (var movie in movieResults)
{
<div class="col-3">
<a asp-controller="Movie" asp-action="MoviePage" asp-route-Id="#movie.Id"><img src="https://image.tmdb.org/t/p/w300/#movie.PosterPath" alt="#movie.Title"></a>
<label>#movie.Title</label>
</div>
}
</div>
</div>
</main>
<footer>
<div class="container">
<div class="row">
<div class="col-3">
<button type="button" asp-controller="Movie" asp-action="GetMovies" asp-route-page="#(new MovieResults(movies.Page), #IncrementPage(movies))">Next Page</button>
</div>
<div class="col-3">
<button type="button" asp-controller="Movie" asp-action="GetMovies" asp-route-page="#(new MovieResults(movies.Page), #DecrementPage(movies))">Previous Page</button>
</div>
<div class="col-3">
<label class="text-center">Total Number of Pages</label>
<h3 class="text-center">#(new MovieResults(movies.TotalPages),movies.TotalPages)</h3>
</div>
<div class="col-3">
<label class="text-center">Total Number of Results</label>
<h3 class="text-center">#(new MovieResults(movies.TotalResults),movies.TotalResults)</h3>
</div>
</div>
</div>
<script type="text/javascript" src="lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="~/js/site.js" asp-append-version="true"></script>
</footer>
</body>
</html>
You can to this only, and only if you are sure that the object contains an integer, otherwise it will throw a runtime conversion error exception
For razor #((int)Model.Integer), for code int IncrementPage(MovieResults movies) => ((int)movies.Page)++;
It's never a good ideia to cast objects with no real need, specially inside a foreach loop since boxing/unboxing uses a nice amount of resources to do so. I believe that the best approach is adapt your Model to reflect the "front-end" needs and avoid casting
How to switch color between the six parameters, for example, when clicking (Home) turns text color to red and back to its same color black when clicking on (Projects) and when clicking (Timesheet) turns to red color and others remain same and so on with others, by using visual studio asp.net core 3.1
The code for(_Layout.cshtml)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Bearu Firtas</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body id="body">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-5">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">Bureau Veritas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Proposel">Proposels</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Project">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/TimeSheet">TimeSheet</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Report">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Invoice">Invoice By Month</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Certificate">Certificates</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<!--<footer class="border-top footer text-muted">
<div class="container">
© 2020 - BearuFirtas_App
</div>
</footer>-->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
the code for (site.js)
const nodes = document.querySelectorAll('.color-toggle');
nodes.forEach((node) => {
node.addEventListener('click', (e) => {
nodes.forEach(ele => {
if (ele === e.target) {
ele.style.color = 'red'
} else {
ele.style.color = 'black'
}
})
})
})
The picture of layout,
You need to add the color-toggle class to all those tabs in your navbar, and include the script below,
const nodes = document.querySelectorAll('.color-toggle');
nodes.forEach((node) => {
node.addEventListener('click', (e) => {
nodes.forEach(ele => {
if(ele === e.target){
ele.style.color = 'red !important'
} else {
ele.style.color = 'black !important'
}
})
})
})
<div class="color-toggle">Home</div>
<div class="color-toggle">Projects</div>
<div class="color-toggle">Section 3</div>
<div class="color-toggle">Others</div>
Update 1: According to the comment, when using the code for <a> tag, you should use the !important in order to override the default styling of <a> tag.
add something like this to your js:
document.getElementById("home").addEventListener("click", Red, false) //add id home to your home button
document.getElementById("projects").addEventListener("click", Black, false)//add id projects to your home button
document.getElementById("timestamp").addEventListener("click", Blue, false)//add id home to your timestamp button
function Red () {
document.getElementById("body).style.color = "red";
}
function Black () {
document.getElementById("body).style.color = "black";
}
function Blue () {
document.getElementById("body).style.color = "blue";
}
I am creating asp.net web api and i am trying to add a calendar control in one of the fields via date-time picker. After i run the application and press the button for creating article/event it shows this error: System.Web.HttpException: 'Section already defined: "scripts".'
Here is my _Layout.cshtml
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Public Events</title>
#Styles.Render("~/Content/css")
#RenderSection("styles", required: false)
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</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("Events", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#if (Request.IsAuthenticated)
{
<li>#Html.ActionLink("My Events", "My", "Events")</li>
<li>#Html.ActionLink("Create Event", "Create", "Events")</li>
}
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#Html.Partial("_Notifications")
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Events Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Scripts section defined twice. Remove one or combine them.
#section scripts
{
//...
}
I have attached the code below, please see and i am a newbie to this, it would be so much nice if you post in code, please...
<!DOCTYPE html>
<html>
<head>
#model Forecaster.Models.ForecastModel
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Forecaster</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
#for (int i = 0; i < Model.UsersInfoList.Count(); i++)
{
<div class="navbar" role="main" style="margin-bottom:-50px;">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="~/Images/logo.jpg" alt="Forecaster" style="padding-left:inherit;"></a>
</div>
#if ((Model.UsersInfoList[i].RoleId == 1) && (Model.UsersInfoList[i].UserName == Session["UserName"].ToString()))
{
<ul class="nav navbar-nav">
<li>#Html.ActionLink("HOME", "Dashboard", "Dashboard")</li>
<li>#Html.ActionLink("Employee", "Index", "EmployeeMasters")</li>
<li>#Html.ActionLink("Project", "Index", "ProjectMasters")</li>
<li>#Html.ActionLink("Export", "ExportToExcel", "Dashboard")</li>
</ul>
<ul class="nav navbar-nav" style="float:right; padding-right:59px;">
<li>
#Html.ActionLink("Logout", "UserDashboard", "Login")
</li>
</ul>
<p class="navbar-text navbar-right">
<a href="#">
<span class="glyphicon glyphicon-user"></span> #if (Session["UserName"] != null)
{<text>#Session["UserName"].ToString() </text> }
</a>
</p>
}
else
{
<ul class="nav navbar-nav">
<li>#Html.ActionLink("HOME", "Dashboard", "Dashboard")</li>
<li>#Html.ActionLink("Project", "Index", "ProjectMasters")</li>
</ul>
<ul class="nav navbar-nav" style="float:right; padding-right:59px;">
<li>
#Html.ActionLink("Logout", "UserDashboard", "Login")
</li>
</ul>
<p class="navbar-text navbar-right">
<a href="#">
<span class="glyphicon glyphicon-user"></span> #if (Session["UserName"] != null)
{<text>#Session["UserName"].ToString() </text> }
</a>
</p>
}
</div>
<div class="container" style="margin-top:45px;">
#RenderBody()
<hr />
<div class="col-lg-pull-10">
<footer></footer>
</div>
</div>
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
}
Please anyone tell me what am i doing wrong? i need to authorize the user and renderbody in both cases!
Thankyou!
You have RenderBody inside a FOR loop...
#for (int i = 0; i < Model.UsersInfoList.Count(); i++)
Are you sure Model.UsersInfoList has only one record in it?
You're for loop goes all the way to the end, so #RenderBody is produced more than once.
your below section should be out from the foreach loop.
<div class="container" style="margin-top:45px;">
#RenderBody()
<hr />
<div class="col-lg-pull-10">
<footer></footer>
</div>
</div>
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
I'm going through the Lynda.com ASP.NET MVC 5 Essentials course, when out of nowhere, I start getting plain HTML appearing when I try to view my site. I've tried different browsers with no luck. Any idea what could cause this?
EDIT: I should note, I'm not getting any errors at all.
I'll throw up some of my code, but I'm not 100% sure which pieces are relevant.
index.cshtml:
#{
ViewBag.Title = "Home Page";
}
<div class="row">
<div class="col-md-6 margin-top-20">
<a href="#" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-circle-arrow-down">Withdrawal
</span>
<span class="glyphicon glyphicon-print">
Print Statement
</span>
<span class="glyphicon glyphicon-transfer">
Withdrawal
</span>
<span class="glyphicon glyphicon-circle-arrow-up">
Deposit
</span>
</a>
</div>
<div class="col-md-6 margin-top-20"></div>
}
HomeController.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AutomatedTellerMachine.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[ActionName("about-this-atm")]
public ActionResult About()
{
return View();
}
public ActionResult Contact()
{
ViewBag.TheMessage = "Having trouble? Send us a message!";
return View();
}
public ActionResult Foo()
{
return View("About");
}
public ActionResult Serial(string letterCase)
{
var serial = "ASPNETMVC5ATM1";
if (letterCase == "lower")
{
return Content(serial.ToLower());
}
return Json(new { name = "serial", ValueProvider = serial }, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult Contact(string message)
{
// TODO : send message to HQ
ViewBag.Message = "Thanks, we got your message!";
return View();
}
}
}
Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - MVC Bank</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("MVC Bank", "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>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - MVC Bank - #Html.Action("Serial", "Home")</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
And this is what I see in my browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - MVC Bank</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.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>
<a class="navbar-brand" href="/">MVC Bank</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-6 margin-top-20">
<a href="#" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-circle-arrow-down">Withdrawal
</span>
<span class="glyphicon glyphicon-print">
Print Statement
</span>
<span class="glyphicon glyphicon-transfer">
Withdrawal
</span>
<span class="glyphicon glyphicon-circle-arrow-up">
Deposit
</span>
</a>
</div>
<div class="col-md-6 margin-top-20"></div>
</div>
}
<hr />
<footer>
<p>© 2016 - MVC Bank - {"name":"serial","ValueProvider":"ASPNETMVC5ATM1"}</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>