How to stop partial from inheriting model? - c#

Its my first time making a MVC website, so far so good, everything is smooth but I have one big problem.
I am using Layout with Partials for Header, Navigation, Footer.
This is my layout.
<div class="page-wrapper">
<header class="header">
<partial name="Partials/_HeaderTopPartial"/>
<div class="header-middle sticky-header">
<div class="container">
<div class="header-left">
<ul class="menu sf-arrows">
<li class="active">
<a asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<partial name="Partials/NavigationPartials/_NavigationHeaderLeftCategoryPartial"/>
<partial name="Partials/NavigationPartials/_NavigationHeaderLeftProductsPartial"/>
<partial name="Partials/NavigationPartials/_NavigationHeaderLeftPagesPartial"/>
</ul>
</div>
<partial name="Partials/NavigationPartials/_NavigationHeaderCenterPartial"/>
<div class="header-right">
<partial name="Partials/NavigationPartials/_NavigationHeaderRightPartial"/>
</div><!-- End .header-right -->
</div><!-- End .container -->
</div><!-- End .header-middle -->
</header><!-- End .header -->
I am passing a HomeViewModel Model to by _NavigationHeaderLeftCategoryPartial
#model HomeViewModel
<li>
Categories
<div class="megamenu megamenu-fixed-width">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6">
<div class="menu-title">
Variations 1<span class="tip tip-new">New!</span>
</div>
<ul>
<li>
Fullwidth Banner<span class="tip tip-hot">Hot!</span>
</li>
<li>
Boxed Slider Banner
</li>
<li>
Boxed Image Banner
</li>
<li>
Left Sidebar
</li>
<li>
Right Sidebar
</li>
<li>
Product Flex Grid
</li>
<li>
Horizontal Filter1
</li>
<li>
Horizontal Filter2
</li>
</ul>
</div><!-- End .col-lg-6 -->
</div><!-- End .row -->
</div><!-- End .col-lg-8 -->
<div class="col-lg-4">
<div class="banner">
<a href="#">
<img src="~/images/menu-banner-2.jpg" alt="Menu banner">
</a>
</div><!-- End .banner -->
</div><!-- End .col-lg-4 -->
</div>
</div><!-- End .megamenu -->
</li>
Everything works fine, until I click on the Login page, which is a partial located in another partial =>
_NavigationHeaderLeftPagesPartial
<li>
Pages
<ul>
<li>
Shopping Cart
</li>
<li>
Checkout
<ul>
<li>
Checkout Shipping
</li>
<li>
Checkout Shipping 2
</li>
<li>
Checkout Review
</li>
</ul>
</li>
<li>
Dashboard
<ul>
<li>
Dashboard
</li>
<li>
My Account
</li>
</ul>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="About">About Us</a>
</li>
<li>
Blog
<ul>
<li>
Blog
</li>
<li>
Blog Post
</li>
</ul>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Contact">Contact Us</a>
</li>
<li>
<partial name="_LoginPartial"/>
</li>
<li>
<a a asp-area="Identity" asp-page="/Account/ForgotPassword">Forgot Password</a>
</li>
</ul>
</li>
And lastly, the login partial
#using FashionNova.Common
#using FashionNova.Data.Models
#using Microsoft.AspNetCore.Identity
#inject SignInManager<ApplicationUser> SignInManager
#inject UserManager<ApplicationUser> UserManager
#if (this.SignInManager.IsSignedIn(this.User))
{
<a asp-area="Identity" asp-page="/Account/Logout">Logout</a>
}
else
{
<a asp-area="Identity" asp-page="/Account/Login">Login</a>
}
The error I am getting
InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'Fashion.Web.Areas.Identity.Pages.Account.LoginModel', but this ViewDataDictionary instance requires a model item of type 'Fashion.Web.ViewModels.HomeViewModel'.
Please, somebody help me to understand how to set up different models for each different partial without them interfering with one another.


Please make sure that you pass models into your views. Here you can find more examples of that: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/partial-tag-helper?view=aspnetcore-3.0

Related

Bootstrap 4.5 Tab always opens page instead of tab content in Blazor

I'm new to Blazor and just made a new project using WASM, Bootstrap 4.5 and .NET 5. I'm trying to make a tab layout work but whenever I click my tabs, they attempt to navigate to a new page, rather than opening the associated tab content.
I am not quite sure what it is I'm doing wrong here, as looking at pages of examples shows I'm doing what the examples are doing (Although it's possible I've simply grown blind to my own code now.)
Here is the code that generates the tabs and their content from my GameDetails.razor page:
#if (_game != null)
{
<ul class="nav nav-pills nav-fill" role="tablist">
#foreach (Tuple<string, string> key in _parsedMappings.Keys)
{
<li class="nav-item">
<a class="nav-link #(_isFirstElem == true ? "active" : "")"
id="#key.Item2.Replace(" ", "")-tab"
data-toggle="tab"
href="##key.Item2.Replace(" ", "")"
role="tab"
aria-controls="#key.Item2.Replace(" ", "")"
aria-selected="#(_isFirstElem == true ? "true" : "false")">#key.Item1, #key.Item2</a>
</li>
_isFirstElem = false;
}
#if (_isFirstElem == false) _isFirstElem = true;
</ul>
<div class="tab-content" id="tabContent">
#foreach (KeyValuePair<Tuple<string, string>, List<Mapping>> pair in _parsedMappings)
{
<div class="tab-pane fade show #(_isFirstElem == true ? "active" : "")"
id="#pair.Key.Item2.Replace(" ", "")"
role="tabpanel"
aria-labelledby="#pair.Key.Item2.Replace(" ", "")-tab">
<ul class="list-group">
#foreach (Mapping mapping in pair.Value)
{
<li class="list-group-item">
<b>#mapping.FunctionName</b>: <i>#mapping.Key</i>
</li>
}
</ul>
</div>
_isFirstElem = false;
}
</div>
}
It produces this html:
<ul class="nav nav-pills nav-fill" role="tablist">
<li class="nav-item"><a class="nav-link active" id="Keyboard&Mouse-tab" data-toggle="tab" href="#Keyboard&Mouse" role="tab" aria-controls="Keyboard&Mouse" aria-selected="true">PC, Keyboard & Mouse</a>
</li>
<li class="nav-item"><a class="nav-link " id="NintendoSwitchJoycons-tab" data-toggle="tab" href="#NintendoSwitchJoycons" role="tab" aria-controls="NintendoSwitchJoycons" aria-selected="false">Nintendo Switch, Nintendo Switch Joycons</a>
</li>
</ul>
<div class="tab-content" id="tabContent">
<div class="tab-pane fade show active" id="Keyboard&Mouse" role="tabpanel" aria-labelledby="Keyboard&Mouse-tab">
<ul class="list-group">
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
...
</ul>
</div>
<div class="tab-pane fade show " id="NintendoSwitchJoycons" role="tabpanel" aria-labelledby="NintendoSwitchJoycons-tab">
<ul class="list-group">
<li class="list-group-item">...</i></li>
<li class="list-group-item">...</i></li>
...
</ul>
</div>
</div>
Which to my knowledge is correctly formatted. So I am not quite sure why the tab tries to navigate to a web page instead of opening the tab content.
What am I doing wrong?

Try to remove the "&" symbol from id="" attributes

Asp.net core mvc -- Changing partial on user log in

I have a partial that looks like this:
#if (SignInManager.IsSignedIn(User))
{
<form asp-area="" asp-controller="Account" asp-action="Logout" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello #UserManager.GetUserName(User)!</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link">Log out</button>
</li>
</ul>
</form>
}
else
{
<ul class="nav navbar-nav navbar-right">
<li><a asp-area="" asp-controller="Registrieren" asp-action="Create">Anmelden</a></li>
<li><a asp-area="" asp-controller="Login" asp-action="Details">Einloggen</a></li>
</ul>
}
Now i'm not using the SignInManager to handle the login. I'm using Microsoft.AspNetCore.Session with a cookie.
I would like to handle the condition when the partial is shown by code. Like so:
if(session == xx)
{
//show logged in part of partial
}
or even maybe something like
name = HttpContext.Session.GetString("nameKey");
if(name != "")
{
//show logged in part of partial
}
What's the easiest way to achieve this?

How to get the 3rd div value with the same class name in C#?

How to get 3rd div in this code snippet using C#?
For example I'd like to get the text in the 3rd div with a class name of gwt-Label WBCI. I'm having issues on getting the right values and at the same time figuring out on what codes do i need to get it
What my code now is something like this but I'm getting the wrong value
browser.Div(Find.ByClass("gwt-Label WBCI")).OuterText.ToString();
<ul class="WCVH WKVH" role="list">
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.POSTED_DATE--uid6-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.POSTED_DATE--uid6">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="b7e15031a749444a855366b1f1a87a46" data-automation-id="menuItem" aria-label="Posted Today, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WKQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="POSTED_DATE_charm" alt="" aria-label=""
aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Posted Today" aria-label="Posted Today" data-automation-label="Posted Today" aria-labelledby="labeledImage.POSTED_DATE--uid6-formLabel">Posted Today</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_TYPE--uid7-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_TYPE--uid7">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="5c6eda594d0d46609fa4c8e2ff13e731" data-automation-id="menuItem" aria-label="Full time, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WCQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_TYPE_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Full time" aria-label="Full time" data-automation-label="Full time" aria-labelledby="labeledImage.JOB_TYPE--uid7-formLabel">Full time</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_REQ--uid8-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_REQ--uid8">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="cc054d6cca664a3282855669711520d5" data-automation-id="menuItem" aria-label="T_R_1616417, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WBQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_REQ_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="T_R_1616417" aria-label="T_R_1616417" data-automation-label="T_R_1616417" aria-labelledby="labeledImage.JOB_REQ--uid8-formLabel">T_R_1616417</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>

How to add active style using bootstrap

good day, i'm trying to add an active style to indicate current page on my web app bt couldn't get a solution, i looked at previous post and answers where i saw this which was said to have worked
<ul class="nav">
<li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li>
<li><a data-target="#" data-toggle="pill" href="#users">Users</a></li><br/>
</ul>
when i used the data-toggle attribute in this code
<ul class="nav nav-tabs">
<li class="colour">#Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">#Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
<li class="colour">#Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">#Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
<li class="colour">#Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">#Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
</ul>
i couldn't redirect to the page that has the data-toggle attribute but made that page active.

I have already made the same issue. Please see my Code and I think it helps you, if you have some question I'm ready to answer you.
View:
<ul class="nav nav-tabs" id="myTab">
<li id="activeTab" class="active"><a data-toggle="tab" href="#active">Active</a></li>
<li id="currentTab" class=""><a data-toggle="tab" href="#current">Current</a></li>
<li id="completedTab" class=""><a data-toggle="tab" href="#completed">Completed</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div id="active" class="tab-pane fade active in">
#Html.Action("Active", "Home")
</div>
<div id="current" class="tab-pane fade">
#Html.Action("Current", "Home")
</div>
<div id="completed" class="tab-pane fade in">
#Html.Action("Completed","Home")
</div>
</div>
JavaScript - when need to catch Active tab from URL and make it open
$(document).ready(function() {
var tab = #ViewBag.tabId;
switch (tab) {
case 1:
removeAllActiveTabs();
$('#activeTab').addClass('active');
$('#active').addClass('active');
$('#active').addClass('in');
break;
case 2:
removeAllActiveTabs();
$('#currentTab').addClass('active');
$('#current').addClass('active');
$('#current').addClass('in');
break;
case 3:
removeAllActiveTabs();
$('#completedTab').addClass('active');
$('#completed').addClass('active');
$('#completed').addClass('in');
break;
default:
$('#activeTab').addClass('active');
$('#active').addClass('active');
$('#active').addClass('in');
break;
}
});
function removeAllActiveTabs() {
$('#myTab').each(function() {
$(this).find('li').removeClass('active');
});
$('#myTabContent').each(function() {
$(this).find('div').removeClass('active');
$(this).find('div').removeClass('in');
});
}
JavaScript - If you want to change URL when tab change
//When Client click on Tabs show in URL
$('#activeTab').on('click',function() {
window.history.pushState('','','/Home/SomeAction?tabId=1');
});
$('#currentTab').on('click',function() {
window.history.pushState('','','/Home/SomeAction?tabId=2');
});
$('#completedTab').on('click',function() {
window.history.pushState('','','/Home/SomeAction?tabId=3');
});

You need to add a classname active to your li.
Example:
<li class="active"><a data-target="#" data-toggle="pill" href="#users">Users</a></li>

Show bootstrap panel in a row inside foreach loop

Here is my code, what should I do to show 3 panels in a row. Is there any way to do this?
Its showing in the same row but the next panel starts slightly below the previous one I'll be really thankful to you for your help
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h4>#c.PhaseText, #c.SectorText-#c.PlotAddress</h4>
</div>
<div class="panel-body text-center">
<p class="lead">
<img src="~/images/plot...image.jpg" />
</p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item" style="border:none">
#c.AreaText
</li>
<li class="list-group-item" style="border:none">
Facing Park
</li>
<li class="list-group-item text-center" style="border:none">
Near Mosque
</li>
<li class="list-group-item" style="border:none">
Near Commercial
</li>
<li class="list-group-item" style="border:none">
Corner
</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-info">Detail View</a>
</div>
</div>
</div>

Just Add <div class="row"> like this:
<div class="row">
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
....
}
</div>

Categories

Resources