When I Am using default layout (which i guess is Mainlayout) in blazor it is loading fine but when I am trying with the custom layout it is giving error when call for the first time but when I press reload it is working fine.
#inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<AdminMenu />
</div>
<main>
<div class="top-row px-4">
Logout
</div>
<article class="content px-4">
#Body
</article>
</main>
</div>
Custom Layout
#inherits LayoutComponentBase
<div class="page">
#Body
</div>
When called on button click of HTML i am getting this error
but when i am reloading the page it works fine.
Please let me know what am i doing wrong.
Related
Please, I need a way to master Blazor multi-layered layouts, but for now, I desperately need to know how to null layouts so that I can add everything from `
<html>
to
</html>
`
myself on the #page directly.
Why do I want to do this?
in MVC I can make the ViewModel inherit from the _layout ViewModel so that I can dynamically add user images, name, properties... in the navigation and side-nav, even hide some nav options. like in the picture below.
Looks like you want to custom your MainLayout?
You can just clear it, open MainLayout.razor (where the _Layout lies) and only add #Body in it:
#inherits LayoutComponentBase
#Body
From your example, seems you just want to custom your NavMenu?
It's the same,open NavMenu.razor and just modify the navs.
And for extension, if you want to different types of Layout, you can use NavigationManager to
check the parameter in your url and it will use the related Layout, like:
#inherits LayoutComponentBase
#inject NavigationManager _navManager
#if (_navManager.Uri.Contains("CustomLayout1"))
{
#Body
}
else
{
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
About
</div>
<div class="content px-4">
#Body
</div>
</div>
</div>
}
So if the page is #page "/CustomLayout1/counter" Then it will use your null MainLayout in this demo.
I think you want multiple layouts.
The base file (_Host.cshtml for blazor server side or index.html for WASM), needs to be as empty as possible to only have and
For _Host.cshtml, you probably need to do something like:
#page "/"
#namespace YOURNAMESPACE.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<html>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</html>
For index.html, something like:
You can read more here: https://learn.microsoft.com/en-us/aspnet/core/blazor/layouts?view=aspnetcore-5.0
Adding simple validation on the client-side in C# ASP.NET Core 2.2
I've read MS docs on validation and decided that it's most suitable to apply client-side validation. However, in the provided example, they show something with jQuery and I was under the impression that jQuery was getting a bit old by now. Also, we're spoiled with the nice tools from MS that will automagically do stuff for us. (I thought that the span with attribute asp-validation-for and div with attribute asp-validation-summary implied that the magic would be there. It wasn't as it turns out.)
My code is as shown below.
<div class="row">
<div class="col-md-4">
<form asp-controller="Security"
asp-action="Register"
method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="#Model.Email" class="control-label"></label>
<input asp-for="#Model.Email" class="form-control" />
<span asp-validation-for="#Model.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Info" class="control-label"></label>
<input asp-for="#Model.Info" class="form-control" />
<span asp-validation-for="#Model.Info" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Send" class="btn btn-primary" />
</div>
</form>
</div>
</div>
I'd like to know what I'm missing to make the validation work properly (i.e. getting an error message if not both fields are filled upon submission of the form as well as the form submitting being cancelled). Alternatively, of it's something fairly basic I'm missing, I'd like to get a hint on appropriate search words. Please note that I'm only looking for the visuals: client-side messages, no relation to the back-end handler of the input.
I've seen some questions on the subject but since those seem not to have a resolution approved, I feel that it's best to ask in order to do things the right way instead of a guessing game.
You need to add reference to validation file. Check whether you have _ValidationScriptsPartial.cshtml in your Views/Shared folder.
<environment include="Development">
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"
asp-fallback-src="~/Identity/lib/jquery-validation/dist/jquery.validate.min.js"
asp-fallback-test="window.jQuery && window.jQuery.validator"
crossorigin="anonymous"
integrity="sha384-rZfj/ogBloos6wzLGpPkkOr/gpkBNLZ6b6yLy4o+ok+t/SAKlL5mvXLr0OXNi1Hp">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.9/jquery.validate.unobtrusive.min.js"
asp-fallback-src="~/Identity/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
crossorigin="anonymous"
integrity="sha384-ifv0TYDWxBHzvAk2Z0n8R434FL1Rlv/Av18DXE43N/1rvHyOG4izKst0f2iSLdds">
</script>
</environment>
Add below code in view,
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
What I'm trying to do seems pretty simple but I'm not sure if it's possible or not.
I have a Kendo Template and I am wanting to use an HtmlHelper that I created inside of it but I'm having an issue with passing the value into it.
This is what my template looks like:
<script type="text/x-kendo-tmpl" id="reviewTemplate">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
#:ProducerProfileDisplay#
</div>
</div>
<div class="panel-body">
#Html.Raw(Html.DisplayRating(#:Rating#))
<p>#:ReviewText#</p>
</div>
</div>
</script>
The problem with this is it just doesn't like the syntax at all and I can't compile my project. And if I decide to put it inside of quotes then it will literally just pass in the string #:Rating#.
By the way, the method I created is expecting a double.
Any ideas?
I am getting an error ("Server Error in '/' Application") when I nest partial views in my MVC app. The views work fine individually, but not when nested. It's my understanding that it's okay to do this, so what am I doing wrong?
Essentially, I am trying to use partials as sub-layouts within my _Layout.cshtml.
Here's my main layout - _Layout.cshtml
<!DOCTYPE html>
<html>
<head>...</head>
<body style="padding-top: 80px;">
<div class="container-fluid">
<div class="row">
<div id="myTab" class="col-lg-12 col-md-12 col-sm-12">
...
<div class="tab-content">
<div class="tab-pane fade" id="search">
#Html.Partial("~/Areas/Search/Views/Shared/_SearchLayout.cshtml")
</div>
</div>
</div>
</div>
</div>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
This is the first partial view (_SearchLayout). If I remove the partials AND #RenderBody, no error.
<div class="container-fluid">
#Html.Partial("_PolicySearch")
#Html.Partial("_ClaimSearch")
</div>
#RenderBody()
This partial view is nested in the first partial view (_SearchLayout):
<div class="row top-buffer search-outline form-horizontal">
<div class="col-md-1 search-icon-size text-primary">
<i class="glyphicon glyphicon-heart"></i>
</div>
<div class="col-md-1 search-icon-size text-primary">
<h4>Claim Search</h4>
</div>
</div>
In your first partial view:
Remove RenderBody
Replace Html.Partial to Html.RenderPartial
I also would recommend to rename your partial view to something not containing the word "Layout" to avoid the mismatch between the view types.
Use Html.RenderPartial instead
The problem is #RenderBody(). This can only be called in a layout, which when used in this way _SearchLayout.cshtml is not, despite its name.
The important thing to remember about layouts, partials and views in ASP.NET MVC is that they're all views. The only thing that differentiates them is how they're used. In this instance, you're using the _SearchLayout.cshtml view as a partial, and partials can't use #RenderBody().
I have a mvc razor page (cshtml) and i tried to implement the bootstrp tabdrop in it. I am able to get the tabs however the tabdrops are not displayed. When i run the same code in a html file i am able to get the tabs as well as the tabdrop holding my extra tab names. however when i run the code in cshtml file its not getting displayed.
The extra tabs are displayed in the second line and the tabdrop is also not getting displayed.
Tabdrops Source
Here is my complete code of my cshtml file in which i have used the tabdrop.js...
<script src="Content/js/jquery-1.11.2.js"></script>
<script src="Content/js/bootstrap-tab.js"></script>
<script src="Content/js/bootstrap-tabdrop.js"></script>
<script src="Content/js/bootstrap-dropdown.js"></script>
<script>
if (top.location != location) {
top.location.href = document.location.href;
}
$(function () {
window.prettyPrint && prettyPrint();
$('.nav-tabs:first').tabdrop();
$('.nav-tabs:last').tabdrop({ text: 'More options' });
$('.nav-pills').tabdrop({ text: 'With pills' });
});
</script>
<link href="~/Content/css/bootstrap-tabdrop.css" rel="stylesheet" />
<div>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<!-- Right side column. Contains the navbar and content of the page -->
<aside class="right-side">
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-6 connectedSortable">
<!-- Box (with bar chart) -->
<div id="loading-example">
<div class="box-body no-padding">
<div class="row">
<div class="col-sm-7">
</div>
</div>
</div>
</div>
</section>
</div>
<section class="content">
<ul class="nav nav-tabs tabs-example" role="tablist">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
<li>Tab 7</li>
<li>Tab 8</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-tab1">
<p>This is tab 1!</p>
</div>
<div class="tab-pane" id="tabs-tab2">
<p>This is tab 2!</p>
</div>
<div class="tab-pane" id="tabs-tab3">
<p>This is tab 3!</p>
</div>
<div class="tab-pane" id="tabs-tab4">
<p>This is tab 4!</p>
</div>
<div class="tab-pane" id="tabs-tab5">
<p>This is tab 5!</p>
</div>
<div class="tab-pane" id="tabs-tab6">
<p>This is tab 6!</p>
</div>
<div class="tab-pane" id="tabs-tab7">
<p>This is tab 7!</p>
</div>
<div class="tab-pane" id="tabs-tab8">
<p>This is tab 8!</p>
</div>
</div>
<!-- top row -->
<!-- /.row -->
</section><!-- /.content -->
</aside>
</div>
</div>
I have the css files stored in the location
Content\css
and Javascript Files stored in the location
Content\js
The cshtml file has the bootstrap theme of ADMINLTE bootstrap.
Can any one help me with this? I want to know whether the bootstrap tabdrops works with cshtml file or not?
I had same issue. The tabdrop plugin initialized when window re-size.
I solved it by resizing the window after init tabdrop.
$(window).resize();