title: MVC4 Razor - bind object Id from foreach loop to Url.Action that's outside the loop
body: <p>I'm not sure if this can be done as the <code>Url.Action()</code> is trying to access a variable that's only in the foreach's scope - maybe using jQuery?</p>
  
  <p>I have a strongly typed partial view that takes a view model that contains a list of search results.</p>
  
  <p>I iterate through the list and each result is displayed in summarised form. Beside each item in the list there's a button that (<em>should</em>) when clicked launches a modal window that displays more detailed information about the list item. So if there's 10 items in the list there's going to be 10 correspdonding 'More info' buttons.</p>
  
  <p><strong>Partial View:</strong></p>
  
  <pre><code>&lt;div&gt;
  @foreach (var result in Model.SearchResults)
  {
      &lt;div class="basic-search-result"&gt;
          &lt;div class="row-fluid"&gt;
              &lt;img class="span3" src="http://some-img.jpg" /&gt;
              &lt;div class="span3"&gt;
                  &lt;div class="address"&gt;
                      @result.Address.TownCity&lt;br /&gt;@result.Address.County
                  &lt;/div&gt;
                  &lt;div&gt;
                      €@result.MonthlyRate Monthly
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="span3 offset1" id="basic-search-result-btns"&gt;
                  &lt;button class="btn btn-primary btn-block" id="btn-show-modal-from-get-all"&gt;More info&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  &lt;/div&gt;
  </code></pre>
  
  <p>Just below the foreach loop I define the modal (<code>ViewProperty</code> is a controller action that returns a partial that contains the modal's body):</p>
  
  <pre><code>&lt;div class="modal hide fade in" id="modal-view-property-from-get-all" 
      data-url="@Url.Action("ViewProperty", "ResidentialProperties", new { id = result.ResidentialPropertyId })"&gt;
      &lt;div id="view-property-from-get-all-container"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When one of the buttons is clicked, it should launch a modal. Handled like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $('#btn-show-modal-from-get-all').click(function () {
          var url = $('#modal-view-property-from-get-all').data('url');
  
          $.get(url, function (data) {
              $('#view-property-from-get-all-container').html(data);
  
              $('#modal-view-property-from-get-all').modal('show');
          });
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>I know that the Id I'm binding in the <code>Url.Action()</code> is outside of the scope of the foreach. Is it possible to somehow get the <code>result.ResidentialPropertyId</code> and pass it to the <code>Url.Action()</code> dynamically when a button is clicked?</p>
  
  <p>To prove it's working, I placed the <code>Url.Action()</code> in the foreach loop, but this only launched a modal for the first item in the list. Can what I'm trying to do be achieved?</p>