I have been working with blazor server for some time now but I have not been able to achieve how to create a cards carousel with it. I want to use slick slider in my project. I have downloaded slick and jquery, linked jquery, slick.min.js, slick.js, slick-theme.css and slick.css but nothing seems to work. I've tried looking on the web for some solutions but none of these are clear to understand. I've also done this with html, css and js and it works just fine. Please anyone help me with this because i believe a carousel is a very important component in a website.
#using Microsoft.AspNetCore.Components.Web
#namespace Blogger.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en" class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-500">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link href="css/site.css" rel="stylesheet" />
<link href="Blogger.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
#RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/all.min.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Perhaps it is not working for you because you have implemented both the normal and the minified file?
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>
Related
I've followed every step in this article: https://waelkdouh.medium.com/integrating-blazor-components-into-existing-asp-net-core-mvc-applications-b1a2aec4ac1f
I've created a file named MyFirst.razor in the Components/Pages folder, but it doesn't render when referenced in Index.cshtml as .
Components.Pages/MyFirst.razor
#page "/my-first"
<h3>Current count: #count</h3>
#code {
private int count = 0;
private void HandleClick()
{
count++;
}
}
Views/Home/Index.cshtml
#using LC.BlazorTest.Components.Pages
<h1>Velkommen - blaze up</h1>
<MyFirst />
Index page source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BlazorBlazor</title>
<link href="/IMAGE/fav-icon.png" rel="icon" type="text/CSS" />
<link href="/STYLE/Creator/Creator.css" rel="stylesheet" type="text/CSS" />
</head>
<body>
<main role="main" class="pb-3">
<h1>Velkommen - blaze up</h1>
<MyFirst />
</main>
<script crossorigin="anonymous" src="/SCRIPT/Creator/Creator.js" type="application/JAVASCRIPT"></script>
<script crossorigin="anonymous" src="https://kit.fontawesome.com/c237ba9e1f.js" type="application/JAVASCRIPT"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
the tag hasn't changed.
Looks like you are trying to render a Blazor component into an MVC view. As far as I know, it is not that simple.
You may want to use the component tag helper to render Blazor components in cshtml views.
Unfortunately, MVC views are rendered once on the server, so you can not simply just put a component name like with your regular Blazor app.
You can prerender the component (it will remain static), use server-side rendering or client-side rendering (WebAssembly). It may be a little bit tricky tho since you mix multiple rendering styles together. In short, use
<component type="typeof(MyFirst)" render-mode="ServerPrerendered" />
instead of
<MyFirst />
when writing in cshtml files (MVC pages/views).
Checkout render modes or prerendering
Here I have blazor server app, in app I have two _Host.cshtml, one for website which is default _Host.cshtml and another for admin panel that is _HostAdmin.cshtml. Both of them have separate css and js file. I too have separate layout, for website I have Mainlayout.razor which should use _Host.cshtml and for admin panel I have AdminLayout.razor which should use _HostAdmin.cshtml .
Now, the problem is that when I add new razor component and use AdminLayout.razor layout the view doesnot use css and js of _HostAdmin.cshtml.
Below is my _HostAdmin.cshtml
#page "/Admin"
#namespace MCQ.Pages._Pages_Admin__HostAdmin
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="~/Admin" />
<link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/jqvmap/jqvmap.min.css">
<link rel="stylesheet" href="/Adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="/Adminlte/plugins/summernote/summernote-bs4.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<component type="typeof(App)" render-mode="ServerPrerendered" />
</div>
<script src="~/Adminlte/plugins/jquery/jquery.min.js"></script>
<script src="~/Adminlte/plugins/jquery-ui/jquery-ui.min.js"></script>
<script>$.widget.bridge('uibutton', $.ui.button)</script>
<script src="~/Adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/Adminlte/plugins/chart.js/Chart.min.js"></script>
<script src="~/Adminlte/plugins/sparklines/sparkline.js"></script>
<script src="~/Adminlte/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="~/Adminlte/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<script src="~/Adminlte/plugins/jquery-knob/jquery.knob.min.js"></script>
<script src="~/Adminlte/plugins/moment/moment.min.js"></script>
<script src="~/Adminlte/plugins/daterangepicker/daterangepicker.js"></script>
<script src="~/Adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="~/Adminlte/plugins/summernote/summernote-bs4.min.js"></script>
<script src="~/Adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script src="~/Adminlte/dist/js/adminlte.js"></script>
<script src="~/Adminlte/dist/js/pages/dashboard.js"></script>
<script src="~/Adminlte/dist/js/demo.js"></script>
</body>
</html>
Below is Startup.cs
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");
});
You state
Now, the problem is that when I add new razor component and use AdminLayout.razor layout the view doesnot use css and js of _HostAdmin.cshtml.
and I assume your question is "Why".
You're adding a new razor component page to the existing application - probably with a route of something like "/admin/myadminpage". You're misunderstanding what's actually going on.
_Host.cshtml loads the SPA, but that's the only get/post that happens. Navigation after that is changing out components in the DOM. Loading a component with the layout AdminLayout just changes out the Layout component. There's no toing and froing with the server.
What you are trying to do requires a reload of the SPA. You could use:
NavigationManager.NavigateTo("/admin/myadminpage", true);
Also even if you do force a reload, the Fallbacks are in the wrong order - the default before the specific.
endpoints.MapFallbackToPage("/_Host");
endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");
This is the formal structure of my .cshtml file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dashboard</title>
<link rel="stylesheet" href="~/lib/Hover/hover.css" />
<link rel="stylesheet" href="~/lib/fontawesome/css/font-awesome.css" />
<link rel="stylesheet" href="~/lib/weather-icons/css/weather-icons.css" />
<link rel="stylesheet" href="~/lib/ionicons/css/ionicons.css" />
<link rel="stylesheet" href="~/lib/jquery-toggles/toggles-full.css" />
<link rel="stylesheet" href="~/lib/morrisjs/morris.css" />
<link rel="stylesheet" href="~/lib/select2/select2.css" />
<link rel="stylesheet" href="~/lib/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" />
<link rel="stylesheet" href="~/css/quirk.css" />
<script src="~/lib/modernizr/modernizr.js"></script>
<script>
alert("hello from top");
</script>
</head>
<body style="background:none;">
---Several divs------
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/jquery-ui/jquery-ui.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<script src="~/lib/jquery-toggles/toggles.js"></script>
<script src="~/lib/morrisjs/morris.js"></script>
<script src="~/lib/datatables/jquery.dataTables.js"></script>
<script src="~/lib/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="~/lib/select2/select2.js"></script>
<script src="~/js/quirk.js"></script>
<script>
alert("hello from bottom");
</script>
</body>
</html>
Actually It's the design provided by our designer, The first alert message from head is popping up successfully so that it's sure javascript is not disabled in my browser, But the last alert is never shown. When I link the external scripts then that also never works either. This is really annoying. I referenced this question and many more in stackoverflow, But nothing solved.
How can I find out what actually happened here ? Is it because some error in previous js files ? OR it's because of old html4 ? There is nothing in my Action method except return View(); statement so that I think it's not necessary to post.
One additional thing is I've rendered one partial view using #Html.Action("...") in body, I think it's not the issue because I tried removing it as well. Please guide me, I am a beginner.
It's seems the same mistake I did some months ago. Your page is started from
<!DOCTYPE ...>
<html ...>
means It clarifies that you are not using any master layout page so any kind of #Scripts.Render as given in the answer you referenced won't work in the current situation. Just a simple solution is set Layout to null at the top of the page like,
#{
Layout = null;
...
}
and everything will work fine.
I recently installed a new site in Ektron. It created all the folders and files necessary to have it working. I created a custom MasterPage in VS 2012 with own folders and CSS/Script files and looking to import it into Ektron to use.
I imported from Workarea > Settings > Template and import template.
When I click on View for the template, I am seeing the following error:
Parser Error Message: Could not load type 'WMED.Site'.
Source Error:
Line 1: <%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WMED.Site" %>
Line 2:
Line 3:
Source File: /Site.Master Line: 1
How do I resolve the error
:: Should I remove the inherit and namespace from the MP for it to work?
The HEAD:
<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/gif" href="favicon.gif" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="theScripts/sliderJS.js"></script>
<link rel="stylesheet" href="theStyles/sliderStyle.css" type="text/css" />-->
<link rel="stylesheet" href="theStyles/pageStyle.css" type="text/css" />
<link rel="stylesheet" href="theCustomFonts/trajanpro_style.css" type="text/css" />
<link rel="stylesheet" href="theCustomFonts/blackjar_style.css" type="text/css" />
<script src="theScripts/jquery.webticker.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/tickerStyles.css" type="text/css" />
<script src="theScripts/pageScript.js" type="text/javascript"></script>
<script src="theScripts/placeholders.min.js" type="text/javascript"></script>
<script src="theScripts/jquery.sidr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/jquery.sidr.light.css" type="text/css" />
<script src="theScripts/jssor.js" type="text/javascript"></script>
<script src="theScripts/jssor.slider.js" type="text/javascript"></script>
<script src="theScripts/jssorSlider.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/jssorSlider.css" type="text/css" />
<!-- ENSURES HTML TAGS ARE COMPLIANT -->
<!--<link rel="stylesheet" href="theStyles/styleDiagnostic.css" type="text/css" />-->
<script>
$(window).resize(function () {
var docHeight = $(document).height();
var docWidth = $(document).width();
$('#lbl').text("height: " + docHeight + " width: " + docWidth);
});
</script>
<script>
function SearchNMClick() {
document.getElementById('HiddenSearchNM').click();
}
</script>
<asp:ContentPlaceHolder ID="HeadPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</head>
You're probably using a Web Application project opposed to a Web Site. Because of this, the code for your MasterPages, ASPX templates, wireframes...etc. is compiled into a DLL (or DLLs) when you build the project.
When you deploy your Web Application project to your Ektron site, in additional to the files you've already pushed out, you have to copy your project's DLLs into the bin directory of the site. Your project will have a bin directory after building where you can find these, just look in File Explorer to find it if you don't see it.
/bin/WMED.dll
Also, if this is the case, do not push your .cs files to the server.
You don't need to import a MasterPage into Ektron, only ASPX templates are imported. The process is, create your ASPX template (with associated MasterPage), save it into your website and then register it with Ektron.
Check the master page's code behind file (the .cs) and make sure that the public partial class looks like public partial class WMED.Sitename is using the same. Also make sure that the .cs file is located in the same directory as the .master template.
I´ve downloaded tweeter bootstrap (not the bootststrap for MVC) to a brand new MVC4 project, but I can´t make it work.
No errors in browser´s F12 window.
Here is my _layout code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="#Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="screen">
</head>
<body>
<script src="#Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<h1>Hello, world!</h1>
#RenderBody()
</body>
</html>
When the screen pops up, I get a normal Hello, world! body (no bootstrap fonts). My system has the following files:
What may I be doing wrong?
You only included the bootstrap-theme.min.css file and not the base bootstrap.css file. (though you did include the bootstrap.js file)