Hey guys i'm using asp mvc4 for building a site,im having trouble in Views
First of all i have my _Layout View calling a partialView for header and my partial View is getting data from a model in to fill some data in the header,
It's working by the way just in the Main (index) view but moving to another views just call the Partial view without getting data from database.
Hope i explained Well :D
_layout View
#model MvcApplication1.Models.SchoolInfo
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>#Html.DisplayFor(model => model.SiteName)</title>
<!-- Bootstrap Core CSS -->
<link href="~/Content/Template/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/Template/css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<body>
<header>
<section id="login">
#Html.Partial("_LoginPartial")
#if (Request.IsAuthenticated)
{
#Html.Partial("_SiteHeaderPartial")
}
</section>
</header>
#RenderBody()
#if (Request.IsAuthenticated){
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © Your Website footer</p>
</div>
</div>
</div>
</footer>
}
<!-- jQuery -->
<script src="~/Scripts/Template/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="~/Scripts/Template/js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
_SiteHeaderPartial
#model MvcApplication1.Models.SchoolInfo
<div class="brand">#Html.DisplayFor(model => model.SchoolName)</div>
<div class="address-bar">Country | Address : #Html.DisplayFor(model => model.SchoolAddress) | 011 #Html.DisplayFor(model => model.SchoolPhone)
Index and About views are the same (empty).
If your not seeing the details in the About.cshtml view, its because you have not passed a SchoolInfo model to that view (or the model is not populated with the data). However a layout should not include a model declaration (unless its a base model from which all views that use that layout derive).
Remove #model MvcApplication1.Models.SchoolInfo from the layout and instead of #Html.Partial("_SiteHeaderPartial"), use
#Html.Action("SiteHeader", "yourControllerName")
where SiteHeader() is a a controller method that gets your data and returns a partial view, for example
[ChildOnlyAction]
public PartialViewResult SiteHeader()
{
SchoolInfo model = ... // populate your model
return PartialView("_SiteHeaderPartial", model);
}
Sife note: You also need to remove <title>#Html.DisplayFor(model => model.SiteName)</title> or replace it with (say) <title>#ViewBag.Title</title> and in each view, pass the value to the partial using #{ ViewVag.Title = someValue; }
Related
I have made a Shopify app, it is a sales channel... now I want to embed the app, but the app always shows in a new browser window.
This is what I have done: From Shopify Partners Account, I have gone to the App's Extension and made it embedded:
Now when user installs the app, I redirect the users to the oAuth page... if user accepts the app is installed.
Next time user logs in to the app, I return the following code (C#, ASP.NET MVC):
public ActionResult Handshake(string shop)
{
return View("Test"); // test view
}
I have tried returning both of the following content in the Test view:
a complete HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/3.21.1/polaris.min.css" />
</head>
<body>
<div class="Polaris-Page">
<div class="Polaris-Page__Header">
<h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Settings</h1>
</div>
<div class="Polaris-Page__Content">
<p>Page Content</p>
</div>
</div>
</body>
</html>
Just a div which contains my app:
<div class="Polaris-Page">
<div class="Polaris-Page__Header">
<h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Settings</h1>
</div>
<div class="Polaris-Page__Content">
<p>Page Content</p>
</div>
</div>
But the HTML that I return never gets embedded in Shopify Admin page... It always appear in a new browser tab.
How can I embed this app?
I had to change my response with the following and then the app was embedded:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/3.21.1/polaris.min.css" />
<script src="https://cdn.shopify.com/s/assets/external/app.js"></script>
<script type="text/javascript">
ShopifyApp.init({
forceRedirect: true,
apiKey: 'my-api-key',
shopOrigin: 'https://store-name.myshopify.com'
});
ShopifyApp.Bar.loadingOff();
</script>
</head>
<body>
<div class="Polaris-Page">
<div class="Polaris-Page__Header">
<h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Settings</h1>
</div>
<div class="Polaris-Page__Content">
<p>Page Content</p>
</div>
</div>
</body>
</html>
This link is also a good resource.
This is discouraging me - I'm using the latest version of .NET core, SDK, visual studio 2019,
Started new project - ASP.net core Razor pages, I'm tring to add #RenderPage("") without success.
It looks like it is not part of abstract class RazorPage (that inherit RazorPageBase, at the Microsoft.AspNetCore.Mvc.Razor namespace (part of dotnet\packs\Microsoft.AspNetCore.App.Ref\3.1.3\ref\netcoreapp3.1\Microsoft.AspNetCore.Mvc.Razor.dll))
Everything I try, there is an error that says:
Error CS0103 The name 'RenderPage' does not exist in the current context
my _Layout page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - TestApp</title>
#*<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />*#
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div>
#RenderPage("/Shared/_MenubarPage")
</div>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<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>
#RenderSection("Scripts", required: false)
</body>
</html>
(Of course I have partial _MenubarPage.cshtml page within Shared folder)
Can anyone please tell me where am I doing wrong? Should I add some kind of an external nuget?
Try the following code snippet in (the asp.net core 3.1) _layout page.
<partial name="_MenubarPage" />
You can use #RenderPage("_MenubarPage.cshtml");.
You can also use #RenderPage("_MenuPage.cshtml", MyModel) which allows you to supply any model you like to the view by including it as a second parameter.
You can also use #{Html.RenderPartial("_MenubarPage");} if you are using a partial. But don't forget that you need to wrap it with the razor code block #{}
I am trying to make web application and i need to add an icon to my title bar with a name.
I am making the web application using empty project in MVC with web form included. I am doing the coding using Visual studio 2017. I have tried my layout as below so far.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/nav.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/svg" href="~/Content/img/download.png" />
<script src="~/Scripts/layout.js"></script>
<title>#ViewBag.Title</title>
</head>
<body>
<navbar>
<div class="topnav" id="myTopnav">
Home
Login
Payment
Customer Registration
<a href="javascript:void(0);" class="icon" onclick="myfunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div>
#RenderBody()
</div>
</navbar>
</body>
</html>
I have tried to link the image before title but it took a wrong turn. Since I am new to MVC, please give me some method to add an icon to title bar.
What you are looking for is called a favicon. You can generate it from png or whatever and then include it in your page like this:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Here's a favicon generator (one of many):
https://www.favicon-generator.org/
The problem lays in this code:
<link rel="icon" type="image/svg" href="~/Content/img/download.png" />
You are specifying that the type is image/svg while instead it is a image/png.
Be sure that a png image exists in Content/img folder.
I'm trying to use customized css on bootstrap 3, but failed. What I want is(on wide screen):
combo box located in vertical center on the left side.
The h3 Title located in center(This item is the highest).
The date mark located in bottom(This item is the shortest) on the right side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" />
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" />
<![endif]-->
<style>
.vcenter {
vertical-align:middle
}
.vbottom {
vertical-align:bottom
}
</style>
</head>
<body>
<div class="container">
<form class="form-horizontal bg-info" role="form">
<div class="form-group">
<div class="col-md-4 vcenter">
<div class="input-group input-group-lg">
<select class="form-control">
<option>a</option>
<option>b</option>
</select>
</div>
</div>
<div class="col-md-6">
<h3>Title</h3>
</div>
<div class="col-md-2 vbottom">
<p class="text-right"><small>2014.09.03</small></p>
</div>
</div>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" />
</body>
</html>
Try this:
for vertical align use display: table-cell
.vcenter {
vertical-align:middle;
display:table-cell;
}
Use inline padding-top, here is the demo
left column: height 46px, add 5 px (=(56-46)/2)
middle column: height 56px
right column: height 30px, added 26 px(=56-30)
Cons:
Should manual calculate.
This method works on wide screen. It will get extra height on mobile phone.
It's very strange, I call dijit.byId() in dojo.addOnLoad(function{...}), it return undefined. In order to check if the id exist, i call dojo.byId() at the same time, it return some object. So I guess the component is not a dijit component? this is the whole code: Please help me, thanks in advice!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- Dojo/Diji definations -->
<link href='../dojoroot/dijit/themes/tundra/tundra.css' type='text/css' rel='stylesheet'/>
<link href='../dojoroot/dojo/resources/dojo.css' type='text/css' rel='stylesheet'/>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- Main scripts -->
<script type="text/javascript">
dojo.addOnLoad(function()
{
// Include library
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
// add the select child event to the tab panel
alert(dijit.byId("contentTabPanel")); // return no defined
alert(dojo.byId("contentTabPanel")); // return an object
});
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<!-- Content Tab Panel -->
<div id="contentTabPanel" dojoType="dijit.layout.TabContainer" region="center">
<!-- Tab UserGroup -->
<div dojoType="dijit.layout.ContentPane" title="UserGroup">
</div>
</div>
</div>
</body>
</html>
OMFG!!!!! I know the reason!!!!! I cost 5 Hours just for this STUPID error:
I MUST write the
// Include library
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
outside the dojo.addOnLoad(function() { !!!