I developed MVC 4 Single Page Application using ADO.Net as a data source. Trying to filter the view by ID, tried session variables without any luck. Here is the view code:
<script type="text/javascript" src="#Url.Content("~/Scripts/BloodPressuresViewModel.js")"></script>
<script type="text/javascript">
$(function () {
upshot.metadata(#(Html.Metadata<KOTest2.Controllers.DALController>()));
var viewModel = new MyApp.BloodPressuresViewModel({
serviceUrl: "#Url.Content("~/api/DAL")"
});
ko.applyBindings(viewModel);
});
</script>
and hee is the calss code in the Javascript file:
.....
var entityType = "BloodPressure:#KOTest2.Models";
MyApp.BloodPressure = function (data) {
var self = this;
// Underlying data
self.ID = ko.observable(data.ID);
self.PHN = ko.observable(data.PHN);
self.Day = ko.observable(data.Day);
self.Systolic = ko.observable(data.Systolic);
self.Diastolic = ko.observable(data.Diastolic);
self.HeartRate = ko.observable(data.HeartRate);
upshot.addEntityProperties(self, entityType);
}
.....
I think the best solution is to pass the ID using ViewBag to the view from the controller. Any idea how I can do that!!
Since I am not experienced programmer, will it be possible to filter (foreach)
<tbody data-bind="foreach: bloodPressures">
Thanks in advance.
I am not sure I understand how you access the database (on the server, right?) to do the filtering, but you could do something like this:
<table data-bind="foreach: rows">
<tr>
<td>id: <span data-bind="text: ID"></span></td>
<td>PHN: <span data-bind="text: PHN"></span></td>
....
</tr>
</table>
and in your javascript
function viewModel() {
var self = this;
this.loggedIn = ko.observable(false);
this.rows = ko.observableArray([]);
// return an array of objects to display to the user
function getDataFromServer() {
return ...;
}
ko.computed(function() {
if (this.loggedIn())
this.rows(getDataFromServer());
},this);
...
}
However you do your authentication, after it succeeds, execute this.loggedIn(true) which will cause the computed function to trigger the pull from the server and the setting of the this.rows(); this in turn will update the display.
Related
I have a parameter in my mvc view as
#{
var myparam = false;
}
I have my button in the same view as:
<input type="button" id="myButton" value="Click" class="btn btn-primary"
data-bind='enable: selectvalue() != ""' />
in the data-bind of my button I also want to check for myparam. Something like below:
data-bind='enable: filterCategory() != "" && !myparam'
How can I do that?
Thanks
Updated as below:
If my param is like below:
#{
var myparam = false;
}
And my JS:
<script>
var myData= #Html.Raw(Json.Serialize(Model));
myData.myParameter= "#myparam ";
</script>
My Knockout:
(function () {
var viewModel = function (data) {
var viemod= this;
viemod.myParam= vmData.myParam
}
}
If I use this myData in my knockout js as above it returns me "False" (string)
whereas it should be false (boolean)
That won't work because Razor runs server side. myparam is a C# local variable. So, you can't use it with knockout bindings which run client-side.
You can either create a javascript variable and assign the value like this:
<script>
var myparam = #Json.Encode(myparam);
</script>
or
If you don't want to pollute the global scope, add a myparam property to your viewModel.
var yourViewModel = function() {
var self = this;
self.myparam = #Json.Encode(myparam);
self.filterCategory = ko.observable('');
}
After update:
As mentioned before, it should be
myData.myparam = #Json.Encode(myparam);
But since you're going to .Serialize() the entire model, you can assign the myparam to a property in the controller itself.
here i got a sample code which said KnockoutJS Mapping plugin automatically bind UI.
here is code
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script type="text/javascript">
$(function() {
var viewModel = ko.mapping.fromJS(#Html.Raw(Model.ToJson()));
ko.applyBindings(viewModel);
});
</script>
suppose my html binding as follows
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
and my server side model return json like
{fname:Josh;lname:Steve};
so here my question is how KnockoutJS Mapping plugin could understand that fname value need to map to databinding firstName & lname need to map to databinding lastName ?
am i clear what i am trying to say. so guide me in this case how one could bind json to html UI through KnockoutJS Mapping plugin.
in this situation KnockoutJS Mapping plugin would be right choice or not ?
do i need to bind manually by viewmode like
First name:
Last name:
json as follows var person = {fname:Josh;lname:Steve};
var viewModel = function(person) {
this.firstname= ko.observable(person.fname);
this.lastname= ko.observable(person.lname);
};
ko.applyBindings(new viewModel(person));
As requested in the comment I put this as a possible answer.
If you have model with many properties and want only some of them to map to different names, this is the way to do it:
var viewModel = ko.mapping.fromJS(#Html.Raw(Model.ToJson()));
var extendViewModel = function () {
this.firstName = ko.computed({
read: function(){
return viewModel.fname();
},
write: function(value){
viewModel.fname(value);
},
owner: viewModel
});
};
viewModel = ko.mapping.fromJS(new extendViewModel(), viewModel);
ko.applyBindings(viewModel);
Then you can use firstName in your markup for bindings and viewModel.fname will be updated, too.
I am have a problem binding a JSON result with knockout js. Below is my code
var AddDeparmentViewModel = function() {
var self = this;
self.AddDepartmentModel = {};
$.getJSON('/EventTracker/Department/GetEmptyModel/', function(data) {
ko.mapping.fromJS(data, {}, self.AddDepartmentModel);
});
};
$(document).ready(function() {
var departmentViewModel = new AddDeparmentViewModel();
ko.applyBindings(departmentViewModel);
})
Here is my HTML:
<div class="titleWrapper">
Add Department
</div>
<label>Department Name:</label>
<input data-bind="value: AddDepartmentModel.DepartmentName" id="departmentNameTextbox" type="text" />
<p data-bind="text: AddDepartmentModel.DepartmentName"></p>
The values I am returning are not appearing. Could someone point out where my mistake is. In this case the server is returning a single object not an array of objects.
Thanks!
Edit:
The Server returns this JSON:
{"DepartmentID":0,"DepartmentName":"Test","EVNTTRKR_Admins":[],"EVNTTRKR_Event": [],"EVNTTRKR_ItemCategories":[]}
Edit:
Here is the function GetEmptyModel:
public JsonResult GetEmptyModel()
{
var eventT = new EVNTTRKR_Departments();
eventT.DepartmentName = "Test";
return Json(eventT, JsonRequestBehavior.AllowGet);
}
The problem you are having seems to be fairly common. You are creating observables after binding the viewmodel. When this happens there is nothing for knockout to hook into and nothing gets rendered. A fix for this would be to make sure AddDepartmentModel is an observable and to set it to the return value rather than overwritting it with the fromJS.
var AddDeparmentViewModel = function() {
var self = this;
self.AddDepartmentModel = ko.observable({}); //important to have a default value so bindings dont break
$.getJSON('/echo/json/', function(data){
var mapped = ko.mapping.fromJS(data);
self.AddDepartmentModel(data); // here we are pushing values into the observable
});
};
This also requires fixes to the bindings as they now need to invoke AddDepartmentModel as a function:
<input data-bind="value: AddDepartmentModel().DepartmentName" id="departmentNameTextbox" type="text" />
Example fiddle with json request and population in callback.
http://jsfiddle.net/infiniteloops/YWC9N/
I created a jsfiddle here and replaced your getJson call with your server data (because I cannot call your getJson url). And it all seems to work which leads me to believe that an error is occuring in the getJson call.
Could you open your browser developer tools and look for any errors in the console. If there is an error and you're not sure what it means, add the error information to your original problem description.
var AddDeparmentViewModel = function() {
var self = this;
self.AddDepartmentModel = {};
var data =
{"DepartmentID":0,"DepartmentName":"Test","EVNTTRKR_Admins":[],"EVNTTRKR_Event": [],"EVNTTRKR_ItemCategories":[]
};
ko.mapping.fromJS(data, {}, self.AddDepartmentModel);
};
$(document).ready(function() {
var departmentViewModel = new AddDeparmentViewModel();
ko.applyBindings(departmentViewModel);
})
I am new to knockout and cannot seem to get a simple mapping to work at all. I am in an MVC4 C#.
My View looks like such:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Index";
}
<h2>Simple Mapping Example</h2>
The time on the server is: <span data-bind="text: ServerTime"></span>
and <span data-bind="text: NumberOfUsersConnected"></span> user(s) are connected.
#section Scripts
{
<script type="text/javascript">
function ViewModel() {
var self = this;
self.ServerTime = ko.observable();
self.NumberOfUsersConnected = ko.observable();
}
var vm = new ViewModel();
ko.applyBindings(vm);
$.getJSON('/Mapping/GetServerInfo', function(data) {
ko.mapping.fromJSON(data, {}, vm);
});
</script>
}
Example JSON that is returned from the controller call 'Mapping/GetServerInfo' is:
{"ServerTime":"2013-03-13T14:24:10.5675104-07:00","NumberOfUsersConnected":5}
For the data-binds I have tried text and value, neither one causes any data to be bound and displayed.
Am I missing something really obvious?
As per the question in the comments yes this is what is in my Layout.
<script type="text/javascript" src="~/Scripts/knockout-2.2.1.js"></script>
<script type="text/javascript" src="~/Scripts/knockout.mapping-latest.js"></script>
Thanks
From the $.getJSON documentation
The success callback is passed the returned data, which is typically a
JavaScript object or array as defined by the JSON structure and parsed
using the $.parseJSON() method.
So your the data variable is holding an already parsed object so you need to use the ko.mapping.fromJS method:
$.getJSON('/Mapping/GetServerInfo', function(data) {
ko.mapping.fromJS(data, {}, vm);
});
This is a newbie question and not to mention I am very new to knockout.js. All I am trying to do is, get details of a single Grower (Name, Company, Address) from the server and display it on the webpage. I am using $(document).bind('pageinit', function () since I'm using jQuery mobile.
Now my code is:
<h3><span data-bind="text: Name"></span></h3>
<span data-bind="text: Company"></span><br />
<span data-bind="text: Address"></span>
<script type="text/javascript">
$(document).bind('pageinit', function () {
function MyGrowerModel() {
//this.Name = "My Name";
//this.Company = "My Company";
//this.Address = "My Address";
//Load initial state from server, convert it to Task instances, then opulate self.tasks
$.getJSON("Grower/GetGrower", function (allData) {
this.Name = allData.Name;
this.Company = allData.Company;
this.Address = allData.Address;
alert(allData.Name); //works!
});
}
ko.applyBindings(new MyGrowerModel());
});
</script>
I am getting "Unable to parse bindings. Message: ReferenceError: Name is not defined; Binding value: Name
It makes sense because Name, Company and Address are scoped inside the getJSON function. So, my question is, where to declare those variables and how to update those ViewModel data?
I do not want to use the mapping plugin.
Any help is appreciated.
You're going to want to be using observable properties. That way, once your $.getJSON request finishes, your view will update with the new data.
<h3><span data-bind="text: Name"></span></h3>
<span data-bind="text: Company"></span><br />
<span data-bind="text: Address"></span>
<script type="text/javascript">
function MyGrowerModel() {
var self = this;
self.Name = ko.observable('');
self.Company = ko.observable('');
self.Address = ko.observable('');
self.Name.subscribe(function(newValue) {
alert("Name has changed: " + newValue);
});
//Load initial state from server and populate viewmodel
$.getJSON("Grower/GetGrower", function (allData) {
self.Name(allData.Name);
self.Company(allData.Company);
self.Address(allData.Address);
});
}
$(document).bind('pageinit', function () {
ko.applyBindings(new MyGrowerModel());
});
</script>
You need to preserve a reference to the object:
function MyGrowerModel() {
var self = this;
//Load initial state from server, convert it to Task instances, then populate self.tasks
$.getJSON("Grower/GetGrower", function (allData) {
self.Name = allData.Name;
self.Company = allData.Company;
self.Address = allData.Address;
});
}
That won't be the only problem though. $.getJSON is asynchronous by default, you'll either want to set async: false or change the callback function to apply the bindings. A better solution would be to use observables:
function MyGrowerModel() {
var self = this;
self.Name = ko.observable(''); // Value shown before getJSON returns
self.Company = ko.observable('');
self.Address = ko.observable('');
//Load initial state from server, convert it to Task instances, then populate self.tasks
$.getJSON("Grower/GetGrower", function (allData) {
self.Name(allData.Name);
self.Company(allData.Company);
self.Address(allData.Address);
});
}
This will initially display empty strings for each of Name, Company, and Address and will automatically update to the data returned from the getJSON call.