I don't get Angular to work. The thing that happens is dat I see literally {{ foobar }} on the screen.
Here are my files:
Index.cshtml of /App/Index:
#{
Layout = null;
}
<!DOCTYPE html>
<html data-ng-app="tournament">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Angular/app.js"></script>
<script src="~/Angular/routes.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Toernooien</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div data-ng-view=""></div>
</body>
</html>
app.js:
var app = angular.module("tournament", []);
routes.js:
app.config(function ($routeProvider) {
$routeProvider
.when('/', { templateUrl: '/Home/Index', controller: 'HomeController' });
});
HomeController.js:
app.controller('HomeController', function ($scope) {
$scope.foobar = 'barFoo';
});
Index.cshtml of /Home/Index
<script src="~/Angular/Controllers/HomeController.js"></script>
<div>
Home/index
<br />
<input type="text" data-ng-model="foo" />
{{ foobar }}
</div>
Thanks everyone for helping me. I finally figured it out. The problem was in my MVC controller.
This is what I had originally:
public ActionResult Index()
{
return View();
}
And this is the solution:
public ActionResult Index()
{
return PartialView();
}
Now, everything is working like it should be.
Related
I am having some trouble implementing a datepicker for date fields on some of my views. I get an error:
JavaScript runtime error: Object doesn't support property or method 'datepicker'
This is my _Layout code and I can't seem to figure on why this error continues to pop up. Any help would be greatly appreciated.
<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")
<script src="#Url.Content("~/Scripts/jquery-2.1.3.js")"
type="text/javascript"></script>\
<script src="#Url.Content("~/Scripts/bootstrap.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/boostrap-datepicker.min.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DatePickerReady.js")"
type="text/javascript"></script>
<script>
$(function () {
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
</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>
<p class="nav navbar-text navbar-right">Hello, #User.Identity.Name!</p>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
May be the problem is your code is adding jQuery and Bootstrap twice by calling:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
This is a documented cause of issues with jQuery. I get a similar error in this snippet when adding jQuery twice.
<html>
<head>
<title>DatePicker Example</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datep").datepicker();
});
</script>
</head>
<body>
<h3>Click to select a date :</h3>
<input type="text" id="datep" />
<script src="https://code.jquery.com/jquery-1.12.4.js">
</body>
</html>
Uncaught TypeError: $(...).datepicker is not a function
Just remove extra jQuery and any other duplicated library. Also include jQuery UI as suggested by user Shyju.
<html>
<head>
<title>DatePicker Example</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datep").datepicker();
});
</script>
</head>
<body>
<h3>Click to select a date :</h3>
<input type="text" id="datep" />
</body>
</html>
I am using JQuery Mobile 1.4 and MVC 4 to test dialog. But I don’t know what should be returned in dialog post action.
There are two questions:
1. What should be returned for dialog action
2. The input data in master page will be lost after dialog post
Master page View Code:
#model MvcApplication4.Models.ViewModel
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TestDialog</title>
<meta name="viewport" content="width=device-width" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile-1.4.0-beta.1.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.js"></script>
<script src="/Scripts/jquery.mobile-1.4.0-beta.1.js"></script>
</head>
<body>
<div id="layoutPage" data-role="page" data-theme="a">
<div id="layoutHeader" data-role="header">
<h2>TestDialog</h2>
</div>
<div id="layoutContent" data-role="content">
#using (Html.BeginForm())
{
<div>
<div class="editor-label">
#Html.LabelFor(model => model.IDDocument)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.IDDocument)
#Html.ValidationMessageFor(model => model.IDDocument)
</div>
</div>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a id="addDetail" href="#Url.Action("ShowDialog", "SampleTest")" data-rel="dialog" data-role="button" >Test dialog</a>
</div>
}
</div>
</div>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
</body>
</html>
Dialog View Code:
#model MvcApplication4.Models.ViewModel
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DialogView</title>
</head>
<body>
<div id="detailPage1" data-role="dialog" >
#using (Html.BeginForm("ShowDialogActioinPost", "SampleTest", FormMethod.Post))
{
<div data-role="header">
<button type="submit" data-icon="check" class="ui-submit" data-inline="true" data-mini="true">Save</button>
<h2 >Dialog Information</h2>
<a data-rel="back" data-icon="back">Go back</a>
</div> //end header
<div data-role="content">
<div class="editor-label">
#Html.LabelFor(model => model.SeqNo)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.SeqNo)
#Html.ValidationMessageFor(model => model.SeqNo)
</div>
</div>
}
</div>
</body>
</html>
Controller Code:
[HttpGet]
public ActionResult ShowDialog()
{
return View("DialogView");
}
[HttpPost]
public ActionResult ShowDialogActioinPost(ViewModel vm)
{
return View("Index"); // should return to master page, but it doesn't work
}
Thanks
Wilson
Try RedirectToAction("Index"); instead of View("Index");
You have to return the model to your master page.
[HttpPost]
public ActionResult ShowDialogActioinPost(ViewModel vm)
{
return View("Index", vm);
}
The answer is here.
Thanks
Wilson
I have a multi-level Layout master pages in an ASP.NET MVC 4.
I have the following:
<title>#ViewBag.Title</title>
The order of Layout pages is as follows:
_Layout.cshtml
_SubLayout.cshtml (based on _Layout.cshtml)
Index.cshtml (based on _SubLayout.cshtml)
I am setting the #ViewBag.Title inside Index Action. However, I get the following exception:
Value cannot be null or empty. Parameter name: contentPath
Here is the code I have. I am simply making the code of ASP.NET Design Patterns books work for VS 2012 / MVC 4
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="header">
<span><a href="#Url.Content("")">
<img alt="Agatha's Clothing Store"
src="#Url.Content("/Content/Images/Structure/lg_logo.png")"
border="0" /></a></span>
</div>
<div id="headerSummary">
#RenderSection("headerBasketSummary", required: false)
</div>
<div class="topBarContainer">
<div id="background">
<div id="navigation">
#RenderSection("MenuContent", required: false)
</div>
<div id="content">
#RenderBody()
</div>
<div style="clear: both;" />
</div>
</div>
#Html.Partial("_SiteFooter")
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-jtemplates.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/agatha-common-scripts.js")"></script>
</body>
</html>
_ProductCatalogProduct.cshtml
#model BaseProductCatalogPageView
#using Agathas.Storefront.Controllers.ViewModels.ProductCatalog
#using Agathas.Storefront.UI.Web.MVC.Helpers
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#if (IsSectionDefined("MenuContent"))
{
#RenderSection("MenuContent", required: false)
}
else
{
#Html.Partial("_Categories", ((BaseProductCatalogPageView)Model).Categories)
}
#RenderBody();
Index.cshtml
#model HomePageView
#using Agathas.Storefront.Controllers.ViewModels.ProductCatalog
#using Agathas.Storefront.Services.ViewModels
#using Agathas.Storefront.UI.Web.MVC.Helpers
#{
Layout = "~/Views/Shared/_ProductCatalogLayout.cshtml";
ViewBag.Title = "Home Page";
}
<img width="559" height="297"
src="#Url.Content("~/Content/Images/Products/product-lifestyle.jpg")"
style="border-width: 0px; padding: 0px; margin: 0px" />
<div style="clear: both;"></div>
<h2>Top Products</h2>
<div id="items" style="border-width: 1px; padding: 0px; margin: 0px">
<ul class="items-list">
#foreach (ProductSummaryView product in Model.Products)
{
<li class="item-detail">
<a class="item-productimage-link" href="#Url.Action("Detail", "Product", new { id = product.Id }, null)">
<img class="item-productimage" src="#Url.Content("~/Content/Images/Products/" + product.Id.ToString() +".jpg"))" /></a>
<div class="item-productname">#Html.ActionLink(product.BrandName + " " + product.Name, "Detail", "Product", new { id = product.Id }, null)</div>
<div class="item-price">#product.Price</div>
</li>
}
</ul>
</div>
Many thanks
This piece of code is throwing the exception: <a href="#Url.Content("")">. This happens because contentPath parameter of Url.Content method cannot be null or empty.
This can happen if you are assigning a value in the Child Razor view file that is also set in the parent one, but is displayed in a partial called by the Layout.cshtml
For example
_Layout.cshtml
|
(parent of)
|
Parent.cshtml
|
(parent of)
|
Page1.cshtml
In Page1.cshtml I do
ViewBag.Title= "Value1";
In Parent.cshtml I do the same but using the Umbraco call:
ViewBag.Title = Umbraco.Field("value").ToString();
The fix is to remove the assignment in Parent.cshtml. This appears to be a bug and I'm afraid that this is the only fix I've found. Hope it helps you out...
You should check if path not null or empty before use it as source of image
#foreach (var post in Model)
{
<div class="col-md-6">
<div class="product-list post-list">
#if (!string.IsNullOrWhiteSpace(post.Photo))
{
<a href="#" class="product-list-img">
<img src="#Url.Content(post.Photo)" alt="">
</a>
}
</div>
</div>
I have two pages: index.html and main.html
When i set the main.html page to be the default page of my app, the java script works, but when I set the index.html to be the main one, after the redirect, the javascript on the main.html just stops working.
here is the HTML of the two pages:
index.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxLinksEnabled = false;
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
// request the persistent file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, null);
}
function onSuccess(fileSystem) {
fileSystem.root.getFile("kuapodata.xml", null, gotMe, failFile);
}
// se o arquivo não existir
function failFile(error) {
$("#formLogin").show();
}
// se o arquivo existir
function gotMe(fileEntry) {
$.mobile.changePage("main.html", null, false, false);
}
</script>
</head>
<body onload="onLoad();">
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="formLogin">
<form id="loginFrm">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinputEmail">
</label>
<input id="textinputEmail" placeholder="email" value="" type="email" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinputPassword">
</label>
<input id="textinputPassword" placeholder="senha" value="" type="password" />
</fieldset>
</div>
<input value="entrar" type="submit" />
</form>
</div>
</div>
<script>
var xml;
function gotFS(fileSystem) {
fileSystem.root.getFile("kuapodata.xml", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
writer.write(xml);
}
function fail(error) {
alert(error.code);
}
// ao fazer o login
$("form").submit(function() {
// chama função que valida usuário
ValidateUser();
return false;
});
// verifica se o usuário existe
function ValidateUser(email, password) {
$.ajax({
type: 'POST',
url: 'http://********/oauth.aspx',
data: "email=" + $("#textinputEmail").val() + "&password=" + $("#textinputPassword").val(),
success: function(data) {
// se o usuário existir
if (data != "false") {
xml = data;
// cria o arquivo xml se ainda não existir
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
// muda o usuário de página
$.mobile.changePage("main.html");
}
else {
alert("Dados inválidos. Tente novamente.");
}
}
});
}
</script>
</body>
</html>
main.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$(document).ready(function() {
alert("yesss");
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="main">
</div>
</div>
</body>
</html>
jQuery Mobile pulls in remote pages via AJAX. When it does this, it only pulls in the first data-role="page" element it finds. This means that anything outside the data-role="page" element is discarded.
The best work-around is to put all of your app's JS into a custom.js file and include it in the head of every page, this way all the code for your site is always available (to do this you will need to use event delegation).
You can also put the JS for each page inside the data-role="page" element so it is grabbed by jQuery Mobile and not just discarded:
<div data-role="page" id="page1">
<script>
alert('hello');
</script>
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="main">
</div>
</div>
I can't see why the following form performs a full postback instead of asynchronously using AJAX. Request.IsAjaxRequest() is always false. I think I've followed all the examples correctly. What am I doing wrong?
Here's the view:
#(Layout = null)
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
</head>
<body>
<div>
<div id="update"></div>
#using(Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "update" }))
{
<input type="submit" value="test" />
}
</div>
</body>
</html>
And here's the controller:
using System.Web.Mvc;
namespace TheHoges.Web.Controllers
{
public class TestController : Controller
{
public ActionResult Index()
{
if (Request.IsAjaxRequest())
{
// never gets here
return Content("it worked");
}
return View();
}
}
}
For reference:
AJAX and MVC 3
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
Do you see this in you web.config?
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
If, yes, including the library above should solve your problem.
Just to be thorough I created a test page. Works peachy...
#{
ViewBag.Title = "Home Page";
}
#(Layout = null)
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
</head>
<body>
<div>
<div id="update">
</div>
#using(Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "update" }))
{
<input type="submit" value="test" />
}
</div>
</body>
</html>