Question

I come from a webforms background, and at this point I’m quite frustrated with MVC4. I’ve been looking at examples, watching video’s, googling, ect. Nothing seems to be working and I’m about to throw in the towel, however, this site is pretty helpful so I’m going to see if I can get some help with this.

What I’d like to do is:

1. Create a page with jQuery tabs (easytabs) (this is done btw)
2. On the tab click event, I’d like it to
   re-load a tab via ajax

In webforms, I would have been done at 8am with this. I’m now stuck on this and its 5pm. Frustrated beyond belief.

I followed the web video tutorial on the MVC4 site, this lovely example is in Razor, which I do not wish to use, but, I still follow it anyways for the knowledge:

http://www.asp.net/mvc/overview/javascript
-> ‘Javascript and Ajax’
-> http://pluralsight.com/training/players/PSODPlayer?author=scott-allen&name=mvc3-building-ajax&mode=live&clip=0&course=aspdotnet-mvc3-intro

In my easytabs, in HTML, I would define my html as:

<li class="tab"><a href="#tabs-users" class="light heavy">Manage Sections</a></li>

So, following the video, I tried to create and anchor tag with ajax attributes via the ajax helper to replace this HTML:

 <% Ajax.ActionLink("Manage Sections", "tabsUsers", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "tabs-users", InsertionMode = InsertionMode.Replace }); %>

This renders NOTHING. It will not render it on the page. So, I go hunting, and find I need the following:

<%: Scripts.Render("~/bundles/jqueryval") %>

This bundle includes ‘jquery.unobtrusive-ajax.min.js‘ and also in the web.config I have the settings:

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

Still nothing.

Original HTML

<div id="tab-container" class="tab-container">
    <ul class="etabs">
        <li class="tab upper first"><a href="#tabs-users" class="light heavy">Manage Users</a></li>
        <li class="tab upper"><a href="#tabs-groups" class="light heavy">Manage Sections</a></li>
    </ul>
    <div id="tabs-users" class="normal light clearfix">
        Users
    </div>
    <div id="tabs-groups" class="normal light clearfix">
        Groups
    </div>
</div>

I have a feeling the Ajax.ActionLink doesn’t like to render the anchor tag there, but I have no idea why.

Controller

    [HttpGet]
    public PartialViewResult tabsUsers()
    {
        IEnumerable<SelectListItem> items = UserManager.GetUsers()
            .Select(c => new SelectListItem
            {
                Value = c.UserID.ToString(),
                Text = c.FirstName + c.LastName
            });

        return PartialView("UsersPartial", items);
    }

UsersPartial View

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<LMS.Data.User>>" %>

<table>
    <tr>
        <th>
            <%: Html.DisplayNameFor(model => model.UserName) %>
        </th>
        <th>
            <%: Html.DisplayNameFor(model => model.FirstName) %>
        </th>
        <th>
            <%: Html.DisplayNameFor(model => model.LastName) %>
        </th>
        <th>
            <%: Html.DisplayNameFor(model => model.Password) %>
        </th>
        <th>
            <%: Html.DisplayNameFor(model => model.Email) %>
        </th>
        <th></th>
    </tr>

<% foreach (var item in Model) { %>
    <tr>
        <td>
            <%: Html.DisplayFor(modelItem => item.UserName) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.FirstName) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.LastName) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Password) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Email) %>
        </td>
        <td>
            <%: Html.ActionLink("Edit", "Edit", new { id=item.UserID }) %> |
            <%: Html.ActionLink("Details", "Details", new { id=item.UserID }) %> |
            <%: Html.ActionLink("Delete", "Delete", new { id=item.UserID }) %>
        </td>
    </tr>
<% } %>

</table>

Scripts section as rendered when running

        <script src="/Scripts/jquery-1.6.2.js" type="text/javascript"></script>

        <script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

        <script src="/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>

        <script src="/Scripts/jquery.easytabs.min.js" type="text/javascript"></script>
<script src="/Scripts/script.js" type="text/javascript"></script>

Any ideas?? I really want to give MVC a worthwhile shot here, but it’s not being very nice to me.

Answer 1

This renders NOTHING. It will not render it on the page.

That’s because the correct syntax is the following:

<%= Ajax.ActionLink("Manage Sections", "tabsUsers", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "tabs-users", InsertionMode = InsertionMode.Replace }) %>

As a long time WebForms user finishing things at 8am you should have know that <%= is used to output the result to the response whereas <% and a ; at the end simply executes the command on the server without outputting anything.