I am new to Knockout JS and think it is great. The documentation is great but I cannot seem to use it to solve my current problem.
The Summary of my Code
I have two viewmodels represented by two js scripts. They are unified in a parent js file. The save button's event is outside
both foreach binders. I can save all data in the details foreach.
My Problem
I need to be able to include the value from the contacts foreach binder with the values from the details foreach binder.
What I have tried
I have tried accessig the data from both viewmodels from the parent viewmodel and sending the POST request to the controller from there but the observeableArrays show undefined.
Create.CSHTML (Using MVC5 no razor)
<div id="container1" data-bind="foreach: contacts">
<input type="text" data-bind="value: contactname" />
</div>
<div data-bind="foreach: details" class="card-body">
<input type="text" data-bind="value: itemValue" />
</div>
The save is outside of both foreach binders
<div class="card-footer">
<button type="button" data-bind="click: $root.save" class="btn
btn-success">Send Notification</button>
</div>
<script src="~/Scripts/ViewScripts/ParentVM.js" type="text/javascript"></script>
<script src="~/Scripts/ViewScripts/ViewModel1.js" type="text/javascript"></script>
<script src="~/Scripts/ViewScripts/ViewModel2.js" type="text/javascript"></script>
ViewModel1
var ViewModel1 = function (contacts) {
var self = this;
self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
return {
contactName: contact.contactName
};
}));
}
ViewModel2
var ViewModel2 = function (details) {
var self = this;
self.details = ko.observableArray(ko.utils.arrayMap(details, function (detail) {
return {
itemNumber: detail.itemValue
};
}));
}
self.save = function () {
$.ajax({
url: baseURI,
type: "POST",
data: ko.toJSON(self.details),
dataType: "json",
contentType: "application/json",
success: function (data) {
console.log(data);
window.location.href = "/Home/Create/";
},
error: function (error) {
console.log(error);
window.location.href = "/Homel/Create/";
}
});
};
ParentViewModel
var VM1;
var VM2;
var initialContactInfo = [
{
contactPhone: ""
}
]
var initialForm = [
{
itemValue: ""
]
}
$(document).ready(function () {
if ($.isEmptyObject(VM1)) {
ArnMasterData = new ViewModel1(initialContactInfo);
ko.applyBindings(VM1, document.getElementById("container1"));
}
if ($.isEmptyObject(VM2)) {
VM2 = new ViewModel2(initialForm);
ko.applyBindings(VM2, document.getElementById("container2"));
}
});
Related
Shopping cart with many items how to remove any item asynchronously with JavaScript this is my work so far. Can anyone improve on this?
your help would be greatly appreciated. Have a great day
Ok so this works if you remove items from the top of the list but fails if you remove items from some other place.
The problem seems to be that the form names are all the same "remove" without any indexing.
Problem is I'm not sure how to proceed with this.
document.forms['remove'].onsubmit = () => {
let formData = new FormData(document.forms['remove']);
fetch('/sales/cart?handler=RemoveItem', {
method: 'post',
body: new URLSearchParams(formData)
})
.then(() => {
var url = "/sales/cart?handler=CartPartial";
console.log(url)
$.ajax({
url: url,
success: function (data) {
$("#exampleModal .modal-dialog").html(data);
$("#exampleModal").modal("show");
//alert('Posted using Fetch');
}
});
});
return false;
}
<pre>
#foreach (var item in Model.Items)
{
<form name="remove" method="post">
<h4 class="text-left text-body">#item.Price.ToString("c")
<button class="btn btn-sm" title="Trash"><i style="font-size:large"
class="text-warning icon-Trash"></i></button>
</h4>
<input type="hidden" asp-for="#Model.Id" name="cartId" />
<input type="hidden" asp-for="#item.Id" name="cartItemId" />
</form>
}
</pre>
Update
----------
New markup
I added an index to the id and included an onclick event.
<form method="post" id="#i" onclick="removeItem(this.id)">
<button class="btn btn-sm" title="Trash">Item One</button>
<input type="hidden" asp-for="#Model.Id" name="cartId" />
<input type="hidden" asp-for="#item.Id" name="cartItemId" />
</form>
and create a new function that captured the form id including it in a constant.
<script>
function removeItem(formId) {
const form = document.getElementById(formId);
form.onsubmit = () => {
let formData = new FormData(form);
fetch('/sales/cart?handler=RemoveItem', {
method: 'post',
body: new URLSearchParams(formData)
})
.then(() => {
var url = "/sales/cart?handler=CartPartial";
console.log(url)
$.ajax({
url: url,
success: function (data) {
$("#exampleModal .modal-dialog").html(data);
$("#exampleModal").modal("show");
//alert('Posted using Fetch');
}
});
});
return false;
}
}
</script>
If anybody can improve on this please post it here.
Thanks.
Updates code behind Cart.cshtml.cs
using System;
using System.Threading.Tasks;
using Malawby.Models;
using Malawby.Services.Interfaces;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace Malawby.Pages.Sales
{
public class CartModel : PageModel
{
private readonly ICartRepository _cartRepository;
public CartModel(ICartRepository cartRepository)
{
_cartRepository = cartRepository ?? throw new
ArgumentNullException(nameof(cartRepository));
}
[BindProperty]
public Cart Cart { get; set; } = new Cart();
public const string SessionKeyName = "_Name";
public string SessionInfo_Name { get; private set; }
public void OnGetAsync()
{
}
public async Task<PartialViewResult> OnGetCartPartialAsync()
{
var userName = GetUserName();
if (userName != null)
{
Cart = await _cartRepository.GetCartByUserName(userName);
}
return Partial("_ToCart", model: Cart);
}
private string GetUserName()
{
return HttpContext.Session.GetString(SessionKeyName);
}
public async Task OnPostRemoveItemAsync(int cartId, int cartItemId)
{
await _cartRepository.RemoveItem(cartId, cartItemId);
}
}
}
Update 2
This is the modified code I used. This is the error in the console.
XML Parsing Error: no root element found Location: localhost:44331/sales/cart?handler=RemoveItem Line Number 1, Column 1
There is no error on the page just nothing happens on the click of the trash can.
<script type="text/javascript">
function removeItem(cartItemId, cardId) {
var removeUrl = "/sales/cart?handler=RemoveItem";
$.post(removeUrl,
{
cartItemId: cartItemId,
cardId: cardId
})
.done(function (data) {
alert(data); //usually return true or false if true
remove card
$('#card_' + cardId).remove();
});
}
</script>
I am not familiar with asp.net core, but I will show how I usually do it without focusing on syntax.
first on the view no need to add multiple form but should use card id as index and delete button sent selected index like this:
#foreach (var item in Model.Items)
{
<div id="card_#item.cardId">
<h4 class="text-left text-body">#item.Price.ToString("c")
<button class="btn btn-sm" onclick="removeItem('#item.cardId') title="Trash"><i style="font-size:large"
class="text-warning icon-Trash"></i></button>
</h4>
</div>
}
then the script function will call remove api and remove selected card with no need to re-render the page:
<script type="text/javascript">
function removeItem(cardId) {
var removeUrl = "your apiUrl";
$.post( "removeUrl", { cardId: cardId })
.done(function( data ) {
alert( data ); //usually return true or false if true remove card
$('#card_'+ cardId).remove();
});
}
</script>
I am trying to learn how to work with angular and javascript more. Please let me know what I am doing wrong here.
When I input something into the text box, it should display
"hello {name} , would you like to play a game?
It displays the string without the input.
Also, when I run it, it says
object Object
.
(function (app) {
var JakesController = function ($scope, $http) {
$scope.JakesSampleModel = {name: ' '};
$scope.theSampleReturn = null;
var sendResponseData = function (response) {
if (response.data.error) {
console.log(data);
}
else {
$scope.theSampleReturn = response.data;
}
};
var sendResponseError = function (data) {
console.log(data);
}
$scope.senddata = function (params) {
return $http({
method: 'post',
url: '/home/servercall',
data: params
})
.then(sendResponseData)
.catch(sendResponseError);
};
};
app.controller("JakesController",['$scope', '$http', JakesController]);
}(angular.module("JakesFirstApp")));
Here is the HTML:
<div id="OutterDiv" ng-controller="JakesController" ng-app="JakesFirstApp">
<div id="JakesButton" class="button" ng-click="senddata()">Submit</div>
<input type="text" id="JakesTextBox" ng-model="theSampleReturn" />
{{theSampleReturn.result}}
Json result:
public JsonResult servercall(string name)
{
return Json(new { result = $"Hello {name}, Would you like to play a game?" }, JsonRequestBehavior.AllowGet);
}
In your html try to use {{theSampleReturn}} instead of {{theSampleReturn.result}} because you don't seem to have theSampleReturn.result set anywhere
If I understand you question correctly, then it looks like the solution is to update your template like so:
<input type="text" id="JakesTextBox" ng-model="JakesSampleModel.name" />
And then update your controller to correctly send the name to the server when senddata() is called:
$scope.senddata = function () {
// Construct params for post by getting data from your scope/model that's
// wired up to your input field
var params = { name : $scope.JakesSampleModel.name };
return $http({
method: 'post',
url: '/home/servercall',
data: params
})
.then(sendResponseData)
.catch(sendResponseError);
};
I am new to Knockout.js, i have 2 viewModel EmployeeviewModel and DepartmentViewModel, i am binding my first view using EmployeeviewModel its working perfect, now i need make click so i can navigate to second page which is department and in frist i need to display click EmployeeName and his department, secondly i need to display all the EmployeeName related to that department how to achive this, how i can pass my first page value to second page display related to departmentID.
function EmployeeViewModel()
{
var self =this;
var Allemployee =ko.observableArray([])
self.getEmployeedetails=function ()
$.ajax({
type: "GET",
dataType: "json",
url: baseUrl + 'xxx/xxxxxx',
success: function (data) {
self.Allemployee($.map(data, function (item) {
return new EmployeeModel(item);
}));
},
error: function (error) {
}
});
self.getDepartment=function()
{
//here i need to navigate to Department page with all department ID
}
}
function EmployeeModel(data)
{
var self =this;
self.employeeName = ko.observable(data.employeeName )
self.employeeMobile= ko.observable(data.employeeMobile)
self.employeeemail = ko.observable(data.employeeemail )
self.employeedepartmentId= ko.observable(data.employeedepartmentId)
}
function DepartmentViewModel()
{
var self =this;
var AllDepartmentemployee =ko.observableArray([])
self.getEmployeedetails=function ()
$.ajax({
type: "GET",
dataType: "json",
url: baseUrl + 'xxx/xxxxxx',
success: function (data) {
self.AllDepartmentemployee ($.map(data, function (item) {
return new DepartmentModel(item);
}));
},
error: function (error) {
}
});
}
function DepartmentModel (item)
{
self.departmentId= ko.observable(data.departmentId)
self.departmentName=ko.observable(data.departmentName)
self.employeeName=ko.observable(data.employeeName)
}
var viewModel=new EmployeeViewModel()
ko.applyBindings(EmployeeViewModel,document.getElementById("employeeDetails"))
var viewModel 2=new DepartmentViewModel()
ko.applyBindings(viewModel,document.getElementById("department"))
//html//
//First view
<div data-role="view" id="employeeDetails">
<ul>
<li>
<div data-bind="text:employeeName"></div>
<div data-bind="text:employeeMobile"></div>
<div data-bind="text:employeeemail "></div>
<div data-bind="text:employeedepartmentId"></div>
</li>
</ul>
<div>
//second View
<div data-role="view" id="department">
<div data-bind="text:employeeName">
<div>
<div data-bind="text:departmentName">
<div>
<ul data-bind:"foreach:AllDepartmentemployee">
<li>
<div data-bind="text:employeeName">
<div data-bind="text:departmentName"></div>
</li>
<ul>
<div>
You need to have a Main view model and have two sub view models for your departments and employees. Then every time you click on any employee you will have the departmentId then based on your logic you can either send a request to the server along with Id and get back all the employees under that department or you already have all departments and you just filter them based on departmentId that has been passed.
Below is an example how to handle: https://jsfiddle.net/kyr6w2x3/124/
HTML:
<div data-role="view" id="employeeDetails">
<ul >
<li>
<span class="info">Name</span>
<span class="info">Mobile</span>
<span class="info">Email</span>
<span class="info">Dept.NO</span>
</li>
<hr>
<!-- ko foreach: AllEmployee -->
<li>
<span data-bind="text:EmployeeName" class="info"></span>
<span data-bind="text:EmployeeMobile" class="info"></span>
<span data-bind="text:EmployeeEmail " class="info"></span>
<span data-bind="text:EmployeeDepartmentId" class="info"></span>
Click
</li>
<!-- /ko -->
</ul>
<div>
//second View
<div data-role="view" id="department">
<h1 data-bind="text:SelectedEmployeeName"></h1>
<div data-bind="if:AllDepartmentEmployee().length > 0">
<h3 data-bind ="text:AllDepartmentEmployee()[0].DepartmentName()"></h3>
</div>
<ul data-bind ="foreach:AllDepartmentEmployee">
<li>
<div data-bind="text:EmployeeName"></div>
<!-- <div data-bind="text:DepartmentName"></div> -->
</li>
<ul>
<div>
VM:
var employeesList = [{
employeeId : 1,
employeeName:"Mike" ,
employeeMobile :1234561 ,
employeeEmail:"Mike#example.com",
employeeDepartmentId:1},
{
employeeId : 2,
employeeName:"Alex" ,
employeeMobile :1234562 ,
employeeEmail:"Alex#example.com",
employeeDepartmentId:1
},
{
employeeId : 3,
employeeName:"Dave" ,
employeeMobile :1234563 ,
employeeEmail:"Dave#example.com",
employeeDepartmentId:1
},
{
employeeId : 4,
employeeName:"Dani" ,
employeeMobile :1234564 ,
employeeEmail:"Dani#example.com",
employeeDepartmentId:2},
{
employeeId : 5,
employeeName:"Chris" ,
employeeMobile :1234565 ,
employeeEmail:"Chris#example.com",
employeeDepartmentId:2
},
{
employeeId : 6,
employeeName:"Matt" ,
employeeMobile :1234566 ,
employeeEmail:"Matt#example.com",
employeeDepartmentId:2
}
]
var departmentsList = [
{departmentId:1,
departmentName:"Dept #1",
employeeName:"Mike"
},
{departmentId:1,
departmentName:"Dept #1",
employeeName:"Alex"
},
{departmentId:1,
departmentName:"Dept #1",
employeeName:"Dave"}
,
{departmentId:2,
departmentName:"Dept #2",
employeeName:"Matt "
},
{departmentId:2,
departmentName:"Dept #2",
employeeName:"Dani"
},
{departmentId:2,
departmentName:"Dept #2",
employeeName:"Chris "}
]
function MainViewModel(){
var self = this;
self.AllEmployee = ko.observableArray([]);
self.AllDepartmentEmployee= ko.observableArray([]);
self.SelectedEmployeeName = ko.observable();
self.LoadEmployees = function (){
// Ajax goes here to load uncomment below
// $.ajax({
// type: "GET",
// dataType: "json",
// url: baseUrl + 'xxx/xxxxxx',
// success: function (data) {
self.AllEmployee($.map(employeesList, function (item) {
return new EmployeeModel(item);
}));
// },
// error: function (error) {
// }
//});
}
self.GetDepartment = function(employee){
self.SelectedEmployeeName(employee.EmployeeName())
data = {departmentId:employee.EmployeeDepartmentId()}
// $.ajax({
// type: "GET",
// data:data,
// dataType: "json",
// url: baseUrl + 'xxx/xxxxxx',
// success: function (data) {
// HERE YOU MAY JUST GET THE LIST OF EMPLOEES FOR THIS DEPARTMENT OR YOU GET ALL AND HERE YOU FILTER
self.AllDepartmentEmployee ($.map(departmentsList, function (item) {
if(item.departmentId == employee.EmployeeDepartmentId()){
return new DepartmentModel(item);
}
}));
// },
// error: function (error) {
// }
// });
}
}
function EmployeeModel(data){
var self = this;
self.EmployeeId = ko.observable(data.employeeId);
self.EmployeeName = ko.observable(data.employeeName);
self.EmployeeMobile= ko.observable(data.employeeMobile);
self.EmployeeEmail = ko.observable(data.employeeEmail );
self.EmployeeDepartmentId= ko.observable(data.employeeDepartmentId);
}
function DepartmentModel (data){
var self = this;
self.DepartmentId = ko.observable(data.departmentId)
self.DepartmentName = ko.observable(data.departmentName)
self.EmployeeName = ko.observable(data.employeeName)
}
var viewModel = new MainViewModel();
ko.applyBindings(viewModel);
viewModel.LoadEmployees();
personManagerInstance.getString("firstname",'common','en') currently i pass direct string in ui its affecting but what i exactly need is read the data from json file and return as string..
personManagerInstance.getString("firstname",'common','en') method i need to read the data from json file and return as string or object?
personManagerInstance.getString("lastname",'registration','en') this method based on parameter read json from different location and return as string...
var PersonManager = function ()
{
return {
$get: function ($http, person)
{
var mainInfo = $http({
method: "get",
//"js/resources-locale_en_es.json"
url: "js/resources-locale_en_es.json"
}).success(function (data) {
return data.title;
});
return {
getPersonFirstName: function ()
{
return "as";
},
getPersonLastName: function ()
{
return person.lastName;
},
getString: function (labelid, moduleName, language)
{
//Here am getting the value id, moduleName, language based on the vaule I need to change the url path
//(i.e) js/resources-locale_en_es.json, js/registration/resources-locale_en_es.json
var l = mainInfo.success(function (data) {
person.firstName = data.title;
})
return person.firstName;
}
};
}
};
};
angular.module("mainModule", [])
.value("person", {
firstName: "",
lastName: ""
})
.provider("personManager", PersonManager)
.controller("mainController", function ($scope, person, personManager)
{
person.firstName = "John";
person.lastName = "Doe";
$scope.personInstance = person;
$scope.personManagerInstance = personManager;
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="mainModule">
<div ng-controller="mainController">
<strong>First name:</strong> {{personManagerInstance.getPersonFirstName()}}<br />
<strong>Last name:</strong> {{personManagerInstance.getPersonLastName()}}<br />
<strong>Full name:</strong> {{personManagerInstance.getString("firstname",'common','en')}} {{personManagerInstance.getString("lastname",'registration','en')}}<br />
<br />
<label>Set the first name: <input type="text" ng-model="personInstance.firstName"/></label><br />
<label>Set the last name: <input type="text" ng-model="personInstance.lastName"/></label>
</div>
</body>
</html>
I don't see any trouble of using $http.get('file.json'),
you can use angular.toJson(result) to convert JSON string to object later on.
http://plnkr.co/edit/4K9sy5aCP4NML0nnYgZ4
This is solution for your question
$http({
method: "get",
url: "link to your json file"
}).success(function (data) {
callback(data);
});
I am having trouble trying to append a new url parameter after selecting a genre to create a request to the API.
My ng-change is genreChange. When it been selected, it should automatically append the new url parameter like this &with_genre=fiction in the $scope.movies url before submitting the form with submitButton
<form ng-submit="submitButton()" name="cForm" class="form-horizontal">
<h2>Discover the gems</h2>
<div class="form-group">
<select class="form-control" ng-model="genreSelect" ng-change="genreChange()">
<option ng-repeat="genre in genreList.genres" value="{{genre.id}}">{{genre.name}}</option>
</select>
</div>
<input type="submit" value="hello" />
</form>
-
$scope.genreChange = function() {
$scope.genreVar = $scope.genreSelect;
$scope.movies.get({with_genres: $scope.genreVar});
}
$scope.movies = $resource('http://api.themoviedb.org/3/discover/movie:action', {
api_key: apikey,
callback: 'JSON_CALLBACK'
}, {
get: {
method: 'JSONP'
}
});
$scope.submitButton = function() {
$scope.films = $scope.movies.get();
}
I am doing this method just in case a user leaves it blank.
Thanks
This is what Resource.bind does.
var MovieResource = $resource('http://api.themoviedb.org/3/discover/movie:action', {
api_key: apikey,
callback: 'JSON_CALLBACK'
}, {
get: {
method: 'JSONP'
}
});
$scope.movies = MovieResource;
$scope.genreChange = function() {
$scope.genreVar = $scope.genreSelect;
$scope.movies = MovieResource.bind({with_genres: $scope.genreVar})
}
$scope.submitButton = function() {
$scope.films = $scope.movies.get();
}