KnockoutJS MVC Partial view selected information - html

Question

I'm trying to implement a partial view to my HTML page where I expand the size of the QR Code that's on screen to make it easier for the user to see whenever they are to click the button showQRPanel.
HTMLPAGE:
<div data-bind="using: DetailsArray">
<table style="padding: 9px; border: 1px solid;" data-bind="foreach: DetailsArray">
<tr style="border: 1px solid;">
<th>Patient</th>
<th>Age</th>
<th>QR</th>
<th>img</th>
<th>Button</th>
</tr>
<tr>
<td data-bind="text: patient"></td>
<td data-bind="text: age"></td>
<td data-bind="text: mobnum"></td>
<!--ko if: mobnum-->
<td><img style="width: 100px; height: 100px;" data-bind="attr: { 'src': '#Url.Action("QrGenerator", "Home")?mobnum_text=' + mobnum }" /></td>
<td><button id="showQRPanel" data-bind="click: $root.ShowPanel">...</button></td>
<!--/ko-->
</tr>
</table>
<!--ko if: ShowPanel-->
#Html.Partial("~/Views/Home/_QRPanel.cshtml")
<!--/ko-->
</div>
Partial View:
<div style="background-color: slategrey; width: 53%;" data-bind="with: $root.DetailsArray">
<h2>Phone Number:</h2>
<img style="width: 100px; height: 100px;" data-bind="attr: { 'src': '#Url.Action("QrGenerator", "Home")?mobnum_text=' + mobnum }" />
</div>
ViewModel:
var viewModel = {
ShowPanel: ko.observable(false),
DetailsArray: ko.observableArray([
{ patient: "niall", age: "13", mobnum: "0793983720"},
{ patient: "jacob", age: "13", mobnum: "07939837332"},
{ patient: "sam", age: "15", mobnum: ""},
])
};
ko.applyBindings(viewModel);
Thanks!

Answer 1

First, I don't think you need the using binding in your div at the top. Please check the documentation for the using binding (https://knockoutjs.com/documentation/with-binding.html).
Second, the bindings in your partial view aren't quite right. The img is trying to bind to mobnum, but you don't have a mobnum property on your viewmodel. Rather, you have one one each of the items in your array, but you haven't told the binding how it knows which one to use.
Third, your click handler on your buttons call the ShowPanel method. However, ShowPanel is an observable, so when you call it, all it does is return it's value, which is ignored by the click handler.
After removing the using: DetailsArray at the top of the HTML page, try this:
Viewmodel:
var viewModel = {
SelectedMobNum: ko.observable(),
ShowPanel: function(item) {
viewModel.SelectedMobNum(this.mobnum);
},
ClosePartialView: function() {
viewModel.SelectedMobNum(null);
},
DetailsArray: ko.observableArray([
{ patient: "niall", age: "13", mobnum: "0793983720"},
{ patient: "jacob", age: "13", mobnum: "07939837332"},
{ patient: "sam", age: "15", mobnum: ""},
])
};
Partial View (noticed I removed the with binding):
<div data-bind="visible: SelectedMobNum">
<h2>Phone Number:</h2>
<img data-bind="attr: { 'src': '#Url.Action("QrGenerator", "Home")?mobnum_text=' + SelectedMobNum() }" />
<button data-bind="click: ClosePartialView">Close</button>
</div>