I am using ASP.NET MVC with knockout to build a calendar with events that when a user clicks on the event, an Ajax request is sent with the event data to a c# function.
I am having a tough time getting the error div to show up if the user is not logged in prior to clicking the add href, as well as the add href to call the proper function.
The parameters in the AddEvent are being populated from the ASP.NET View
Here is my 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>
18:30
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>
13:30
Midwest Cup Show Choir Invitational
</div>
</div>
</td>
<td><div class="date">19
<div>
20:00
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>
17:00
Edison
</div>
<div>
18:00
Tracy Byrd
</div>
</div>
</td>
<td><div class="date">23</div></td>
<td><div class="date">24
<div>
18:45
Imagine Dragon
</div>
<div>
20:00
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>18:30
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>
and my 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());
right now i am receiving "Uncaught TypeError: undefined is not a function" everywhere that a javascript function is being called.
I went ahead and created a fiddle for this at http://jsfiddle.net/RKD9J/.
Key change was to use a knockout data binding handler for the click event to add a concert.
18:30Powerman 5000
Changes to
<a href="#" data-bind="click: function(data, event) { addEvent('1', 'Powerman 5000', 'Heavy Metal Awesomeness!', '07/30/2014', '18:30', '23:30:00') }" >18:30</a> Powerman 5000
Following the instructions for passing arguments to functions found here http://knockoutjs.com/documentation/click-binding.html
Your javascript:AddEvent statement is assuming that there is an AddEvent declared at the top (window) level, not on your view model.
Related
I have a grid table which I'm trying to click one of its column's without any success so far.
I can get its content\data(of each of the coulmns) , but when clicking on it, the test passes but does not really click on the requested element. either not on the row nor the column.
I tried it in two different ways:
WebDriverWait wait = new WebDriverWait(_webdriver, TimeSpan.FromSeconds(10));
_webdriver.SwitchTo().Frame("WebResource_kendoHistory");
var tbl = _webdriver.FindElements(By.Id("tblMain"));
var gridmaster = tbl[0].FindElement(By.Id("tdGridMaster"));
var gridcontent = gridmaster.FindElement(By.CssSelector("div.k-grid-content"));
var tableselectable = gridcontent
.FindElement(By.CssSelector("table.k-selectable"));
var tr = tableselectable.FindElements(By.CssSelector("tr[role='row']"));
var td = tr[1].FindElements(By.TagName("td"));
td[1].Click();
And by this as well:
var element = wait.Until(
ExpectedConditions.ElementToBeClickable(
By.CssSelector(".k-selectable tr[role='row']")
)
);
element.Click();
I have tried to make a Javascript click as well without any success.
This is part of the Html:
<!DOCTYPE html>
<html class="k-ie k-ie11">
<head>
<title></title>
</head>
<body class="k-rtl" style="width: 100%; height: 100%;">
<div class="k-widget k-splitter" id="splitterDiv" data-role="splitter">
<div class="k-pane k-scrollable" id="incidentsDiv" role="group" >
<table id="tblMain" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="tdGridMaster" colspan="5">
<div class="k-grid k-widget"
id="gridMaster" data-role="grid"
style="width: 100%; height: 242px;" >
<div class="k-grid-content" style="height: 163px;">
<table class="k-selectable" role="grid"
data-role="selectable">
<tbody role="rowgroup">
<tr role="row"
data-uid="c65559ae-8b2f-4768-9cb9-7a9f7c3dc3ba">
<td>
<a style="color: blue; text-decoration: underline; cursor: pointer;"
onclick="motherOrBatClicked('null',' ')"> </a>
</td>
<td>2018-4315</td>
<td>incident</td>
<td>חss</td>
<td>2018-8888</td>
<td style="display: none;"> </td>
<td><sssa1></td>
<td>Joe</td>
<td>12/04/2018</td>
<td> </td>
<td>Digitar</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
var tbl = _webdriver.FindElement(By.CssSelector("#tblMain #gridMaster table.k-selectable"));
var firstCell = tbl.FindElement(By.CssSelector("tr[role='row'] > td"));
var firstLink = firstCell.FindElement(By.CssSelector('a'));
WebDriverWait wait = new WebDriverWait(_webdriver, TimeSpan.FromSeconds(20));
wait.Until(ExpectedConditions.ElementToBeClickable(firstLink));
firstLink.click();
I want to display an anchor tag inside angular expression enclosed by html tag. when I am using it inside html tag, it is displaying the raw path as it is which is:
<a href='../UserControls/DownloadRLCSFile.ashx?Path=\\\\dotnetdev\\csv\\RLCSDocuments\\Registrations\\ABACF\\E.S.I.C. Registration\\Sample.xlsx' target='_blank' download><i class='fa fa-download' style='font-size: 13pt;' ></i></a> Code :
<div id="Div2" ng-controller="BasicRegulatoryDetail">
<!--added by dilip -->
<h4 class="padder-sm b-b"><b>Regulatory Updates</b></h4>
<div>
<div class="table-responsive">
<table class="table table-striped bg-white ">
<%--<thead>
<tr>
<th>Subject</th>
<th>Download</th>
</tr>
</thead>--%>
<tbody>
<tr ng-repeat="bs in BasicInfo">
<td>
<asp:HyperLink ID="HyperLink1" NavigateUrl="~/RLCS_Connect/RegulatoryUpdateDetails.aspx?Subject={{bs.Subject}}" runat="server">{{bs.Subject}}</asp:HyperLink>
</td>
<td>{{bs.Document_Path}}</td>//here i am facing the problem </tr>
</tbody>
</table>
</div>
</div>
</div>
use ng-bind-html something like
<td><span ng-bind-html='bs.Document_Path'></span></td>
In My web page In a portion i want to display a text/message and that text/message has to change after 15 seconds and it has to replaced with another text/message in the same portion. I Created this web application using ASP.NET.
In above Image I want to Display the Text/Message. How can i do ?
ASPX :
<table>
<tr>
<td style="width: 150px">
<a href="http://www.wissen.com">
<img alt="" class="style4" src="Wissen_logo.png" />
</a>
</td>
<td style="width: 1000px; background-color:Aqua">
<marquee behavior="scroll" scrollamount="3" direction="left" width="1000">ghdkj * hchjsdgfhgflghl * yuftwefrweirgeweko</marquee>
</td>
</tr>
</table>
JS
<script type="text/javascript">
var i=1;
var stat1="foo";
var stat2="Bar";
var stat3="foofoo";
function showText(){
var msgNo="stat"+i;
msgNo=eval(msgNo);
var tgtLabel=document.getElementById("spnRandom");
tgtLabel.innerHTML=msgNo;
i=i+1;
if(i==4){
i=1;
}
}
window.onload=function(){
window.setInterval(showText,1000);
};
</script>
HTML
<table>
<tr>
<td style="width: 150px">
<a href="http://www.wissen.com">
<img alt="" class="style4" src="Wissen_logo.png" />
</a>
</td>
<td style="width: 1000px; background-color:Aqua">
<div>
<span id="spnRandom"></span>
</div>
</td>
</tr>
</table>
Here is a working Fiddle
If you want it for 15 second, just change the value from 1000 to 15000
Create UpdatePanel.
Create a Label inside UpdatePanel.
I'm developing an ASP.NET MVC 5 app with C# and .NET Framework 4.5.1.
I want to create a dynamic form to allow users insert more fields if they need more. And then, when they submit the form retrieve this data on Controller.
This is my view:
#model List<TRZF.Web.API.Models.ProductViewModel>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
<link href="~/css/createBatch.css" rel="stylesheet" />
<link href="~/css/createProduct.css" rel="stylesheet" />
<link href="~/css/formStyles.css" rel="stylesheet" />
<link href="~/css/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.2.min.js"></script>
<script src="~/js/createProducts.js"></script>
<title>Crear</title>
</head>
<body>
<!----start-header----------->
<div class="header_bg">
<div class="wrap">
<div class="header">
<!--------start-logo------>
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 1.1</span>
</div>
<!--------end-logo--------->
<!----start-nav-------->
<div class="nav">
</div>
<!-----end-nav-------->
<div class="clear"> </div>
</div>
</div>
</div>
<!------end-header------------>
<div class="slider_bg">
<div class="wrap">
<div class="da-slide" style="padding:0%">
#{
using (Html.BeginForm("Save", "MyProduct", FormMethod.Post, new { name = "eProductsFrm", id = "eProductsFrm" }))
{
<div>
<table class="productsList">
<thead>
<tr>
<td>
<h4>Producto</h4>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="group">
<input type="text"
class="productClass"
name="model[0].ProductName"
id="model[0].ProductName"
required />
#*<span class="highlight"></span>
<span class="bar"></span>
<label>Nombre del producto</label>*#
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
</td>
</tr>
</tfoot>
</table>
<table class="buttonsTable">
<tr>
<td style="text-align: left;">
<input type="button" id="addrow" value="Añadir producto" />
</td>
<td>
<input type="button" class="ibtnDel" value="Borrar último producto">
</td>
</tr>
</table>
</div>
<p><input type="button" id="btnSubmit" value="Crear producto(s)" /></p>
}
<div>
<p>#Html.ActionLink("Inicio", "Index", "Home")</p>
</div>
}
</div>
</div>
</div>
</body>
</html>
The problem is that when I do submit, on Controller's method I get a null.
This is the controller:
public class MyProductController : Controller
{
//
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Save(List<ProductViewModel> viewModel)
{
return null;
}
}
How can I do to get something on MyProductController.Save method when the user click on Submit button?
I guess you have a typo here.. it should be as below:
using (Html.BeginForm("Save", "MyProduct", FormMethod.Post, new { name = "eProductsFrm", id = "eProductsFrm" }))
{
// Your code
}
I have fixed this error with this html code:
<td>
<div class="group">
<input type="text"
class="productClass"
name="[0].ProductName"
id="[0].ProductName"
required />
#*<span class="highlight"></span>
<span class="bar"></span>
<label>Nombre del producto</label>*#
</div>
</td>
Now name and id are [0].ProductName.
More info here.
In order for MVC to bind your form data to the Action method's parameters
their names should match.
In your case:
...
name="model[0].ProductName"
Should be:
...
name="viewModel[0].ProductName"
Because this is the name of the parameter that you have provided:
public ActionResult Save(List<ProductViewModel> viewModel)
Also be careful because the indexes should not be broken, which means that they should be 0, 1, 2.. etc. without skipping a number.
The way that we read in the properties is by looking for
parameterName[index].PropertyName. The index must be zero-based and
unbroken.
You can read more in Scott Hanselman's post - here
You are not linking model properties with your Html input properly.
Wrong:
<input type="text" class="productClass" name="model[0].ProductName" id="model[0].ProductName" required />
Right:
<input type="text" class="productClass" name="#Model[0].ProductName" id="#Model[0].ProductName" required />
My problem is that, the submit button is not working. As you can see, my partial view contains a jquery modal. If you click "mdlist" the modal will and appear with the submit button.
Can you please tell me whats the possible problem.
#model IEnumerable<MyApp.Models.Participant>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<a id="mdlist" class="button" href="#"><span class="new icon"></span>Add Participant</a>
<div id="dialog" class="content-wrapper">
<div class="buttons">
<input type="submit" name="submitButton" value="Save" class="button save icon" />
</div>
<table cellspacing="0">
<thead>
<tr>
<th>
</th>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
</tr>
</thead>
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
<input type="checkbox" name="ParticipantCheck" id="#item.ID" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
</tbody>
}
</table>
</div>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
height: 400,
width: 670,
modal: true,
closeOnEscape: true,
resizeable: false
});
</script>
First of all you need to add Form (submit button works only if there was a form) by
#using(#Html.BeginForm()){
//place your html elements and submit button here
}
Next if you have an array the way you are adding checkboxes is incorrect take a look at this link