title: Access a bound value inside HTML element with KO
body: <p>I have this view that loops a collection so that, using KO, it can do very basic pagination. Now, the last column for the table is just a bunch of actions for the record in each row. If this were simple MVC generated table, they would carry the proper Id in the generated URL.</p>
  
  <p>Not anymore.</p>
  
  <pre><code>@using Newtonsoft.Json
  @model IEnumerable&lt;SensorSauce.Models.Business&gt;
  
  @{
      ViewBag.Title = "Business Manager";
  }
  
  &lt;h2&gt;Business Manager&lt;/h2&gt;
  
  &lt;table class="table table-striped table-bordered"&gt;
  
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;@Html.DisplayNameFor(model =&gt; model.Name)&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;@Html.DisplayNameFor(model =&gt; model.ServiceType)&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;@Html.DisplayNameFor(model =&gt; model.Specialties)&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;Actions&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody data-bind="foreach:currentBusinesses"&gt;
      &lt;tr&gt;
          &lt;td data-bind="text:Name"&gt;&lt;/td&gt;
          &lt;td data-bind="text:ServiceType"&gt;&lt;/td&gt;
          &lt;td data-bind="text:Specialties"&gt;&lt;/td&gt;
          &lt;td &gt;
              &lt;a href="@Url.Action("MapLocation", "Business")" class="glyphicon glyphicon-map-marker"&gt;&lt;/a&gt; |
              &lt;a href="@Url.Action("Edit", "Business")" class="glyphicon glyphicon-edit"&gt;&lt;/a&gt; |
              &lt;a href="@Url.Action("Details", "Business")" class="glyphicon glyphicon-search"&gt;&lt;/a&gt; |
              &lt;a href="@Url.Action("Delete", "Business")" class="glyphicon glyphicon-remove-sign"&gt;&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  
      &lt;tfoot&gt;
      &lt;tr&gt;
          &lt;td colspan="4"&gt;
              &amp;nbsp;&lt;span data-bind="click:previousPage,visible:currentPage() &gt; 1" class="glyphicon glyphicon-circle-arrow-left" style="cursor: pointer"&gt;&lt;/span&gt;&amp;nbsp;
              Page #: &lt;span data-bind="text:currentPage"&gt;&lt;/span&gt;&amp;nbsp;
              &amp;nbsp;&lt;span data-bind="click:nextPage,visible:currentPage() &lt; lastPage" class="glyphicon glyphicon-circle-arrow-right" style="cursor: pointer"&gt;&lt;/span&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td &gt;
              &lt;a href="@Url.Action("Create", "Business")" class="btn btn-primary btn-sm btn-block"&gt;&lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt; Create Business&lt;/a&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;/tfoot&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>And here is the script after the above table:</p>
  
  <pre><code>&lt;script src="~/Scripts/knockout-3.3.0.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
      function BusinessViewModel() {
          var self = this;
  
          // properties
          self.businesses = @Html.Raw( JsonConvert.SerializeObject(Model, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore }));
          self.pageSize = 10;
          self.currentPage = ko.observable(1);
          self.lastPage = Math.ceil(self.businesses.length / self.pageSize);
          self.currentBusinesses = ko.computed(function() {
              var startIndex = (self.currentPage() - 1) * self.pageSize;
              var endIndex = startIndex + self.pageSize;
  
              return self.businesses.slice(startIndex, endIndex);
          });
  
          // methods
          self.nextPage = function() {
              self.currentPage(self.currentPage() + 1);
          };
  
          self.previousPage = function() {
              self.currentPage(self.currentPage() - 1);
          };
      }
  
      ko.applyBindings(new BusinessViewModel());
  &lt;/script&gt;
  </code></pre>
  
  <p>The action for Edit, Delete, and Details etc require the parameter to be passed to the controller's action. Rendering the table like above creates an issue that the actions such as Details never receives the ID parameter.</p>
  
  <p>I need to bind something to the Id property of the Model and combine it with the Url.Action() method's generated Url. Or so i understand.</p>
  
  <p>Any suggestions?</p>