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.
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 used easy java simulation to create a simulation and export it into an HTML file with some reference js and CSS file
How do I edit it to make an ionic app
<ion-content>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/ejss.css" />
<script src="assets/js/common_script.js"></script>
<script src="assets/js/textresizedetector.js"></script>
<script src="assets/js/ejsS.v1.min.js"></script>
</head>
<body>
<div role="button" id="_topFrame" style="text-align:center"></div>
<script src="assets/js/Test.js"></script>
</body>
</ion-content>
Use these code on the home page but running it does not display anything
Struts jquery anchor tag is not showing in the form
<head>
<sj:head jqueryui="true" jquerytheme="redmond" />
<!--
<link rel="stylesheet" href="css/jquery-ui.css"> -->
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</head>
<s:form id="form">
........................
..........................
<s:url var="ajaxReport" value="/report.action"/>
<sj:a id="sumbit" formIds="form" buttonText="Sumbit" indicator="indicator"
button="true" buttonIcon="ui-icon-refresh" > Submit</sj:a>
</s:form>
In this only the submit text is displayed. Any idea what might be wrong here?
The <sj:head /> tag already includes the jQuery libraries. Including them again usually causes problems, and the JS console may provide a clue.
I created a simple dojomobile app in worklight 6.1. I have the mobile test workbench installed in the same eclipse env as worklight. The code below is the dojo code for the hybrid app's index.html. It is a very basic dojo mobile app using default header information from worklight.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:true">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'Heading'"></div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Category</h2>
<div data-dojo-type="dojox.mobile.RoundRect">
<div data-dojo-type="dojox.mobile.RoundRectList">
<div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item'"></div>
<div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item'"></div>
</div>
</div>
<button data-dojo-type="dojox.mobile.Button">Button1</button>
<button data-dojo-type="dojox.mobile.Button">Button2</button>
<button data-dojo-type="dojox.mobile.Button">Button3</button>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
The problem when I register the app in the test workbench and record a test on my android device (Samsung s4). The test app does not recognize it is running dojo. The display of the app on the device is missing the header line. The test contents from from the recorded steps say that I clicked on JQuery Button and not dojox.mobile.Button.
Weird thing, when you go to replay the recorded test, the app displays properly (header and other dojo controls), and the script fails because it is looking for JQuery Button. I could go in and edit the script so that it is correct, but that is not what I want to do for every script that I record or rerecord because of app changes.
Please let me know what I'm doing wrong or is this a known problem.
Jquery is added by default into the worklight application. See the script tag with
<script>window.$ = window.jQuery = WLJQ;</script>
in your Html head tag. Remove it and try!