Equivalent of "#section" in ASP.NET Core MVC? - asp.net

In the default _Layout.cshtml file, scripts are defined in "environment"s like so:
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
And below that is #RenderSection("scripts", required: false)
I can't seem to implement a section (in this case "scripts") in any separate .cshtml file since it looks like they got rid of "#section" in Core
I would like to add specific scripts for specific views. What is the new way to go about this? Do I just dump everything in _Layout now?

I think you are mistaken. It works just fine in ASP.NET Core. I have this in my _layout.cshtml
#RenderSection("scripts", required: false)
and in one of my views I'm adding scripts there like this:
#section Scripts {
#if (Model.CanEdit)
{
await Html.RenderPartialAsync("EditorScriptsPartial");
}
}

Related

spring mvc swaggger ui getting xml response but the swagger ui requires json format

Day before yesterday I came to know about swagger.Its fantastic.But may be because of my lack of knowledge there is something I am unable to do. I tried hard to solve it and finally I putting it as a question here.
my pom.xml
<dependency>
<groupId>com.mangofactory</groupId>
<artifactId>swagger-springmvc</artifactId>
<version>0.5.2</version>
</dependency>
I have added this dependency.
my servlet-context.xml is as below.I did bind the swagger configuration bean and make this config configurations enabled.
<!-- Configuration Bean -->
<bean id="documentationConfig" class="com.mangofactory.swagger.configuration.DocumentationConfig"/>
<context:annotation-config />
<mvc:default-servlet-handler/>
Create the swagger.properties with the following entries.
documentation.services.version=1.0
documentation.services.basePath=http://localhost:8080/swagger
and include the same in myapplication context the way any other property files are included.
<context:property-placeholder location="classpath:/swagger.properties" />
my controller to document the api and its methods
#Controller
#Api(value="onlinestore", description="Operations pertaining to Online Store")
#RequestMapping(value="/onlinestore")
public class OnlineStoreController {
#Autowired
private IStoreFront storeFrontService;
#ApiOperation(value = "View the Specific info of the product")
#RequestMapping(value="/authorize/viewProduct/{productid}", method=RequestMethod.GET)
public ResponseEntity<Object> viewProduct(#ApiParam(name="productId", value="The Id of the product to be viewed", required=true)
Now by clicking the following link I am able to see the documenation
http://localhost:8080/swagger/api-docs
the result is as below
<ApiDocumentation>
<apiVersion>1.0</apiVersion>
<apis>
<description>Operations pertaining to Online Store</description>
<path>/api-docs/onlinestore</path>
</apis>
<basePath>http://localhost:8080/swagger</basePath>
<swaggerVersion>1.0</swaggerVersion>
</ApiDocumentation>
it returns xml format. Then I integrated the swagger UI using the following link https://github.com/swagger-api/swagger-ui.
The index.html page is as below :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<link href='css/typography.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='css/reset.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='css/reset.css' media='print' rel='stylesheet' type='text/css'/>
<link href='css/print.css' media='print' rel='stylesheet' type='text/css'/>
<script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
<script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
<script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
<script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
<script src='lib/handlebars-2.0.0.js' type='text/javascript'></script>
<script src='lib/js-yaml.min.js' type='text/javascript'></script>
<script src='lib/lodash.min.js' type='text/javascript'></script>
<script src='lib/backbone-min.js' type='text/javascript'></script>
<script src='swagger-ui.js' type='text/javascript'></script>
<script src='lib/highlight.9.1.0.pack.js' type='text/javascript'></script>
<script src='lib/highlight.9.1.0.pack_extended.js' type='text/javascript'></script>
<script src='lib/jsoneditor.min.js' type='text/javascript'></script>
<script src='lib/marked.js' type='text/javascript'></script>
<script src='lib/swagger-oauth.js' type='text/javascript'></script>
<!-- Some basic translations -->
<!-- <script src='lang/translator.js' type='text/javascript'></script> -->
<!-- <script src='lang/ru.js' type='text/javascript'></script> -->
<!-- <script src='lang/en.js' type='text/javascript'></script> -->
<script type="text/javascript">
$(function () {
var url = window.location.search.match(/url=([^&]+)/);
if (url && url.length > 1) {
url = decodeURIComponent(url[1]);
} else {
url = "http://localhost:8080/swagger/api-docs";
}
hljs.configure({
highlightSizeThreshold: 5000
});
// Pre load translate...
if(window.SwaggerTranslator) {
window.SwaggerTranslator.translate();
}
window.swaggerUi = new SwaggerUi({
url: url,
dom_id: "swagger-ui-container",
supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
onComplete: function(swaggerApi, swaggerUi){
if(typeof initOAuth == "function") {
initOAuth({
clientId: "your-client-id",
clientSecret: "your-client-secret-if-required",
realm: "your-realms",
appName: "your-app-name",
scopeSeparator: ",",
additionalQueryStringParams: {}
});
}
if(window.SwaggerTranslator) {
window.SwaggerTranslator.translate();
}
},
onFailure: function(data) {
log("Unable to Load SwaggerUI");
},
docExpansion: "none",
jsonEditor: false,
defaultModelRendering: 'schema',
showRequestHeaders: false
});
window.swaggerUi.load();
function log() {
if ('console' in window) {
console.log.apply(console, arguments);
}
}
});
</script>
</head>
<body class="swagger-section">
<div id='header'>
<div class="swagger-ui-wrap">
<a id="logo" href="http://swagger.io"><img class="logo__img" alt="swagger" height="30" width="30" src="images/logo_small.png" /><span class="logo__title">swagger</span></a>
<form id='api_selector'>
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
<div id='auth_container'></div>
<div class='input'><a id="explore" class="header__btn" href="#" data-sw-translate>Explore</a></div>
</form>
</div>
</div>
<div id="message-bar" class="swagger-ui-wrap" data-sw-translate> </div>
<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
</body>
</html>
Now the when I click this link http://localhost:8080/swagger/dist/index.html
I am getting as above. Clearly it tells me that it is expecting json but getting xml as input as http://localhost:8080/swagger/api-docs is returning xml. It is axpecting something like this :
{
"ApiDocumentation": {
"apiVersion": "1.0",
"apis": {
"description": "Operations pertaining to Online Store",
"path": "/api-docs/onlinestore"
},
"basePath": "http://localhost:8080/onlineStore",
"swaggerVersion": "1.0"
}
}
I am unable to understand where did I went wrong.
You need to first make sure that your server is configured to produce JSON:
curl -H Accept:application/json http://localhost:8080/swagger/api-docs
And if you don't get JSON back, you have a server configuration issue. If this shows JSON, it's possible that your server is expecting a different Accept header, like application/json;charset=UTF8, in which case you can tell swagger-ui to send that instead of just application/json:
window.swaggerUi = new SwaggerUi({
url: url,
swaggerRequestHeaders: 'application/json;charset=UTF8',
// ...

jstree is not loading icons in MVC5 from css url

I'm trying to use jsTree in AngularJS powered MVC5 school project. To use jsTree in angular app I'm using this directive.
From what I can observe everthing working ok:
- jstree loads correctly data and structure, and fires all events
- jstree loads CSS style (if i change for instance margin in css, it's reflected to jstree, if remove css reference it rendered as ordinary HTML UL)
However it looks like, that rest of layout doesnt work:
- no background change, when i move cursor over node
- no conectors, no node images, no arrows
From what i was able to find it looks like that css is not using images referenced in it:
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
background-image: url("32px.png");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
So I tried to use:
bundles.Add(new StyleBundle("~/jstree").Include(
"~/Content/jstree/style.css", new CssRewriteUrlTransform()));
Css with images is placed in same folder:
But that also did not worked. Any ideas? Sugestions?
Rest of the code:
angular.module('JosefinaApp', ['ui.layout', 'JosefinaApp.controllers', 'jsTree.directive']);
angular.module('JosefinaApp.controllers', [])
.controller('TreeViewController', ['$scope', '$location', '$http', function ($scope, $location, $http) {
$location.path('/home');
$http({
method: 'GET',
url: '/api/project/gettasks/1',
}).
success(function (data) {
$scope.treeModel = data;
}).
error(function () {
$scope.test = "Error";
});
$scope.treeViewNodeSelected = function (e, data) {
console.log(data.node.id);
};
}])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind="models.helloAngular"></title>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"> </script>
<link href="#Url.Content("~/Content/themes/base/all.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Styles.Render("~/jqueryUI")
#Styles.Render("~/uiLayout")
#Styles.Render("~/jstree")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryUI")
<script src="#Url.Content("~/Scripts/angular.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui-router.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-resource.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui/ui-layout.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jstree.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jsTree.directive.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/JosefinaApp.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/LandingPageController.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/TreeViewController.js")" type="text/javascript"> </script>
</head>
<body>
<div ng-app="JosefinaApp">
<div ng-controller="TreeViewController">
<js-tree theme="default" tree-events="select_node:treeViewNodeSelected" tree-data="scope" tree-model="treeModel">
</js-tree>
</div>
</div>
#RenderBody()
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Browser stored images, internet explorer was caching empty images and showing them instead of geting them from server.
... kill me please

New ASP.Net MVC3 project, won't load files from Scripts folder

I just created a new ASP.Net MVC3 project, and it won't load any scripts from the Scripts folder, gives me a 404 when I debug.
How in the world do I fix this?
included like this:
<script type="text/javascript" src="../../Scripts/jquery.validationEngine.js"></script>
<script type="text/javascript" src="../../Scripts/languages/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="../../Scripts/bootstrap-transition.js"></script>
<script type="text/javascript" src="../../Scripts/bootstrap-alert.js"></script>
<script type="text/javascript" src="../../Scripts/bootstrap-modal.js"></script>
or using a Global variable in App_Code like this:
public static readonly string JSDir = "../../Scripts";
In my view:
<script type="text/javascript" src="#GlobalVal.JSDir/jquery.validationEngine.js"></script>
<script type="text/javascript" src="#GlobalVal.JSDir/languages/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="#GlobalVal.JSDir/bootstrap-transition.js"></script>
<script type="text/javascript" src="#GlobalVal.JSDir/bootstrap-alert.js"></script>
<script type="text/javascript" src="#GlobalVal.JSDir/bootstrap-modal.js"></script>
Tried this, too:
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validationEngine.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/languages/jquery.validationEngine-en.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/bootstrap-transition.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/bootstrap-alert.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/bootstrap-modal.js")"></script>
Either way, same result. 404 for all files in Scripts folder.
A Web.config file had been placed in that directory that had the http handler to block serving anything from that folder.

jqTree - css to show dotted lines in tree

Does anyone have some css styles and images to apply to jqTree to show the outline of the tree? Something like YUI treeview that shows a dotted border
http://developer.yahoo.com/yui/examples/treeview/default_tree.html
Turns out YUI treeview allows you to use existing html to render.
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/tree.jquery.js" type="text/javascript"></script>
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/treeview/assets/skins/sam/treeview.css">
<!-- Dependency source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<!-- Optional dependency source file to decode contents of yuiConfig markup attribute-->
<script src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js" ></script>
<!-- TreeView source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/treeview/treeview-min.js" ></script>
<script>
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView("committeeTree");
// if required, add nodes here
tree.render();
}
$(function () {
$("#myTree").tree({
data: source
});
treeInit();
});
</script>

JQuery Session problem

I am using jQuery session in my master page. Anything I'm missing?
Code:
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.session("lnkID","A1")
});
</script>
Error:
Microsoft JScript runtime error: Object doesn't support this property or method
By your example alone, you're missing a reference to the required files, and you're not wrapping your jQuery code in script tags. You need to reference not only jquery-source, but jquery-json, and jquery-session as well.
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.json.js"></script>
<script type="text/javascript" src="scripts/jquery.session.js"></script>
Once you've got those in place, you need to place your logic within script tags:
<script type="text/javascript">
$(function(){
$.session("foo", "bar");
});
</script>
See the following demo for an example: http://www.jaysalvat.com/session/test1.html
Lastly, the language attribute of the script tag is deprecated. You can do away with it, but keep the type attribute.

Resources