Question

I have had look at a few post already here but I am none the wiser. I tried my first example of Ajax but to no avail. The Partial View is loaded into a separate page as opposed to changing the dom element in the current page.

The pupose is by clicking on the Refresh link in updates the “Last Activity Date” value of the current row only.

Please if there is an easy well of doing this can you also let me know?

View:

@model IEnumerable<RegistrationManager.User>

@{
    ViewBag.Title = "Users";
}

@section scripts {
    @Content.Script(Url, "jquery-unobtrusive-ajax.min.js")
}
<h2>Users</h2>


<table>
    <tr>
        <th>Email Address</th>
        <th>Given Names</th>
        <th>Surname</th>
        <th>Last Activity Date</th>
        <th>Refresh</th>
    </tr>

@foreach (var item in Model)
{
    string selectedRow = "";
    if (ViewBag.UserId != null && item.UserId == ViewBag.UserId)  
    {  
        selectedRow = "selectedrow";  
    }  
    <tr class="@selectedRow" valign="top">
       <td>
            @item.UserName
        </td>
        <td>
            @item.Profile.GivenNames
        </td>
        <td>
            @item.Profile.Surname
        </td>
        <td>
            <div id="@String.Format("LastActivityDate{0}", item.UserId)">@Html.Partial("_DateOnlyPartialView", item.LastActivityDate)</div>
        </td>
        <td>
            @Ajax.ActionLink("Refresh", "Refresh",
                         new { UserId = item.UserId },
                         new AjaxOptions {
                             UpdateTargetId = "LastActivityDate" + item.UserId,
                             InsertionMode = InsertionMode.Replace,
                             HttpMethod = "GET"                                 
                        })
        </td>
    </tr>
}

</table>

Conrtoller:

public PartialViewResult Refresh(Guid? UserId)
{
    User user = _db.Users.Find(UserId);
    user.RefreshLastActivityDate();
    return PartialView("_DateOnlyPartialView", user.LastActivityDate);
 }

Answer 1

Have you included/referenced all the necessary javascript files?

If you have UnobtrusiveJavaScriptEnabled then you’ll need:

1. jQuery
2. jquery.unobtrusive-ajax.js

if you also use client side validation, you’ll need;

1. jquery.validate.js
2. jquery.validate.unobtrusive.js

These files can all be found when you create a new MVC3 project.