Javascript function argument is not showing in Asp.Net MVC RouteValueDictionary?

Question

I am new bee to Asp.net. I like to pass an id of an entity to edit method in controller through view. Here is my code.

#

@model IEnumerable<Login.DAL.tabLogin>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>

<p>
@Html.ActionLink("Create New", "Create")
</p>
<div id="work_area">
</div>
<table>
<tr>
    <th>
        Username
    </th>
    <th>
        Password
    </th>
    <th>
        Email
    </th>
    <th></th>
</tr>
@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Username)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Password)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Email)
    </td>
    <td>
        <a href="javascript:editUser(@item.UserID)">Edit</a>|
        @Html.ActionLink("Details", "Details", new { id=item.UserID }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.UserID })
    </td>
</tr>
}
</table>
<script type="text/javascript" language="javascript">

function editUser(idval) {
    alert(idval);
    $('#work_area').load('@Url.Action("Edit","Home", new RouteValueDictionary(new { id = idval}))');
}
</script>

I did not get the correct functionality .

$('#work_area').load('@Url.Action("Edit","Home", new RouteValueDictionary(new { id = 1}))');

If I hard code the id value as above , It is working as expected. Please help me on this.

Answer 1

The problem is that you're mixing Razor and JavaScript and don't have an understanding of what happens where/when. The line of code:

$('#work_area').load('@Url.Action("Edit","Home", new RouteValueDictionary(new { id = 1}))');

will render as a completed URL before the javascript is rendered. That means, once the page is loaded by the browser, that line already says:

$('#work_area').load('http://example.com/home/edit/1');

and will never change based on javascript. To get the javascript parameter into your URL, you'll have to combine the URL from Razor with a javscript parameter. Try something like:

function editUser(idval) {
    alert(idval);
    var baseUrl = '@Url.Action("Edit","Home")';
    $('#work_area').load(baseUrl + '/' + idval);
}