I am new in MVC and i was looking for by above error but a i can't find it.
I create a partial view to EDIT and CHANGE the data base. Partial View is callling from INDEX.cshtml.
When I call one specific item the program below is executed at the first time in this point:
I have one field (date) with drop down. I use the datepicker function. In debug mode at the same program below is executed again because to the datepicker function and IN THIS MOMENT i receive a warning message at the command Open as shown at the second screenshot below.
_Edit.cshtml
Im my partial view I have the code below (part) with the datepicker. Two points. Will be this the problem (two points to datepicker ?).
Does anyone can help me to solve this problem ?
Thanks in advance
#model i_Projeto.Models.Ativ_Compr_Models
#using Newtonsoft.Json
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
.
.
.
.
.
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script src="~/Scripts/locales/bootstrap-datepicker.pt-BR.min.js"></script>
<script type="text/javascript">
$('#DeadLine').datepicker({
language: 'pt-BR',
autoclose: true,
orientation: "bottom right",
dateFormat: 'dd/mm/yyyy',
changeMonth: true,
changeYear: true,
selectOtherMonths: true
});
I solved the problem!
remove it in partial view:
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
And put it in the View Father.
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
Related
Within my sitefinity project I am using Kendo.Mvc.UI controls like #Html.Kendo().TextBox() and #(Html.Kendo().Grid in the view. I have also included the files in the view using the #Html.Script. But I am getting this error about the kendo.syncReady is not a function am I missing anything else?
#Html.Script(ScriptRef.JQuery, "top")
#Html.Script(Url.WidgetContent("~/Mvc/Scripts/Kendo/2020.3.1118/kendo.all.min.js"), "top")
<link rel="stylesheet" href="~/Mvc/Scripts/kendo/2020.3.1118/styles/kendo.bootstrap-v4.min.css" />
<link href="~/Mvc/Scripts/Kendo/2020.3.1118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Mvc/Scripts/Kendo/2020.3.1118/styles/kendo.default.min.css" rel="stylesheet" />
This is how you want to render kendo and jquery to avoid conflicts
https://github.com/sitefinitysteve/RandomSiteControlsMVC/blob/master/RandomSiteControlsMVC/MVC/Views/TabStrip/Kendo.cshtml
You also want to do something like this so it'll always render below jquery
https://github.com/sitefinitysteve/RandomSiteControlsMVC/blob/master/Demo/ResourcePackages/RSC/MVC/Views/Layouts/default.cshtml#L207
It's all about predictability.
My goal is to do the following in ASP Net Core:
Create a jQuery DataTable
Show the number of entries in the
datatable
Make sure the user is able to export the dataset in excel,
csv, pdf, and copy the results Have all of the references installed
using the CDN (Content Delivery Network) in ASP Net Core
My question
Are there any tutorials on youtube, or any articles that describe how to do this?
I am following this tutorial https://youtube.com/watch?v=Pt7O-X9vmjw The problem is that, although I am able to create a datatable using his tutorial, the following problems continue:
The number of entries in the datatable is missing.
The user is unable to export the dataset in excel, csv, pdf, and copy the results
I have been trying to figure out how to do this for weeks. My suspicion is that bootstrap, which is already installed in the layout, is causing these problems. Any help is greatly appreciated.
Sincerely,
Sandra
To achieve your requirement of using DataTables with data export functionality, you can refer to the following example.
In _Layout.cshtml
CSS references
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/site.css" />
JS references
<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>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
In View page
Add required JS references of data export plug-ins
#section scripts{
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script>
$(function () {
$("#myTable").dataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
})
</script>
}
Test Result
I'm adding a new web page to my app using polymer2. I've already done similar adds before but this one really does not show on the page even tho i have the imports and the components ready...
I'm starting to have some headaches watching my code trying to find what is wrong so maybe some of you will find the error instantly.
As i said before i've already implemented other pages on the app using the
Maybe the problem comes from the "lazy import" of my new component but it worked fine for the other previously added components.
i tried to look for misspelled DOM or components but everything looks fine
This is the menu from which i go to the other pages
<!-- i import the components like that -->
<link rel="lazy-import" href="c2m-connexion.html">
<link rel="lazy-import" href="c2m-newPage.html">
<app-drawer-layout id="drawerLayout" force-narrow>
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<div id="anonyme">
<a name="connexion" href="[[rootPath]]connexion">Connexion</a>
<a name="newPage" href="[[rootPath]]newPage">New Page !!</a>
</div>
<!--[... Some other pages in the menu ...]-->
<div id="top ">
<iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404 " role="main ">
<c2m-connexion name="connexion"></c2m-connexion>
<c2m-newPage name="newPage" subroute="{{subroute}}"></c2m-newPage>
<!-- other pages implemented the same way-->
</iron-pages>
</div>
i use this script cause all my files have a normalised name :
// Load page import on demand. Show 404 page if fails
let resolvedPageUrl = this.resolveUrl('c2m-' + page + '.html');
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true);
}
Now the component itself (c2m-newPage) :
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/neon-animation/web-animations.html">
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="./components/sweet-alert.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="./services/c2m-service.html">
<link rel="import" href="components/c2m-menu-newPage.html">
<dom-module id="c2m-newPage">
<!-- Defines the element's style and local DOM -->
<template>
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/util.css">
<style is="custom-style" include="shared-styles">
:host {
display: flex;
padding: 9px;
}
paper-input#email-input {
width: 50%;
}
.card-content paper-dropdown-menu {
width: 100%;
}
</style>
<!-- I TRIED PUTTING SOME TEXT HERE ASWELL TO SEE IF THE COMPONENT WAS LOADING BUT NOTHING APPEARED -->
<c2m-menu-newPage></c2m-menu-newPage>
<!-- Services -->
<c2m-service id="service"></c2m-service>
</template>
<script>
class C2mNewPage extends Polymer.Element {
/**
* #inheritdoc
**/
connectedCallback() {
super.connectedCallback();
}
static get is() {
return 'c2m-newPage';
}
}
customElements.define(C2mNewPage.is, C2mNewPage);
</script>
</dom-module>
i expect the page to show something, at this point the text i tried to put didn't even show and i think if i put a some text it is supposed to appear on the page. So i don't know where it comes from.
Thanks for the answers !
Renaming the element to c2m-new-page probably solves your problem.
Polymer does not go well with capitals, since your element has the name 'c2m-newPage' it probably can't be found when used in the dom, since it searches for an element with lower letters or with the Capital replaced by a dash-lowercase.
I am attempting to implement paging in my simple ASP.NET Core 2.2 application.
I executed the command Install-Package NonFactors.Grid.Mvc6 to install the package and followed all the installation steps described in this page.
I can see the data displayed in grid but when I click to show the next records the paging in not moving to show the other records.
I am missing any scripts?
I made the test followed the tutorial that you provided , but it worked well. Make sure your styles and scripts are saved as follows:
Then include grid styling sheet and grid scripts to _Layout.cshtml like below:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/Content/MvcGrid/mvc-grid.css" rel="stylesheet">
</environment>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/MvcGrid/mvc-grid.js"></script>
<script>
[].forEach.call(document.getElementsByClassName('mvc-grid'), function (element) {
new MvcGrid(element);
});
</script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
I have found a few questions relating to this, but generally there are many different answers and they all seem very messy and complex.
If that is what needs to be done, then ok i better sit down and tackle it.
I want to know what the simplest and most efficient way is to add content to your head from partial views.
Reason I need to do this is i need certain java script and jquery on each page and it differs from page to page. I donot just want to add them all in the _layout view.
You can do this with sections. For example:
I have more than two view which each other has same _Layout.My Index action in Company Controller has a sections as follow:
#model Invoice.Model.HelperClasses.CompanyViewModel
#{
ViewBag.Title = "Companies";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section usage{
<link href="~/css/uniform.default.css" rel="stylesheet" />
}
#section other{
<link href="~/css/datepicker.css" rel="stylesheet" />
<link href="~/css/SimpleSlide.css" rel="stylesheet" />
<link href="~/css/responsive-tables.css" rel="stylesheet" />
}
#section script
{
<script src="~/js/datepicker/bootstrap-datepicker.js"></script>
}
and Display Action in Invoice controller has same sections but different css and js as follow:
#model Invoice.Model.HelperClasses.InvoiceViewModel
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section usage{
#*<link href="~/css/uniform.default.css" rel="stylesheet" />*#
}
#section other{
<link href="~/css/DT_bootstrap.css" rel="stylesheet" />
<link href="~/css/responsive-tables.css" rel="stylesheet" />
<script src="~/js/datatables/extras/ZeroClipboard.js"></script>
}
#section script
{
<script src="~/js/datepicker/bootstrap-datepicker.js"></script>
<script src="~/js/validate/jquery.metadata.js"></script>
<script src="~/js/validate/jquery.validate.js"></script>
}
and then you can use this section in _Layout but its required argument should be false. Look at:
<!DOCTYPE html>
<html>
<head>
<!--usage-->
#RenderSection("usage", required: false)
<!--other-->
#RenderSection("other", required: false)
<!--script-->
#RenderSection("script", required: false)
<head>
<body>
</body>
</html>
On your _Layout.cshtml page (Or any other master page) Use following code on inside of <head></head> tag.
#if (IsSectionDefined("SpecialOther"))
{
#RenderSection("SpecialOther")
}
On the page that you want special css,script or any other item, specify their refernces. e.g.,
#section SpecialOther{
<link href="~/css/responsive-tables.css" rel="stylesheet" />
<script src="~/js/datatables/extras/ZeroClipboard.js"></script>
}