【发布时间】：2014-09-18 13:18:27
【问题描述】：
我正在使用带有淘汰赛的 ASP.NET MVC 来构建一个带有事件的日历，当用户单击该事件时，一个 Ajax 请求会与事件数据一起发送到 c# 函数。 如果用户在单击添加 href 以及添加 href 以调用正确的函数之前没有登录，我很难让错误 div 显示出来。
AddEvent 中的参数是从 ASP.NET 视图中填充的
这是我的 HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="/Hudl/Content/styles.css" />
<link rel="stylesheet" href="/Hudl/Scripts/jquery-ui-1.11.0/jquery-ui.css" />
<script src="/Hudl/Scripts/knockout-3.1.0.js"></script>
<script src="/Hudl/Scripts/jquery.min.js"></script>
<script src="/Hudl/Scripts/jquery-ui-1.11.0/jquery-ui.js"></script>
<script src="/Hudl/Scripts/Google/Google.js"></script>
<meta name="viewport" content="width=device-width" />
<title>Concert</title>
</head>
<body>
<div><img src="/Hudl/Content/Images/curtains_closing.jpg" width="100%" height="200em"></div>
<div class="title">
7 2014
<span id="signinButton">
<span class="g-signin"
data-callback="signinCallback"
data-clientid="1071645370589-acdsg7rjbsk7dn5lecfbk83k9uh8fnaa.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schema.org/AddAction"
data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>
</div>
<div data-bind="visible: displayError" id="error" title="Must Login">
<p>You must login to Google+ before you can add a concert to your calendar.</p>
</div>
<table border="1">
<tr><th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th></tr>
<tr>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
<td><div class="date">1</div></td>
<td><div class="date">2</div></td>
<td><div class="date">3</div></td>
<td><div class="date">4</div></td>
<td><div class="date">5</div></td>
</tr>
<tr>
<td><div class="date">6</div></td>
<td><div class="date">7</div></td>
<td><div class="date">8</div></td>
<td><div class="date">9</div></td>
<td><div class="date">10</div></td>
<td><div class="date">11</div></td>
<td><div class="date">12</div></td>
</tr>
<tr>
<td><div class="date">13</div></td>
<td><div class="date">14
<div>
<a href="javascript:AddEvent('4', 'Paul McCartney', 'Can You Believe It?', '07/14/2014', '18:30', '23:30:00')">18:30</a>
Paul McCartney
</div>
</div>
</td>
<td><div class="date">15</div></td>
<td><div class="date">16</div></td>
<td><div class="date">17</div></td>
<td><div class="date">18
<div>
<a href="javascript:AddEvent('9', 'Midwest Cup Show Choir Invitational', 'High school show choirs battling for the championship!', '07/18/2014', '13:30', '22:00:00')">13:30</a>
Midwest Cup Show Choir Invitational
</div>
</div>
</td>
<td><div class="date">19
<div>
<a href="javascript:AddEvent('8', 'Marc-Andre Hamelin', 'Classical piano styles of the new era.', '07/19/2014', '20:00', '23:30:00')">20:00</a>
Marc-Andre Hamelin
</div>
</div>
</td>
</tr>
<tr>
<td><div class="date">20</div></td>
<td><div class="date">21</div></td>
<td><div class="date">22
<div>
<a href="javascript:AddEvent('3', 'Edison', 'Family friendly.', '07/22/2014', '17:00', '20:00:00')">17:00</a>
Edison
</div>
<div>
<a href="javascript:AddEvent('6', 'Tracy Byrd', 'Kick off your shoes come on in!', '07/22/2014', '18:00', '23:00:00')">18:00</a>
Tracy Byrd
</div>
</div>
</td>
<td><div class="date">23</div></td>
<td><div class="date">24
<div>
<a href="javascript:AddEvent('2', 'Imagine Dragon', 'Hipsters Paradise.', '07/24/2014', '18:45', '23:00:00')">18:45</a>
Imagine Dragon
</div>
<div>
<a href="javascript:AddEvent('7', 'Blue Man Group', 'Vegas in Nebraska.', '07/24/2014', '20:00', '23:30:00')">20:00</a>
Blue Man Group
</div>
</div>
</td>
<td><div class="date">25</div></td>
<td><div class="date">26</div></td>
</tr>
<tr>
<td><div class="date">27</div></td>
<td><div class="date">28</div></td>
<td><div class="date">29</div></td>
<td><div class="date">30
<div><a href="javascript:AddEvent('1', 'Powerman 5000', 'Heavy Metal Awesomeness!', '07/30/2014', '18:30', '23:30:00')">18:30</a>
Powerman 5000
</div>
</div>
</td>
<td>
<div class="date">31</div>
</td>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
</tr>
</table>
<script type="text/javascript">
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function signinCallback(authResult) {
this.authResult = authResult;
if (authResult['status']['signed_in']) {
document.getElementById('signinButton').setAttribute('style', 'display: none');
} else {
console.log('Sign-in state: ' + authResult['error']);
}
};
</script>
<script>
$(function () {
$("#error").dialog();
});
</script>
</body>
</html>
还有我的 js
function ViewModel() {
var self = this;
self.displayError = ko.observable(false);
self.addEvent = function(id, artist, description, date, startTime, endTime) {
if (!authResult['status']['signed_in']) {
self.displayError = true;
self.errorMessage = 'You are not logged-in to your google account.';
} else {
XMLHttpRequest.open("Get", "https://www.googleapis.com/calendar/v3/users/me/calendarList", true);
//make google api call to get list of calendars based on authResult value in callback function
//if api call to get calendars is successful, use authResult, concert, and calendarID to insert event into to make a new google api call to insert event
}
};
};
ko.applyBindings(new ViewModel());
现在我在任何调用 javascript 函数的地方都收到“未捕获的类型错误：未定义不是函数”。
【问题讨论】：
-
self.displayError = ko.Observable(false);应该是小写的observable。你能把它放在一个 jsfiddle 中吗？ -
@Joe 小写没有变化...我将改变我的观点以完成 HTML 以消除 ASP.NET 方面的影响
标签： c# javascript asp.net asp.net-mvc knockout.js