Knockoutjs Button Click - asp.net-mvc

Question

Hi how can ı get my value with knockoutjs click event my button code
<button data-bind="click : LikeButtonClick , value : MessageId" class="btn btn-default like"><span data-bind="text:LikeCount"></span> <i class="fa fa-thumbs-o-up"></i></button>
and my knockoutjs click code
var LikeButtonClick = function () {
alert("");
}
And how can I refresh my likes after like button click event. I use template binding. My template binding code is
var viewModel = {
messages: ko.observableArray()
};
ko.options.useOnlyNativeEvents = true;
ko.applyBindings(viewModel);
$.getJSON('#Url.Action("statusMessages", "Home")', function (data) {
viewModel.messages(data);
});
and my like button code
var LikeButtonClick = function (id) {
$.ajax({
url: '/Home/Like/' + id,
type: 'POST',
success: function (data) {
// refresh
});
}
});
}

Answer 1

Another method is to build the click function into your data model. Here I've added the function to the item directly. Each click will only affect it's own object information.
function Post() {
var self = this;
self.Text = ko.observable("Lorem Ipsum");
self.Liked = ko.observable(false);
self.LikeCount = ko.computed(function() {
return self.Liked() ? 1 : 0;
});
self.MessageId = ko.observable(1);
self.LikeButtonClick = function() {
self.Liked(!self.Liked());
}
}
function viewModel() {
var self = this;
self.Posts = ko.observableArray();
self.Load = function() {
self.Posts.push(new Post());
self.Posts.push(new Post());
self.Posts.push(new Post());
}
self.Load();
}
ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach: Posts">
<div data-bind="text:Text"></div>
<button data-bind="click: LikeButtonClick, value: MessageId" class="btn btn-default like">
<span data-bind="text:LikeCount"></span>
<i class="fa fa-thumbs-o-up"></i></button>
</div>

Answer 2

this context passed to the method will be your viewmodel, or whatever you have bound to the element. Inside LikeButtonClick you should be able to get the value of MessageId by referencing the property this.MessageId().
If you want to pass a value to the click handler, you'll want to declare an inline function where you data-bind, or alternatively, bind the function with a context. Here the context is the main viewmodel:
data-bind="click: LikeButtonClick.bind($root,'green')"
var LikeButtonClick = function (src) {
alert(src); // src='green' in this example
}