ASP MVC Passing value into modal window

Question

I have this view with a modal window. When I click to open the modal window, I\'d like to pass the parameter item.InstrumentId into the modal window so that I can c

Answer 1

1.Use ID for Anchor Link.
2.Notice this line <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a> in code. It has Anchor Link Value=. When you open modal you can see Anchor Link Value=10320320 and you can inspect href too.

$('#myModal1').on('show.bs.modal', function(e) {
  var modalId = $(e.relatedTarget).data('id');
  $('#InstrumentIDLink').attr('href', 'url+'+ modalId)
  $('#InstrumentIDLink').text('Anchor Link Value='+ modalId);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <h3>Modal Example</h3>
  <!-- Button to trigger modal -->
  <div> <a href="#myModal1" class='open-dialog' role="button" 
           class="btn" data-toggle="modal" data-id='10320320'>Launch Modal (10320320)</a><br/>
    <a href="#myModal1" class='open-dialog' role="button" 
           class="btn" data-toggle="modal" data-id='10320321'>Launch Modal (10320321)</a>
  </div>
  <!-- Modal -->
  <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
    <div class="modal-body"> <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a>

    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      <button class="btn btn-primary">Save changes</button>
    </div>
  </div>
</div>

From bootstrap 3+ you can use e.relatedTarget to get element that triggered the modal

Answer 2

Instrument:

@Html.ActionLink("Link_Text", "Action_Name", "Controller_Name", new { id=item.InstrumentId})

Now in your COntroller you can access this value like

public ActionResult Action_Name(int id)
{
    //Do something
    return view();
}

Answer 3

You currently generating a modal for each item in your collection but giving it an id="myModal" which is invalid html and means data-target="#myModal" will only ever open the first one. Move the modal outside the loop so your create only one (and also remove the <h4 class="modal-title" id="myModal"></h4> element which also has the same id attribute)

Then change the button html to

<button type="button" class=".." .. data-url="@Url.Action("Instrument", new { instrumentid = item.InstrumentId })">

and change the html in the modal to

Instrument: <a id="details" href="#">Details</a>

Then change the script to

$(document).on("click", ".open-dialog", function() {
    $('#details').attr('href', $(this).data('url')); // update the links url
})

Side note: You will probably want to do something similar with Checked: @item.Checked in the modal