How to save a single record with knockout - c#

I have a basic table set up using knockout, but I was wondering if there is any way to edit/save a single record, rather than having to save the entire view model every time a change is made? Here's my code...
<tbody data-bind="foreach: movies">
<tr>
<td data-bind="text: title"></td>
<td data-bind="text: releaseDate"></td>
<td data-bind="text: genre"></td>
<td data-bind="text: price"></td>
<td><input type="button" value="Edit" id="edit"/></td>
</tr>
<tr class="editable"> <!-- hide this initially, only show when edit button is clicked -->
<td><input id="titleInput" data-bind="value: title" /></td>
<td><input id="releaseDateInput" data-bind="value: releaseDate" /></td>
<td><input id="genreInput" data-bind="value: genre" /></td>
<td><input id="priceInput" data-bind="value: price" /></td>
</tr>
<!-- save button/form or something here containing ONLY this record -->
</tbody>
</table>
<script type="text/javascript">
function Film(data) {
this.title = ko.observable(data.Title);
this.releaseDate = ko.observable(data.ReleaseDate);
this.genre = ko.observable(data.Genre);
this.price = ko.observable(data.Price);
}
function MovieListViewModel() {
var self = this;
self.movies = ko.observableArray([]);
self.title = ko.observable();
self.releaseDate = ko.observable();
self.genre = ko.observable();
self.price = ko.observable();
$.getJSON("/Movies/GetAllMovies", function (allMovies) {
var mappedMovies = $.map(allMovies, function (movie) { return new Film(movie) });
self.movies(mappedMovies);
});
}
ko.applyBindings(new MovieListViewModel());
Any thoughts? Thanks!


Actually, through the magic of binding contexts, this is quite easy!
Step one. Place the following element anywhere inside your foreach template.
<button data-bind="click: $root.saveMovie">Save</button>
Step two. Add the saveMovie method to your viewModel
self.saveMovie = function(movie) {
$.ajax({
type: "POST",
url: "/someurl",
dataType: "json",
contentType: "application/json",
data: ko.toJSON(movie),
success: function(result) {
//...
}
});
}
The movie variable will contain the item of your foreach loop! Why? Because in Knockout, we have the amazing feature called binding contexts:
A binding context is an object that holds data that you can reference
from your bindings. While applying bindings, Knockout automatically
creates and manages a hierarchy of binding contexts. The root level of
the hierarchy refers to the viewModel parameter you supplied to
ko.applyBindings(viewModel). Then, each time you use a control flow
binding such as with or foreach, that creates a child binding context
that refers to the nested view model data.
http://knockoutjs.com/documentation/binding-context.html

Related

Why is my REST method not being called by this jQuery?

I have a similar question about jQuery button click handler code not being fired at all here.
In this case, it is being fired (when the jQuery is added to a static page (Index.cshtml)), but my REST method is still not being reached. The console message explaining why is:
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /LandingPage/GetQuadrantData
Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.6.1055.0
This is the jQuery, which indeed gets fired when the button is clicked, but the REST call is not being made:
<script>
$(function () {
var btnGetData = document.getElementById('btnGetData');
btnGetData.addEventListener("click", function () {
alert("It works");
var unitval = 'ABUELOS';
var begdateval = '2016-08-07';
var enddateval = '2016-08-13';
$.ajax({
type: 'GET',
url: '#Url.Action("GetQuadrantData", "LandingPage")',
data: { unit: unitval, begdate: begdateval, enddate: enddateval },
contentType: 'application/json',
cache: false,
success: function (returneddata) {
},
error: function () {
alert('hey, boo-boo!');
}
});
});
});
</script>
The REST method is set up like so, in LandingPageController.cs:
[Route("{unit}/{begdate}/{enddate}")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
_unit = unit;
_beginDate = begdate;
_endDate = enddate;
. . .
I have a breakpoint on the "_unit = unit;" line, but it is not being reached; why not? What am I missing here?
The REST controller class under discussion begins like so:
[RoutePrefix("api")]
public class LandingPageController : ApiController
Note: If I use this in the jQuery ("Controller" appended):
url: '#Url.Action("GetQuadrantData", "LandingPageController")'
...both "GetQuadrantData" and "LandingPageController" are red in the IDE (Visual Studio) editor - the letters are red.
OTOH, if I use this (sans "Controller" appended):
url: '#Url.Action("GetQuadrantData", "LandingPage")'
(which has worked for me in the past, leaving the "Controller" off the Controller name), both "GetQuadrantData" and "LandingPage" are UNDERLINED in red, but the font remains the normal color.
UPDATE
Using Nico's link in his comment below, I changed the jQuery "url" line to this:
url: '#Url.Action("GetQuadrantData", "LandingPage", new { httproute = "" })',
...but it still didn't cause the Controller method to be reached.
UPDATE 2
Stepping through the javascript in the (Chrome) browser, I see that the "url" line has been dynamically changed from what it is at design time:
url: '#Url.Action("GetQuadrantData", "LandingPage", new { httproute = "" })',
...to:
url: '/api/LandingPage?action=GetQuadrantData',
I reckon what it should really have been resolved to is more like:
url: '/api/ABUELOS/2016-08-14/2016-08-20',
Am I right? Why isn't it being resolved like so?
If I manually enter that URL in the browser, so that the URL bar reads "http://localhost:52194/api/ABUELOS/2016-08-21/2016-08-27" it works - the method is reached and it "does its thing."
UPDATE 3
I tried this, too:
$(function () {
$("#btnGetData").click(function () {
document.body.style.cursor = 'wait';
$.ajax({
type: "GET",
url: '#Url.Action("GetQuadrantData", "LandingPage")',
success: function (retval) {
$("body").append($(retval));
document.body.style.cursor = 'pointer';
},
error: function () {
alert('error in btnGetData');
}
}); // end AJAX
}); // end click
}); // end ready function
...but only saw "error in btnGetData"
UPDATE 4
My most recent failure is this:
$("#btnGetData").click(function () {
document.body.style.cursor = 'wait';
var unitval = $('#unitName').val();
var begdateval = $('#datepickerFrom').val();
var enddateval = $('#datepickerTo').val();
$.ajax({
type: 'GET',
url: '#Url.Action("GetQuadrantData", "LandingPage")',
data: { unit: unitval, begdate: begdateval, enddate: enddateval },
cache: false,
success: function (returneddata) {
alert($(returneddata));
},
error: function () {
alert('error in ajax');
}
});
});
Again, I see only "error in ajax"
UPDATE 5
Note: The maximum bounty (200 points, I think it is) will be awarded to whoever can solve this dilemma. If more than one person does, then the bounty goes to whoever solves it best (which basically to me means in the most straightforward and easy-to-implement manner.
In the interest of full disclosure and desperation, here is the entire contents (with boring/meaningless parts elided with ellipsis dots) of the first page that displays when the WEB API app runs (from \Views\Home\Index.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eServices Reporting - Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
padding-top: 20px;
padding-bottom: 20px;
background-color: white;
}
. . .
</style>
<script>
$(function () {
$("#btnGetData").click(function () {
document.body.style.cursor = 'wait';
var unitval = "ABUELOS"; //$('#unitName').val();
var begdateval = $('#datepickerFrom').val();
var enddateval = $('#datepickerTo').val();
$.ajax({
type: 'GET',
url: '#Url.Action("GetQuadrantData", "LandingPage")',
data: { unit: unitval, begdate: begdateval, enddate: enddateval },
cache: false,
success: function (returneddata) {
alert($(returneddata));
},
error: function () {
alert('error in ajax');
}
});
});
}); // end ready function
</script>
</head>
<body>
<div class="container body-content">
<div class="jumbotronjr">
<div class="col-md-3" style="margin-top: 0.6cm">
<img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" height="86" width="133" alt="PRO*ACT usa logo">
</div>
<div class="col-md-9">
<label class="titletext" style="margin-top: 0.2cm;">Customer Dashboard</label>
<br />
<label class="titletextjr" style="margin-top: -2.2cm;" id="unitName">Craftworks</label>
<label class="cccsfont"> for the week of August 14 </label>
<input class="smalldatepicker" type="date" id="datepickerFrom" name="daterangefrom" value="2016-08-14">
</input>
<label class="cccsfont"> to </label>
<input type="date" class="smalldatepicker" id="datepickerTo" name="daterangeto" value="2016-08-20">
</input>
<button class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items Purchased</h2>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th class="rightjustifytext">Qty</th>
</tr>
<tr>
<td>101200</td>
<td>ASPARAGUS, STANDARD 11/1#</td>
<td class="rightjustifytext">32</td>
</tr>
<tr>
<td>140200</td>
<td>MUSHROOMS, MEDIUM 10#</td>
<td class="rightjustifytext">20</td>
</tr>
<tr>
<td>140000</td>
<td>MUSHROOMS, BUTTON 10#</td>
<td class="rightjustifytext">14</td>
</tr>
<tr>
<td>127100</td>
<td>LETTUCE, ROMAINE 24 CT </td>
<td class="rightjustifytext">14</td>
</tr>
<tr>
<td>300123</td>
<td>BEANS, GREEN TRIM 2/5# (BAGS)</td>
<td class="rightjustifytext">13</td>
</tr>
<tr>
<td>173100</td>
<td>POTATOES, 50 CT IDAHO</td>
<td class="rightjustifytext">12</td>
</tr>
<tr>
<td>234225</td>
<td>BERRIES, STRAWBERRY 1# CLAM</td>
<td class="rightjustifytext">11</td>
</tr>
<tr>
<td>188500</td>
<td>TOMATOES, GRAPE 12/1 PT</td>
<td class="rightjustifytext">10</td>
</tr>
<tr>
<td>122500</td>
<td>LETTUCE, ICEBERG LINER 24 CT</td>
<td class="rightjustifytext">10</td>
</tr>
<tr>
<td>121050</td>
<td>LETTUCE, GREEN LEAF 24 CT</td>
<td class="rightjustifytext">10</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6">
<div class="topright">
<h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2>
<label class="redfont cccs">Red denotes Contract Item Overages</label>
</br>
<label class="cccs">For Weyand on the pricing week of - 7/31/2016</label>
<table>
<tr>
<th>PRO*ACT Member</th>
<th class="rightjustifytext">Total Occurrences of Summary Items</th>
<th class="rightjustifytext">Total Summary Exceptions</th>
<th class="rightjustifytext">Total Percentage of Summary Exceptions</th>
</tr>
<tr>
<td style="width:30%">Stern</td>
<td style="width:23%" class="rightjustifytext">205</td>
<td style="width:23%" class="rightjustifytext">2</td>
<td style="width:24%" class="rightjustifytext">99.02%</td>
</tr>
<tr>
<td>Hardies Dallas</td>
<td class="rightjustifytext">1,597</td>
<td class="rightjustifytext">0</td>
<td class="rightjustifytext">100.00%</td>
</tr>
<tr>
<td>Hardies South</td>
<td class="rightjustifytext">612</td>
<td class="rightjustifytext">1</td>
<td class="rightjustifytext">99.84%</td>
</tr>
<tr>
<td>Go Fresh</td>
<td class="rightjustifytext">482</td>
<td class="rightjustifytext">0</td>
<td class="rightjustifytext">100.00%</td>
</tr>
<tr>
<td>Segovias</td>
<td class="rightjustifytext">1,360</td>
<td class="rightjustifytext">2</td>
<td class="rightjustifytext">99.85%</td>
</tr>
<tr>
<td>Potato Spec</td>
<td class="rightjustifytext">1,605</td>
<td class="rightjustifytext">0</td>
<td class="rightjustifytext">100.00%</td>
</tr>
<tr>
<td class="rightjustifytext bold">TOTAL</td>
<td class="rightjustifytext bold">5,861</td>
<td class="rightjustifytext bold">5</td>
<td class="rightjustifytext bold">99.79%</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="bottomleft">
<h2 class="sectiontext">Forecasted Spend - $9,814.81</h2>
<table>
<tr>
<th>Item Code</th>
<th class="rightjustifytext">Last Week's Usage</th>
<th class="rightjustifytext">This Week's Price</th>
<th class="rightjustifytext">Forecasted Spend</th>
</tr>
<tr>
<td>261650</td>
<td class="rightjustifytext">49</td>
<td class="rightjustifytext">3.14</td>
<td class="rightjustifytext">153.86</td>
</tr>
<tr>
<td>231083</td>
<td class="rightjustifytext">52</td>
<td class="rightjustifytext">1.25</td>
<td class="rightjustifytext">65.00</td>
</tr>
<tr>
<td>398980</td>
<td class="rightjustifytext">46</td>
<td class="rightjustifytext">4.95</td>
<td class="rightjustifytext">227.70</td>
</tr>
<tr>
<td>351135</td>
<td class="rightjustifytext">40</td>
<td class="rightjustifytext">0.75</td>
<td class="rightjustifytext">30.00</td>
</tr>
<tr>
<td>398036</td>
<td class="rightjustifytext">42</td>
<td class="rightjustifytext">3.00</td>
<td class="rightjustifytext">126.00</td>
</tr>
<tr>
<td>208110</td>
<td class="rightjustifytext">42</td>
<td class="rightjustifytext">2.50</td>
<td class="rightjustifytext">105.00</td>
</tr>
<tr>
<td>102800</td>
<td class="rightjustifytext">1835</td>
<td class="rightjustifytext">2.25</td>
<td class="rightjustifytext">4,128.75</td>
</tr>
<tr>
<td>367050</td>
<td class="rightjustifytext">1910</td>
<td class="rightjustifytext">1.95</td>
<td class="rightjustifytext">3,724.50</td>
</tr>
<tr>
<td>173100</td>
<td class="rightjustifytext">66</td>
<td class="rightjustifytext">19.00</td>
<td class="rightjustifytext">1,254.00</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td class="bold rightjustifytext">4082</td>
<td class="bold rightjustifytext">--</td>
<td class="bold rightjustifytext">$9,814.81</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6">
<div class="bottomright">
<h2 class="sectiontext">Delivery Performance</h2>
<table>
<tr>
<th>PRO*ACT Distributor</th>
<th>Restaurant Location</th>
<th class="rightjustifytext">Avg Order Amount</th>
<th class="rightjustifytext">Avg Package Count</th>
<th class="rightjustifytext">Total Sales</th>
</tr>
<tr>
<td>Sunrise FL</td>
<td>A1A ALEWORKS - #4405 - ST. AUGUSTINE</td>
<td class="rightjustifytext">$475.78</td>
<td class="rightjustifytext">28.50</td>
<td class="rightjustifytext">$1,903.10</td>
</tr>
<tr>
<td>Sunrise FL</td>
<td>RAGTIME TAVERN - #4404 - ATLANTIC BEACH</td>
<td class="rightjustifytext">$221.46</td>
<td class="rightjustifytext">17.50</td>
<td class="rightjustifytext">$885.82</td>
</tr>
<tr>
<td>Sunrise FL</td>
<td>SEVEN BRIDGES - #4403 - JACKSONVILLE</td>
<td class="rightjustifytext">$367.49</td>
<td class="rightjustifytext">22.67</td>
<td class="rightjustifytext">$1,102.47</td>
</tr>
<tr>
<td>T&T</td>
<td>BIG RIVER - #4201 - CHATTANOOGA</td>
<td class="rightjustifytext">$396.06</td>
<td class="rightjustifytext">22.83</td>
<td class="rightjustifytext">$2,376.34</td>
</tr>
<tr>
<td>T&T</td>
<td>BIG RIVER - #4205 - HAMILTON PL</td>
<td class="rightjustifytext">$424.74</td>
<td class="rightjustifytext">26.00</td>
<td class="rightjustifytext">$1,698.95</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td></td>
<td class="bold rightjustifytext">3,770.42</td>
<td class="bold rightjustifytext">23.50</td>
<td class="bold rightjustifytext">$1,592.60</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
UPDATE 6
I know there's more to Arturo's answer than this, but so far just adding this:
config.Routes.MapHttpRoute(
name: "QuadrantData",
routeTemplate: "api/{unit}/{begdate}/{enddate}"
);
...has helped, as the breakpoint in my method is being reached. Unfortunately, it squawks "SyntaxError: Unexpected token < in JSON at position 0"

Personally not a big fan of using #Url.Action in javascript code; this is how I make ajax calls:
Create a hidden field in layout page to store the root url - <input type="hidden" id="hdnRoot" value="#Url.Content("~/")" />
Have a constants json file to keep my client side constants (constants.js) - assigns the hidden field value to serviceRoot variable:
(function () {
window.constants = {
serviceRoot: $("#hdnRoot").val() + "api/",
objectState: {
added: "Added",
modified: "Modified",
unchanged: "Unchanged",
deleted: "Deleted"
},
..other values...
};
})();
Will modify your ajax call as:
var root = window.constants.serviceRoot;
$.ajax({
type: 'GET',
url: root + 'LandingPage/GetQuadrantData/'+unitval+'/'+begdateval+'/'+enddateval,
// data: { unit: unitval, begdate: begdateval, enddate: enddateval },
contentType: 'application/json',
cache: false,
success: function (returneddata) {
},
error: function () {
alert('hey, boo-boo!');
}
});
[RoutePrefix("api")]
public class LandingPageController : ApiController {
[HttpGet]
[Route("GetQuadrantData/{unit}/{begdate}/{enddate}", Name="GetQuadrantDataFromLandingPage")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)

Ok, this solution solves your problem but imply some changes in your code:
In the view, when you call Url.Action, you're trying to generate a webapi route from a mvc controller. You can see this question where I say how to do this.
Basically the idea is using Url.RouteUrl with an extra route value httproute = true.
Now, you need to change some parts in your code to be able to use this:
Firstly, you are using attributes to define your web api routes, therefore this routes will be added after the routes defined in your WebApiConfig class, and as I mencioned in the answer of the referenced question, Url.RouteUrl will return the first route that match the route values. So, you need to declare the route in WebApiConfig before the default route:
/* attributes removed */
public class LandingPageController : ApiController
{
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
...
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.MapHttpAttributeRoutes();
/* Route added before the default one */
config.Routes.MapHttpRoute(
name: "QuadrantData",
routeTemplate: "api/{unit}/{begdate}/{enddate}"
);
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
If you don't do this, the default route will be matched since {id} is optional and unit, begdate and enddate will be passed as query params.
Once fixed this issue, you have another problem, to be able to use Url.RouteUrl you need to know all the route values (unit, begdate, enddate), that are availables only when the script function is executed. But all razor code in your .cshtml is processed in the server when the html is generated for the client.
As you can see, when the javascript is executed you are not executing '#Url.RouteUrl...' or '#Url.Action...', at this time you are just handling a string with value returned when the razor expression was processed.
One thing you can do is pass "template" values to the Url.RouteUrl call, and replace it when the script is executed with the real values:
var url = '#Url.RouteUrl(new
{
unit = "(unit)",
begdate = "(begdate)",
enddate = "(enddate)",
httproute = true
})'
url = url.replace("(unit)", unitval)
.replace("(begdate)", begdateval)
.replace("(enddate)", enddateval)
$.ajax({
type: 'GET',
url: url,
contentType: 'application/json',
cache: false,
success: function (returneddata) {
},
error: function () {
alert('hey, boo-boo!');
}
});
After the replaces the value of the variable url will be like this /api/ABUELOS/2016-08-07/2016-08-13.
If you don't want to move the routes to WebApiConfig, you can set a name in RouteAttribute:
[RoutePrefix("api")]
public class LandingPageController : ApiController
{
[Route("{unit}/{begdate}/{enddate}", Name = "QuadrantData")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
...
And specify the route name in Url.RouteUrl call:
var url = '#Url.RouteUrl("QuadrantData", new
{
unit = "(unit)",
begdate = "(begdate)",
enddate = "(enddate)",
httproute = true
})'
This way is less intrusive in your code, but you need to know the name of the route you want to use.
Hope this helps.

You have a few issues with how you are generating the route and how you are trying to access it.
You Web API action is using attribute routing so by default there is no route name to match like in the convention-based routing.
Update the route attribute to include a name to find in the route table.
[RoutePrefix("api")]
public class LandingPageController : ApiController {
[HttpGet]
[Route("{unit}/{begdate}/{enddate}", Name="QuadrantData")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate) {
_unit = unit;
_beginDate = begdate;
_endDate = enddate;
//...other code
}
//...other code
}
Next even though you have the name you also need to include the template parameters in order to get a match from MVC and have it generate the url in the template you defined on the action.
To generate link to Web API, it would look like this
#Url.RouteUrl(routeName : "QuadrantData", routeValues : new { httpRoute = true , unit = "ABUELOS", begdate = "2016-08-07", enddate = "2016-08-13" })
or
#Url.HttpRouteUrl(routeName : "QuadrantData", routeValues : new { unit = "ABUELOS", begdate = "2016-08-07", enddate = "2016-08-13" })
which would add the httpRoute to the route values.
Reference: Construct url in view for Web Api with attribute routing
Now with your approach out of the way, I would suggest the following alternative approach.
KISS principle. Change Web API (REST) endpoint to POST and change its template.
[RoutePrefix("api")]
public class LandingPageController : ApiController {
//eg POST api/QuadrantData
[HttpPost]
[Route("QuadrantData", Name="GenerateQuadrantData")]
public HttpResponseMessage QuadrantData(string unit, string begdate, string enddate) {
_unit = unit;
_beginDate = begdate;
_endDate = enddate;
//...other code
}
//...other code
}
and send the data in the body of a JSON POST request
$(function () {
$("#btnGetData").click(function () {
document.body.style.cursor = 'wait';
var unitval = "ABUELOS"; //$('#unitName').val();
var begdateval = $('#datepickerFrom').val();
var enddateval = $('#datepickerTo').val();
var jsonBody = JSON.stringify({ unit: unitval, begdate: begdateval, enddate: enddateval });
$.ajax({
type: 'POST',
url: '#Url.HttpRouteUrl("GenerateQuadrantData", null)',
contentType: 'application/json',
dataType: 'json',
data: jsonBody,
cache: false,
success: function (returneddata) {
alert($(returneddata));
},
error: function () {
alert('error in ajax');
}
});
});
}); // end ready function

Regarding your point:
If I manually enter that URL in the browser, so that the URL bar reads
"http://localhost:52194/api/ABUELOS/2016-08-21/2016-08-27" it works -
the method is reached and it "does its thing."
Modifying your Ajax call like shown below should solve your problem and will send a GET request to the mapped url (Showing with button click event handler):
$("#btnGetData").click(function () {
var unitval = 'ABUELOS';
var begdateval = '2016-08-21';
var enddateval = '2016-08-27';
$.getJSON("api/" + unitval + "/" + begdateval + "/" + enddateval,
function (Data) {
// do what ever you want with the success response
})
.fail(
function (jqXHR, textStatus, err) {
// do what ever you want with the failed response
});
});

You're only giving your jQuery the controller and action names when it needs the full url to complete the request. Also, your end point has an 'api' prefix. You need your url property to be something like http://localhost:{port}/api/{controller}/{action} if your server is running locally.

Angular JS, multiple insert error

I want to fetch data from SQL and display in HTML table using ng-repeat option then I need to edit some values in the table cell. My problem is that I only get initial values in the controller and the changes are not reflected in the controller. Here is my code:
app.controller('CRUD_EntryController', function ($scope, CRUD_InternalEntryService) {
GetStudentMarkDetails();
function GetStudentMarkDetails() {
var PromiseGetMarks = CRUD_InternalEntryService.GetMarkDetails();
PromiseGetMarks.then(function (res) {
$scope.MarkList = res.data;
})
}
$scope.mark = {};
$scope.save = function (MarkList) {
var index = 0;
$scope.MarkList.forEach(function (mark) {
console.log('rows #' + (index++) + ': ' + JSON.stringify(mark));
alert(mark.M1);
}
}
View:
<table class=" table table-condensed" id="myresul">
<tr>
<th>Slno</th>
<th>Name</th>
<th>RegNo</th>
<th>ClassNo</th>
<th>M1</th>
<th>M2</th>
<th>M3</th>
</tr>
<tbody data-ng-repeat="mark in MarkList" >
<tr>
<td class="col-md-1" >#{{$index+1}}</td>
<td class="col-md-2" ng-model="mark.Fname">{{mark.Fname}}</td>
<td class="col-md-2">{{mark.RegNo}}</td>
<td class="col-md-1">{{mark.ClassNo}}</td>
<td class="col-md-1"><input type="number" value="{{mark.M1}}" ng-model="M1" class="form-control" /></td>
<td class="col-md-1"><input type="number" value="{{mark.M2}}" ng-model="M2" class="form-control" /></td>
<td class="col-md-1"><input type="number" value="{{mark.M3}}" ng-model="M3" class="form-control" /></td>
</tr>
<button data-ng-click="save(MarkList)" class="btn btn-success">Save</button>
</tbody>
</table>

Don't think you need to define this: $scope.mark = {}; since mark is set in the scope of your ng-repeat. Remove it because this is somewhat confusing and might cause errors in the future.
Remove the value="{{mark.M1}}" and bind your model to ng-model="{{mark.M1}}". Asuming that you wand to bind to M1, M2 and M3 in your inputs.
Also see the angular docs for ngModel for more details and update your code accordingly.
By the way you don't have to pass MarkList as an argument for Save(..), you can do this:
<button data-ng-click="save()" class="btn btn-success">Save</button>, change the Save method signature to Save() and use $scope.MarkList instead of the argument MarkList.
Or change your method to only save the specific mark instead of the entire list every time.

How to reconcile a dynamic KO mapping with manual?

I frequently have a situation where I want to have a C# ViewModel mapped to a knockout viewModel in a view.
This means I'll usually do something like:
<script>
var viewModel = ko.mapping.fromJS(#Html.Raw(Json.Encode(Model));
</script>
And this gets the C# ViewModel into my viewModel just fine. But I often want to allow the user to interact with the viewModel in meaningful ways, so say my model is a List<User> and User has properties Name and Age. My view might look like:
<table class="table">
<tbody data-bind="foreach: viewModel">
<tr>
<td><input type="text" data-bind="value: Name" /></td>
<td><input type="text" data-bind="value: Age" /></td>
<td><span class="glyphicon glyphicon-remove" data-bind="click: Remove"></span></td>
</tr>
</tbody>
</table>
<button type="button" data-bind="click: AddUser">Add User</button>
Now I've got a button to remove each User in each row, but in order to give that functionality, I'll need to add a Remove method to each User in the List. This is where my uncertainty begins. What I have been doing is basically:
<script>
var vm = ko.mapping.fromJS(#Html.Raw(Json.Encode(Model));
var viewModel = function (vm) {
var self = {};
self.Users = vm;
ko.utils.arrayForEach(self.Users(), function(item) {
item.Remove = function()
{
self.Users.remove(this);
}
});
self.AddUser = function() {
self.Users.push({
Name: "",
Age: ""
});
}
}
</script>
Although this works (I freehanded this, so there may be some errors), it seems overly verbose and clunky to have to iterate through my mapped viewmodel to add needed functions and so on. Is there a cleaner way to do this, or am I just being finicky?

I would go another way with this one and put the remove() function in your viewmodel:
var viewModel = function (vm) {
var self = {};
self.Users = vm;
self.remove = function(item) {
self.Users.remove(item);
};
self.AddUser = function() {
self.Users.push({
Name: "",
Age: ""
});
}
}
and then call it in your view like this:
<td><span class="glyphicon glyphicon-remove" data-bind="click: $parent.remove"></span></td>

Mixing javascript and C#

I have #model IEnumerable<HotelWithRating> - some hotels.
At the view I have 5 checkboxes - stars of the hotel.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td><input type = 'checkbox' value="false" id= '1' onclick = ' ShowHotels();'/></td>
<td><input type = 'checkbox' value="false" id= '2' onclick = ' ShowHotels();'/></td>
<td><input type = 'checkbox' value="false" id= '3' onclick = ' ShowHotels();'/></td>
<td><input type = 'checkbox' value="false" id= '4' onclick = ' ShowHotels();'/></td>
<td><input type = 'checkbox' value="false" id= '5' onclick = ' ShowHotels();'/></td>
</tr>
</table>
I need that hotels to be displayed which has for example 5 or 4 stars (if forth and fifth checkboxes are checked).
It should be something like this
<table class="Grid">
<tr>
<th>Name</th>
<th>Stars</th>
<th>Rating</th>
<th>Description</th>
</tr>
<script type="text/javascript">
function ShowHotels()
{
#foreach (var item in Model)
{
<text>
if (document.getElementById(item.Hotel.stars).checked == true)
{
<tr>
<td>#item.Hotel.Name</td>
<td>#item.Hotel.Stars</td>
<td>#item.Rating</td>
<td>#item.Hotel.Description</td>
</tr>
}
</text>
}
}
</script>
</table>
I have found many topics about mixing javascript with code but still haven't an decision.

Better first you filter the model based on the check box selection. It can be done on client side by comparing the property of each hotel in model. Otherwise you can do server side filtering too, using AJAX (sending the info of selected check box and then server will send you filtered model). Server side filtering is better is you have huge list of hotels to be look into.
Then assign this filtered model to the Grid or generate the table using for loop for every element in filtered model using JavaScript.
Feel free to ask any further question if you get. Thanks.

How to Get All HtmlInputText Controls Within a Table Row?

I'm trying to create a web page to create small playlists. Once data has been entered into the fields, it needs to be saved to an XML file. Currently the table looks like this:
<%-- song list table --%>
<table runat="server" id="table" class="table">
<%-- info row --%>
<thead>
<tr>
<td>Song Title</td>
<td>Song Artist</td>
<td>Song Album</td>
<td><%-- column for delete button --%></td>
</tr>
</thead>
<%-- input rows --%>
<tbody>
<tr>
<td><input runat="server" placeholder="Title" type="text" /></td>
<td><input runat="server" placeholder="Artist" type="text" /></td>
<td><input runat="server" placeholder="Album" type="text" /></td>
<td>
<a href="#">
<img src="Images/Delete.png" onmouseover="this.src='Images/Delete-Hover.png'" onmouseout="this.src='Images/Delete.png'" alt="Delete" />
</a>
</td>
</tr>
</tbody>
</table>
New rows will be added dynamically with jQuery. When the user clicks save, I need to write the table data into their specific XML file. Currently my backend code looks like this:
//for each row
foreach (HtmlTableRow row in table.Rows)
{
//create row info
textWriter.WriteStartElement("Row");
//for each cell
foreach (HtmlTableCell element in row.Cells)
{
//get inputs
//write current input to xml
}
//close row
textWriter.WriteEndElement();
}
My question is where I go from there with my code to be able to get the values of each input and write them to the XML.

You need to give the element's an ID so you can refer to them by. Also, any dynamically added rows will not be able to be accessed this way; that is because they do not exist in the control tree as a server control, but are a pure client control. You would have to access these using Request.Form collection. You'd have to add them dynamically to the control tree if you want them to persist across postbacks too.
If you are using JQuery, it would be more efficient and easier to grab all the values on the client and send the values to a web service or something like that.

My suggestion would be to re-think how you're gathering the data. I assume that you're going to have this information do an HTTP POST to your server using $.ajax() or something similar - and on the server-side, you're wanting to get all of the instances of the Title, Artist and Album fields, grouped by row.
Instead of posting back the table, which is a set of UI elements that display your data, but do not represent it, consider posting back to the server and having the server expect an IEnumerable of Song objects, which would look something like this:
public class Song {
public String Album { get; set; }
public String Artist { get; set; }
public String Title { get; set; }
}
Now, when you bind the form itself, you can bind something like:
<table>
<thead>
<tr>
<td>Song Title</td>
<td>Song Artist</td>
<td>Song Album</td>
<td><%-- column for delete button --%></td>
</tr>
</thead>
<tbody>
<tr>
<td><input placeholder="Title" type="text" name="Songs[0].Title" /></td>
<td><input placeholder="Title" type="text" name="Songs[0].Artist" /></td>
<td><input placeholder="Title" type="text" name="Songs[0].Album" /></td>
</tr>
</tbody>
</table>
The [0] notation indicates that this element is part of an IEnumerable called Songs, and is at index 0. When your jQuery script then goes and adds new rows, you simply increment the indexes. So - a new row would be something like:
<tr>
<td><input placeholder="Title" type="text" name="Songs[1].Title" /></td>
<td><input placeholder="Title" type="text" name="Songs[1].Artist" /></td>
<td><input placeholder="Title" type="text" name="Songs[1].Album" /></td>
</tr>
The only trick to this is to ensure that you never have gaps in your indexes. I.E. - if you have 5 rows, and you delete the third, you need to re-index rows 4 and 5 (by decrementing the [#] values).
Note: All of the above assumes you are using server-side binding.
If you are already using jQuery, you might also find it simpler to simply parse your table's input elements with jQuery and post things as an object that you have direct control over. This prevents you from having to do any indexing at all. An example would be something like:
$('#submit-button').on('click', function (ev) {
var songs = [];
$('#table > tbody > tr').each(function (index, element) {
var $tr = $(element);
var album = $tr.find('input[placeholder=Album]').val();
var artist = $tr.find('input[placeholder=Artist]').val();
var title = $tr.find('input[placeholder=title]').val();
songs.push({ Album: album, Artist: artist, Title: title });
});
$.ajax({
url: '/my/post/url',
type: 'POST',
data: songs
});
});
On the server-side, you will now receive an HTTP POST to /my/post/url which has a payload containing the song data in the table - without having to worry about funky data-binding syntax or indexing.
Hope this helps.

Categories