I haven't often used partial views but I do understand the basics but I have a problem.
I have a master page with a Modal form on. In this modal form I would like to use a partial view to render both an image and a footer. However, I need to manually write in a header and the body content. So basically it would look like this:
Partial View:
-Image-
-Content I want to write-
-Footer-
However, whenever I try to do this and include things such as render Body or render section, it does not work. Does anybody have any ideas on how I can do this?
Modal:
<div id="helpModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
#Html.Partial("ModalLayoutPartial")
<h1 style="text-align:center"> HELP </h1>
<div class="modal-body">
<p>Help help helperton</p>
</div>
</div>
</div>
</div>
Partial View:
<div class="modal-header">
<img src="~/Content/Images/Logo/ap_tick_green.png" />
</div>
<body>
</body>
<div class="modal-footer">
Need more help? Contact us here.
</div>
You can pass a model into the partial so in your case make the model a string:
#Html.Partial("ModalLayoutPartial", "text to show")
Then in your partial declare the model (and use it):
#model string
<div class="modal-header">
<img src="~/Content/Images/Logo/ap_tick_green.png" />
</div>
<body>
#Html.Raw(Model)
</body>
<div class="modal-footer">
Need more help? Contact us here.
</div>
Please note you shouldn't use body tag in the above - a html document should only have one body tag
Or you could pass in a class:
public class ModalInfo
{
public string Title { get; set; }
public string Body { get; set; }
}
Then call your partial:
#Html.Partial("ModalLayoutPartial", new ModalInfo() { Title = "HELP", Body = "Help help helperton" })
Show your partial
#model ModalInfo
<div class="modal-header">
<img src="~/Content/Images/Logo/ap_tick_green.png" />
</div>
<div class="body">
<h1 style="text-align:center">#Model.Title</h1>
<div class="modal-body">
<p>#Model.Body</p>
</div>
</div>
<div class="modal-footer">
Need more help? Contact us here.
</div>
Related
I am loading cards and there modals dynamically and the problem I am facing is that the dynamically added cards aren't triggering the dynamically added modals.
The cards are this
data.forEach(eve => {
console.log(eve.data());
event = eve.data();
pastEventCards+=`
<li class="cards_item">
<div class="card">
<div class="card_image">
<img src="images/posters/cpp_2021.jpeg" />
</div>
<div class="card_content card-body d-flex flex-column">
<h2 class="card_title">${event.title}</h2>
<p class="card_text">
</p>
**<button data-modal-trigger="past-event-modal-${event.eventNo}" class="mt-auto demo__btn demo__btn--secondary">
Read More
</button>**
</div>
</div>
</li>
`
pastEventModals+=`
<div class="modal" data-modal-name="past-event-modal-${event.eventNo}">
<div class="modal__dialog">
<button class="modal__close" data-modal-dismiss>×</button>
<header class="modal__header">
<h2 class="modal__title">${event.title}</h2>
</header>
<div class="modal__content">
<h4 class="modal_description">Description</h4>
</p>
<p>${event.description}</p>
<p class="modal_description">
${event.date}
</p>
<p class="modal_description">Attendees : ${event.attendee}
</p>
<p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-modal-dismiss>Close</button>
</div>
</div>
</div>
`
});
cardsList.innerHTML = pastEventCards ;
modalList.innerHTML = pastEventModals ;
I have tried referring to other stack overflow questions related to this and couldnt find a understandable solution to why this is happening , can anyone tell why the buttons cant trigger the modals ?
**EDIT :: **
The button that triggers the modal is inside this ** ** in the pastEventCards variable and the modal is in pastEventModals and when i use "data-modal-trigger = "something" " it will trigger the modal with modal name "something" right ? So y isnt it happening. If I dont add this modals and trigger cards dynamically and add it in the html template then it works fine but after adding dynamically it doesnt work
my landing page component declares in it a header component like so
<div class="container-fluid">
<div class="intro-section">
<div class="background">
//some stuff
</div>
<div class="content">
<app-page-header></app-page-header>
<div class="row">
<div class="col-12 text header mt-3">
Hello World
</div>
<div class="col-12 text-center mt-4 mb-4">
<button class="btn know-more-btn text" (click)="scroll(subscriptions)">Tell me More</button>
</div>
</div>
</div>
</div>
<div #subscriptions></div>
<div id="others" class="otherSection">
//other stuff
</div>
</div>
the scroll function in landing-page.component.ts is
scroll(el: HTMLElement) {
el.scrollIntoView({behavior:"smooth"});
}
I've also tried this
scrolling() {
(document.getElementById('others')).scrollIntoView({behavior:"smooth"});
}
I want to have a button in my app-page-header component that triggers or perform the same action an "scroll(subscriptions)" i.e in the landing page scroll to subscriptions. How can I achieve this?
Create an EventEmitter inside you app-page-header like
#Output() onButtonClicked: EventEmitter<any> = new EventEmitter();
The button in your app-page-header will emit the action to the parent component like:
buttonClicked() {
onButtonClicked.emit();
}
On your landing page add this to call the scroll function whenever the event is emitted.
<app-page-header (onButtonClicked)="scroll(subscriptions)"></app-page-header>
I implemented a modal popup as a part of the header.cshtml file in MVC project. the issue is that it does not show the dialog box (not working)
The only way I was able to make work is when I put the both the button and the modal container in the header file.
The modal body is a long text and it should not be a part of the header file.
I tried several tutorials, read modal documentation, and applied fixes from stackoverflow nothing worked for me.
I must be missing something very simple and trivial I just can't see it.
Below is the code in the Roles.cshtml file where the modal container is created and the text is written
#{
Layout = "~/Views/Shared/SubLayout.cshtml";
}
#{
ViewBag.Title = "Roles";
}
<div class="container">
<div class="styleguide-spacer-modals"></div>
</div>
<div class="modal" id="modal-active" aria-hidden="true">
<div class="modal__overlay bg-modal" tabindex="-1"
data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true"
aria-labelledby="modal-title-1">
<header class="modal__header">
<h1 class="modal__title h2" id="modal-title-1">
<h2>Roles</h2>
<br />
</h1>
</header>
<main class="modal__content">
BLABLA......
</main>
<footer class="modal__footer">
<button class="button button-primary"
aria-label="submit">
close
</button><button class="button button-secondary" data-
micromodal-close
aria-label="closing">
close
</button>
</footer>
</div>
</div>
</div>
Then the Header.cshtml file look like this: where I added "btnTrigger" and AJAX script to call and show the modal
#model TR.Service.Web.ViewModels
<header class="header" role="banner">
<!--1A: Portal header -->
<div class="portal-header">
<div class="container portal-header-inner">
<button class="button button-tertiary button-menu-open js-menu-
open ml-auto" aria-haspopup="menu" title="mobil menu">Menu</button>
<a href="#" class="button button-secondary" role="button">
login
</a>
</div>
<button class="button button-primary" id="btnTrigger"
data-micromodal-trigger="modal-passive">
Read me
</button>
<div id="divContainer"></div>
</div>
<div class="solution-header">
blabla........
</div>
</header>
#section scripts
{
<script>
$(function () {
$('#btnTrigger').unbind();
$('#btnTrigger').on('click', function () {
$.ajax({
url: '#Url.Action("Betingelser", "Rolles")',
type: 'POST',
data: { },
success: function (arr) {
$('#divContainer').html(arr); //Load your HTML to DivContainer
$('#exampleModal').modal('show'); //Once loaded, show the modal
},
error: function (err) {
console.log(err);
}
});
});
});
</script>
}
Then in my Home controller I have the actionResult that should return the
partial view
public ActionResult Roles()
{
return PartialView("Roles");
}
I can't see why this is not working. Please help.
Pupop should appear when click on the button with id =btnTrigger
Here is a working code
First since the Header.cshtml is part of the SubLayout.cshtml, move the #section scripts to the Roles.cshtml like below, you cna also put it in your Layout but without the #section scripts tag. I did'nt use the modal you had in your question. But this is a working modal
#{
Layout = "~/Views/Shared/SubLayout.cshtml";
}
#{
ViewBag.Title = "Roles";
}
<div class="container">
<div class="styleguide-spacer-modals"></div>
</div>
<div id="exampleModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Roles</h4>
</div>
<div class="modal-body">
<p>Content</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section scripts
{
<script>
$(function () {
$('#btnTrigger').unbind();
$('#btnTrigger').on('click', function () {
$.ajax({
url: '#Url.Action("Betingelser", "Rolles")',
type: 'POST',
data: { },
success: function (arr) {
$('#divContainer').html(arr); //Load your HTML to DivContainer
$('#exampleModal').modal('show'); //Once loaded, show the modal
},
error: function (err) {
console.log(err);
}
});
});
});
</script>
}
Then your Header.cshtml now looks like this
<header class="header" role="banner">
<!--1A: Portal header -->
<div class="portal-header">
<div class="container portal-header-inner">
<button class="button button-tertiary button-menu-open js-menu-
open ml-auto" aria-haspopup="menu" title="mobil menu">
Menu
</button>
<a href="#" class="button button-secondary" role="button">
login
</a>
</div>
<button class="button button-primary" id="btnTrigger"
data-micromodal-trigger="modal-passive">
Read me
</button>
<div id="divContainer"></div>
</div>
<div class="solution-header">
</div>
</header>
Also change the Home controller method to
public ActionResult Roles()
{
return View();
}
here is my codepen https://codepen.io/syedsadiqali/full/BwaMEW.
I'm trying to make a Wikipedia viewer project by freecodecamp. everything is working good except I the snippets from the Wikipedia API, the html entities can't be decoded and span tags can't be replaced. I tried many things. help needed, please.
HTML
<div class="container">
<div class="row row1">
<div class="col-md-6 text-center">
<div class="text-center">
<h2 class="text-center">Welcome to <h2><h1><br> Wikipedia Viewer Project <br> </h1><h2>Search Something Random<br>or<br> Enter Value below.</h2>
</div>
<input type="text" id="querybox">
<div>
<button class="btn btn-primary" id="querybutton">Search</button>
<div>
<a class="btn btn-primary" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Open Random Page</a>
</div>
<div class="data" id="put"></div>
</div>
</div>
<div class="col-md-6">
<div id="target" class="list-group"></div>
<script type="x-tmpl-mustache" id="template">
{{#search}}<h4 class="list-group-item-heading">{{title}}</h4><p class="list-group-item-text">{{{snippet}}}</p>{{/search}}
</script>
</div>
</div>
<div class="row">
</div>
<footer>
<h3 class='text-center'>Made with love by Syed Source Code would be soon available to you on my Github</h3>
</footer>
</div>
CSS
#import url('https://fonts.googleapis.com/css?family=Pacifico');
.row1{
font-family:"Pacifico",sans-serif;
}
.btn{
margin-top:10px;
padding:20px;
font-size:30px;
}
.row{
margin-top:20px;
}
input{
font-family:sans-serif!important;
}
JavaScript
$("#querybutton").on("click",function(){
data=document.getElementById("put"); query=document.getElementById("querybox").value;
url="https://wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&srsearch=" + query + "&callback=?";
$.getJSON(url,function(json){
var view=json.query;
var template = document.getElementById('template').innerHTML;
Mustache.parse(template);
// render the data into the template
var rendered = Mustache.render(template,view);
//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;
});
});
Result
https://codepen.io/syedsadiqali/full/BwaMEW
as #Paul Abbott commented I needed to use {{{snippet}}} triple mustache to render the data from Object as HTML. thanks for the answer, this answer I'm just writing to close this Question Right Answer was given by #PaulAbbott. thanks again.
Right side Bajra atta, Besan, Corn Flour .. are subcategories.
Index.html
<body>
<div class='container'>
<div class='row'>
<div class='col-md-4'></div>
<!-- Serach Area -->
<div class='col-md-5'>
<input style="margin-top:5px;" type="text" ng-model="SearchText" placeholder="Search for more than 10,000 products..." class='form-control' size="50">
</div>
<div class='col-md-1'></div>
<div class='col-md-2'>
<a id="top_login" href="#Login" style="position:absolute; margin-top:15px; color:#FFFCBA">
<strong>LOGIN </strong>
</a>
</div>
</div>
</div>
<div ng-controller="MainCtrl">
<div class='container'>
<div class='row'>
<div class='col-md-2 Name'>
<!-- Super Categories-->
</div>
<div class='col-md-7'> </div>
<div class='col-md-2'>
<!--SC Cart-->
</div>
<div class='col-md-1'></div>
</div>
</div>
<div id="middle" class='container'>
<div class='row'>
<div id="left" class="col-md-2">
<!-- categoris and sub categories -->
</div>
<div id="right" class="col-md-6">
<div ng-view></div>
</div>
</div>
</div>
</div>
<div id="footer">
<!-- Footer -->
</div>
</body>
products.html
<div class='box' ng-repeat="product in ProductService.Products | filter:SearchText | filter:FilterExpr:true| orderBy:'ProductName'">
<!-- Display filtered Products -->
</div>
ProductsController
sampleApp.controller('ProductsController', function ($scope, $routeParams, $log, $rootScope, ProductService) {
$scope.SCId = $routeParams.SCId;
$scope.ChangeFilter = function() {
if ($routeParams.SCId) {
$scope.FilterExpr = {'SubCategoryID': $routeParams.SCId.toString()};
}
};
$scope.ChangeFilter();
});
config Code
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/Login', {
templateUrl: 'templates/ShowLogin.html',
controller: 'LoginController'
}).
when('/ShoppingCart', {
templateUrl: 'templates/ShoppingCart.html',
controller: 'ShoppingCartController'
}).
when('/Products/:SCId', {
templateUrl: 'templates/Products.html',
controller: 'ProductsController'
}).
otherwise({
redirectTo: '/Products/38'
});
}]);
When user clicks on subcategory, products of that subcategory is listed.
As otherwise is redirectTo: '/Products/38' products of subcategory 38 is listing initially.
I'm facing the following problems:
when user start typing in search box, filter:SerachText is applied on displayed subcategory products. But at this moment i want filter:SerachText to be apply on all the products (Not only on selected subcategory products)
Filter is not applying, if we are in some other routed page say login page. I want as soon as user start typing in search Box products.html and productsController to be activate.
When user has inputted something in search Box, and clicks on sub category, not all the products of that subcategory is listing because filter:SerachText is applied here. In this case i dont want to apply filter:SerachText filter
Can please some one help me to fix all these issues. I've tried all the combinations and permutations, but no luck. I'm also Ok if any architecture change is required that can make the things better.
Have you ever tried to hoist the SearchText filter scope to $parent.SearchText??
I guess, a superior scope ($parent or $rootScope) in your filter could work.
BTW: It works for me, 'cause it seems that ng-include does a local scope for each HTML to render, even in the same page.
P.D: Sorry for my English, greetings from Venezuela :D