today I'm having a rather dull issue: for some reason JQuery-UI's Datepicker renders, but has no images whatsoever, this image explains what I'm talking about:
This is the (very) simple .js in which I use datepicker:
$(document).ready(function () {
$(".date").datepicker();
});
This is my _Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/Site.css")
#Styles.Render("~/Content/customcss/sitelayout.css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/Scripts/jquery.validate.min.js")
#Scripts.Render("~/bundles/jqueryval")
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
And this is the View in which I use datepicker:
#{
ViewBag.Title = "Creación de Reserva";
Layout = "~/Views/Shared/_Layout.cshtml";
#Styles.Render("~/Content/themes/base/datepicker.css");
}
#section Scripts
{
#Scripts.Render("~/Scripts/ReservationCreate.js");
}
<body>
#RenderPage("~/Views/Shared/_Navbar.cshtml");
<div id="wrap">
<h1>Creación de Reserva</h1>
<div id="content">
<div class="editor-label">
<label>Fecha</label>
</div>
<div class="editor-field">
<input type="text" id="ReservationDate" name="ReservationDate" class="date" />
</div>
</div>
</div>
</body>
I checked in Solution Explorer where the images that JQuery-ui uses, and they (apparently) are in the right location, just to doublecheck:
And just in case you need it, this is my BundleConfig.cs:
using System;
using System.Web;
using System.Web.Optimization;
namespace WebApplication
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
}
So, that's about it, have you guys got any idea why it's not using any of the images for Datepicker? Thank you for checking this out !
The images were not loading because the files in bundleconfig had a different name from the ones in the Solution's /Scripts/ folder.
Changing this:
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
to this:
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/core.css",
"~/Content/themes/base/resizable.css",
"~/Content/themes/base/selectable.css",
"~/Content/themes/base/accordion.css",
"~/Content/themes/base/autocomplete.css",
"~/Content/themes/base/button.css",
"~/Content/themes/base/dialog.css",
"~/Content/themes/base/slider.css",
"~/Content/themes/base/tabs.css",
"~/Content/themes/base/datepicker.css",
"~/Content/themes/base/progressbar.css",
"~/Content/themes/base/theme.css"));
}
fixes the problem. Watch out for this!
Related
I have updated from Bootstrap 3 to Bootstrap 4 now the Razor View will not render properly as seen here in this image:
As you can see all Bootstrap styling is gone and the navbar has disappeared. This was fine with Bootstrap 3.
This is just the standard login page that comes with an MVC project, so I have not added anything fancy to it.
My bundle is as follows:
using System.Web;
using System.Web.Optimization;
namespace FoodSnap
{
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/themes/base/jquery-ui.css"));
}
}
}
In my view I have rendered as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#*#Html.ActionLink("FoodSnap_TEST", "LogIn", "Account", new { area = "" }, new { #class = "navbar-brand" })*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#*<li>#Html.ActionLink("Home", "Index", "Home")</li>*#
#*<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>*#
<li>#Html.ActionLink("Pre-Registration", "Index", "PreRegistration")</li>
<li>#Html.ActionLink("Roles", "Index", "Role")</li>
<li>#Html.ActionLink("FoodSnap", "Index", "FoodSnap")</li>
<li>#Html.ActionLink("Review", "Create", "FoodSnap")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - FoodSnap_TEST</p>
</footer>
</div>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
I have tried numerous things including CDN's and the result is the same. Has anyone seen this before?
Bootstrap 4 is almost a complete rewrite of Bootstrap 3 which means:
None of the Bootstrap 3 code is compatible with Bootstrap 4.
Read the docs to migrate:
https://getbootstrap.com/docs/4.0/migration/
I am a newb in using jquery in MVC, please bear with me. I cannot seem to display the jquery-ui slider control in my mvc page. I have tried to implement the following articles which I have found on the web:
How to add jQueryUI library in MVC 5 project?
jQuery UI with MVC 4
JQuery UI datepicker in Asp.Net MVC
http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/
However, when I run the code, nothing shows. I have created a small little test project, and am trying to implement the slider on the about page. Here is my code:
In the About.cshtml:
#{
ViewBag.Title = "About";
}
<h2>#ViewBag.Title.</h2>
<h3>#ViewBag.Message</h3>
<p>Use this area to provide additional information.</p>
<div style="border: none; height: 20px;" id="slider">
</div>
#section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$("#slider").slider();
});
</script>
}
In the BundleConfig.cs file:
using System.Web;
using System.Web.Optimization;
namespace TestApp
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.10.2.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-1.11.4.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery-ui.css",
"~/Content/themes/base/jquery-ui.all.css"
//"~/Content/themes/base/jquery.ui.core.css",
//"~/Content/themes/base/jquery.ui.resizable.css",
//"~/Content/themes/base/jquery.ui.selectable.css",
//"~/Content/themes/base/jquery.ui.accordion.css",
//"~/Content/themes/base/jquery.ui.autocomplete.css",
//"~/Content/themes/base/jquery.ui.button.css",
//"~/Content/themes/base/jquery.ui.dialog.css",
//"~/Content/themes/base/jquery.ui.slider.css",
//"~/Content/themes/base/jquery.ui.tabs.css",
//"~/Content/themes/base/jquery.ui.datepicker.css",
//"~/Content/themes/base/jquery.ui.progressbar.css",
//"~/Content/themes/base/jquery.ui.theme.css"
));
}
}
}
In the Global.asax.cs file:
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
namespace TestApp
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
and in the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Styles.Render("~/Content/themes/base/css")
#RenderSection("scripts", required: false)
</body>
</html>
I have also created a screenshot of my Solution Explorer in case it may help:
Solution Explorer screenshot
I think it must be something small, but I am struggling to find the problem. I would appreciate it if anyone can point out what I should change in order to see and use the jquery-ui slider, or any other jquery controls in my site.
I found my mistake. I did not add/include the Jquery-ui.css file in the content folder. Once it was included I could see the Jquery control.
The link below explained and helped a lot in finding my mistake:
asp-net-mvc-4-jquery-datepicker
Hopefully this post can help someone else too.
I am trying to implement PagedList in a partial view.
Describing the view setup. I have Controller A with ViewA. This is the parent view and has its own model. Then I have Controller B with PartialViewB and has its own model as well. Then I have a Div in ViewA that will be used to display the PartialViewB. I can load in PartialViewB after hitting a button and then hide the view after hitting the button again. Within the PartialViewB is the PagedList. Hitting the next page button loads the next page, but loads it in its own page, not in the ViewA as it was before.
I can load up more code as needed, but for now here is the Pager
<br />
Page #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount
#Html.PagedListPager(Model, page => Url.Action("ViewComments",
new { courseID = #ViewBag.courseID, page }),
new PagedListRenderOptions { MaximumPageNumbersToDisplay = 5, DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded,
DisplayLinkToLastPage = PagedListDisplayMode.IfNeeded })
::EDIT::
Parent View
<div class="Comments">
<input type="button" id="View" class="CommentsButton" value="View Comments"/>
<input type="hidden" id="Hidden" value="false" />
</div>
<div id="Comments">
</div>
PartialView
#model PagedList.IPagedList<QIEducationWebApp.Models.CourseComment>
#using PagedList.Mvc;
#{
ViewBag.Title = "Comments";
}
<h2>Comments!</h2>
<table>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.CommentDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.UserName)
</td>
<td>
#Html.DisplayFor(modelItem => item.CommentText)
</td>
</tr>
}
</table>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<appSettings>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
<br />
Page #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount
#Html.PagedListPager(Model, page => Url.Action("ViewComments",
new { courseID = #ViewBag.courseID, page }),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
new PagedListRenderOptions { MaximumPageNumbersToDisplay = 5, DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded,
DisplayLinkToLastPage = PagedListDisplayMode.IfNeeded },
new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "Comments" }))
BundleConfig.cs
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/PagedList.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
Check this out: Related SO question
This will use unobtrusive ajax to do the replace for you. You just need to handle the fetch and skip on your end and send back the new partial view along with the model.
#Html.PagedListPager(Model, page => Url.Action("ViewComments", page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing( new AjaxOptions(){ HttpMethod = "GET", UpdateTargetId = "partialContainerYouNeedToReplace"}))
Make sure that you have unobtrusive js referenced on your page when doing this. It comes with MVC out of the box and you should just need to reference the bundle.
Hope this helps.
I am new to angularjs material design and will wish to implement its rich UI features in my frontend. VS13 comes with bootstrap installed in the template created. Can I combine angularjs material design with bootstrap or customize bootstrap to give me the material design look and animations?
I created new project and installed angularjs material design, added it to BondleConfig.vb under the App_Start folder
bundles.Add(New ScriptBundle("~/bundles/angular").Include(
"~/bundles/angular.js",
"~/bundles/angular-animate.js",
"~/bundles/angular-aria.js"))
bundles.Add(New StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/angular-material/angular-material.css",
"~/Content/site.css"))
I was able to add class="md-button md-raised" to a link which gave me a nice raised button but I could not add md-primary to it. Also, using tags like <md-button></md-button> in the html markup gives unknown element error.
Your bundle config looks OK, except you forgot to include the angular-material.js in your bundle.
bundles.Add(New ScriptBundle("~/bundles/angular").Include(
"~/bundles/angular.js",
"~/bundles/angular-animate.js",
"~/bundles/angular-aria.js",
"~/bundles/angular-material.js")) //missing part
bundles.Add(New StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/angular-material/angular-material.css",
"~/Content/site.css"))
You have also to include an app.js file(*) in your config.
Your configuration must have an module and controller.
The key part is dependency injection. You have to include ngMaterial module to work with downloaded libraries...
And don't forget to include other scripts!
//(*) app.js
angular.module('MyApp',['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.title1 = 'Button';
$scope.title4 = 'Warn';
$scope.isDisabled = true;
$scope.googleUrl = 'http://google.com';
});
.buttondemoBasicUsage section {
background: #f7f7f7;
border-radius: 3px;
text-align: center;
margin: 1em;
position: relative !important;
padding-bottom: 10px; }
.buttondemoBasicUsage md-content {
margin-right: 7px; }
.buttondemoBasicUsage section .md-button {
margin-top: 16px;
margin-bottom: 16px; }
.buttondemoBasicUsage .label {
position: absolute;
bottom: 5px;
left: 7px;
font-size: 14px;
opacity: 0.54; }
<link href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<div ng-controller="AppCtrl" class="buttondemoBasicUsage" ng-app="MyApp">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
<md-button md-no-ink="" class="md-primary">Primary (md-noink)</md-button>
<md-button ng-disabled="true" class="md-primary">Disabled</md-button>
<md-button class="md-warn">{{title4}}</md-button>
<div class="label">Flat</div>
</section>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button class="md-raised">Button</md-button>
<md-button class="md-raised md-primary">Primary</md-button>
<md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
<md-button class="md-raised md-warn">Warn</md-button>
<div class="label">Raised</div>
</section>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
<md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">Primary Link</md-button>
<md-button>Default Button</md-button>
<div class="label">Link vs. Button</div>
</section>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
<md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
<md-button class="md-accent">Accent</md-button>
<md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
<div class="label">Themed</div>
</section>
</md-content>
</div>
I also followed this example to show you how this works.
I hope it's OK now :)
If anyone want to know how to get started with Angular Material + MVC in vs you can follow bellow steps.
1.Create a MVC project in Visual Studioe.
2.Go to App_Start folder.
3.Go to BundleConfig.cs.
4.Clear all the code inside RegisterBundles funciton & save it.
5.Go to _Layout.cshtml file under shared folder.
6.Replace the below code.
<!DOCTYPE html>
<html lang="en" ng-app="BlankApp">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</head>
<body>
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
<div class="wrapper">
<div class="container">
#RenderBody()
</div>
</div>
#RenderSection("scripts", required: false)
</body>
</html>
7.Go to index.cshtml
8.Start using Angular Material.(sample code is undermentioned)
#{
ViewBag.Title = "Home Page";
}
<body>
<md-content>
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="one">
<md-content class="md-padding">
<h1 class="md-display-2">Tab One</h1>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
<p>LNullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor.</p>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor.</p>
<p>Integer turpis finibus commodo lectus.</p>
</md-content>
</md-tab>
<md-tab label="three">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Three</h1>
<p>Integer turpis erat, lectus.</p>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</body>
Thanks,
-Happy Coding-
I m trying to bind my model and get error
Uncaught ReferenceError: Unable to process binding "value: function (){return ASP._Page_Views_Configuration_Index_cshtml.Model().SomeProperty }"
Message: ASP is not defined
View:
#using PerpetuumSoft.Knockout
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/knockout")
#model Asteros.MKD.Controllers.SomeModel
#{
var ko = Html.CreateKnockoutContext();
}
#ko.Html.TextBox(model => Model.SomeProperty)
#ko.Apply(Model)
bundles:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
....
bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
"~/Scripts/knockout-{version}.js",
"~/Scripts/knockout.mapping-latest.js",
"~/Scripts/perpetuum.knockout.js"
));
Any ideas?
Use model instead of Model:
#ko.Html.TextBox(model => model.SomeProperty)