Pass dynamic value from html table row to javascript url.action

Question

I want to pass the selected cell value from @Html.DisplayFor(model => item.year) to the Url.Action I have created in the javascript.

My controller has two parameters one is a static name and the other is year that is dynamically gotten from the row selected.

Codes for the table:

<table id="name" border=1 width="50%">
    <tr>
        <th>Name</th>
        <th>Year</th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                <button id="see">@Html.DisplayFor(model => item.year)</button>
            </td>
        </tr>
    }
</table>

Codes for javascript:

<script type="text/javascript">
    var urls = {
       view: '@Html.Raw(@Url.Action("(actionName)", "(controller)", new { name = "Mary", year = (this is what idk)}))'
    };

    $document.ready(function()
    {
        $('#see').click(function () {
            $('#dialog').load(urls.view, function () {    
            });
        });
    });
</script>

Controller method:

public ActionResult actionName(string name, string year)
{
    var query = new aquery();
    var response = query.Fetch(name, year);
    return View(response);
}

Calls a popup form which has

<form id="", action="@html.raw(@url.action(same thing here as my previous main page. what do i put for the year here now?))">

Answer 1

You have invalid html because of the duplicate id="see" attributes you adding to the buttons in the foreach loop. First change it to use a class name instead, and add the type="button" because the default is "submit"

<button type="button" class="see">@Html.DisplayFor(model => item.year)</button>

The the script should be

<script type="text/javascript">
  $document.ready(function()
  {
    var dialog = $('#dialog'); // cache elements you may repeatedly use
    var url = '@Url.Action("actionName")'; // add the controller name if its in a different controller
    $('.see').click(function () { // change selector to use the class name
      dialog.load(url, { name: 'Mary', year: $(this).text() });
    });
  }
</script>

Side note: your method parameter should be int year, not string year and your method should return a PartialView(response), not View(response)