MVC3 Ajax.BeginForm with javascript disabled

Question

I'm having a problem getting a form to work without javascript being enabled.

This should be enough to go on, ask if you need to know anything else - I don't want to just put the whole solution up here!

~/Views/_ViewStart.cshtml:

@{ Layout = "~/Views/Shared/Layout.cshtml"; }

~/Views/Shared/Layout.cshtml:

@using System.Globalization; @{ CultureInfo culture = CultureInfo.GetCultureInfo(UICulture); }<!DOCTYPE html>
<html lang="@culture.Name" dir="@(culture.TextInfo.IsRightToLeft ? "rtl" : "ltr")">
<head>
  <title>AppName :: @ViewBag.Title</title>
  <link href="@Url.Content("~/favicon.ico")" rel="shortcut icon" type="image/x-icon" />
  <link href="@Url.Content("~/apple-touch-icon.png")" rel="apple-touch-icon" />  
  <link href="@Url.Content("~/Content/css/site.css")" rel="stylesheet" type="text/css" />
  <script src="@Url.Content("~/Content/js/jquery-1.6.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Content/js/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Content/js/jquery.validate.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Content/js/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Content/js/app.js")" type="text/javascript"></script>
  @RenderSection("SectionHead", false)
</head>
<body>
  <div id="page-container">
    <div id="nav">
      <div id="nav-user">
        @{ Html.RenderAction("LoginStatus", "Account"); }
        @{ Html.RenderPartial("CultureSelector"); }
      </div>
    </div>
    <div id="page-content">
      <h2>@ViewBag.Title</h2>
      @RenderBody()
    </div>
  </div>
</body>
</html>

~/Views/Account/Index.cshtml:

@model AccountFilterModel
@{ 
  ViewBag.Title = "Account Home";
  var loadingId = "loading" + new Random().Next();
  Model.FilterFormId = "filter-account-form";
}
@using (Ajax.BeginForm("List", "Account", Model, new AjaxOptions { UpdateTargetId = "result-list", LoadingElementId = loadingId }, new { id = "filter-account-form" })) {
  <!-- form controls and validation summary stuff -->
  <input id="filter" type="submit" value="Filter" />
  <span id="@loadingId" style="display: none">
    <img src="@Url.Content("~/Content/images/ajax-loader.gif")" alt="Loading..." />
  </span>
}
<div id="result-list">
  @{ Html.RenderAction("List", Model); }
</div>

~/Views/Account/List.cshtml:

@model FilterResultModel
@helper SortLink(AccountSort sort, SortDirection dir) {
  string display = (dir == SortDirection.Ascending ? "a" : "d"); // TODO: css here
  if (Model.Filter.SortBy != null && ((AccountSortModel)Model.Filter.SortBy).Sort == sort && dir == Model.Filter.SortOrder) {
    @:@display
  } else {
    FilterModel fm = new FilterModel(Model.Filter);
    fm.SortBy = AccountSortModel.SortOption[sort];
    fm.SortOrder = dir;
    <a href="@Url.Action("Index", "Account", fm.GetRouteValueDictionary())" onclick="@(string.Format("setFormValue('{0}', '{1}', '{2}'); setFormValue('{0}', '{3}', '{4}'); formSubmit('{0}'); return false;", Model.Filter.FilterFormId, Html.PropertyNameFor(x => x.Filter.SortOrder), dir, "AccountSort", sort))">@display</a>
  }
}

@if (Model.Results.Count > 0) {
  var first = Model.Results.First();
  <table>
    <caption>
      @string.Format(LocalText.FilterStats, Model.FirstResultIndex + 1, Model.LastResultIndex + 1, Model.CurrentPageIndex + 1, Model.LastPageIndex + 1, Model.FilteredCount, Model.TotalCount)
    </caption>
    <thead>
      <tr>
        <th>
          @Html.LabelFor(m => first.Username)
          <span class="sort-ascending">
            @SortLink(AccountSort.UsernameLower, SortDirection.Ascending)
          </span>
          <span class="sort-descending">
            @SortLink(AccountSort.UsernameLower, SortDirection.Descending)
          </span>
        </th>
        <!-- other table headers -->
      </tr>
    </thead>
    <tbody>
      @foreach (AccountModel account in Model.Results) {
        <tr>
          <td>@Html.EncodedReplace(account.Username, Model.Filter.Search, "<span class=\"filter-match\">{0}</span>")</td>
          <!-- other columns -->
        </tr>
      }
    </tbody>
  </table>
  Html.RenderPartial("ListPager", Model);
} else {
  <p>No Results</p>
}

Relevant part of AccountController.cs:

public ActionResult Index(AccountSort? accountSort, FilterModel model = null) {
  FilterModel fm = model ?? new FilterModel();
  if (accountSort.HasValue) fm.SortBy = AccountSortModel.SortOption[accountSort.Value];
  return View(fm);
}

public ActionResult List(AccountSort? accountSort, FilterModel model = null) {
  FilterModel fm = model ?? new FilterModel();
  if (accountSort.HasValue) fm.SortBy = AccountSortModel.SortOption[accountSort.Value];
  return Request.IsAjaxRequest() ? (ActionResult)PartialView("List", Service.Get(fm)) : View("Index", model);
}

With javascript enabled, this works fine - the content of div#result-list is updated as expected.

If I don't do the Request.AjaxRequest() and just return the PartialView, then with javascript disabled I get a page with just the content of the results on it. If I have the code as above, then I get a StackOverflowException.

How do I get this to work?

Solution

Thanks to @xixonia, I discovered the problem - here is my solution:

public ActionResult List(AccountSort? accountSort, FilterModel model = null) {
  FilterModel fm = model ?? new FilterModel();
  if (accountSort.HasValue) 
    fm.SortBy = AccountSortModel.SortOption[accountSort.Value];
  if (Request.HttpMethod == "GET")
    return PartialView("List", Service.Get(fm));
  if (Request.HttpMethod == "POST")
    return Request.IsAjaxRequest() ? (ActionResult) PartialView("List", Service.Get(fm)) : RedirectToAction("Index", model);
  return new HttpStatusCodeResult((int) HttpStatusCode.MethodNotAllowed);
}

slfan · Accepted Answer · 2012-01-19 16:07:41Z

2

You can use the following extension method to determine if the request is an ajax request

Request.IsAjaxRequest()

If it is, you can return a partial view, otherwise you can return a full view or redirect.

if(Request.IsAjaxRequest())
{
    return PartialView("view", model);
}
else
{
    return View(model);
}

edit: here's the problem:

The "List" is returning the "Index" view when the request is not an AJAX request:

public ActionResult List(AccountSort? accountSort, FilterModel model = null) {
  FilterModel fm = model ?? new FilterModel();
  if (accountSort.HasValue) fm.SortBy = AccountSortModel.SortOption[accountSort.Value];
  return Request.IsAjaxRequest() ? (ActionResult)PartialView("List", Service.Get(fm)) : View("Index", model);
}

The "Index" view is rendering the "List" action:

@{ Html.RenderAction("List", Model); }

AKA: Recursion.

You need to engineer a way to display your list without drawing the index page, or make your index page draw a partial view with your list modal as a parameter.

edited Jan 19, 2012 at 16:07

slfan

9,129115 gold badges69 silver badges81 bronze badges

answered May 9, 2011 at 4:12

cwharris

18.2k4 gold badges46 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

enashnash Over a year ago

Yes, I thought the same and I did try that, but I get a StackOverflowException because the initial GET isn't an ajax one (I assume) so it keeps trying to do a full-page response inside itself.

cwharris Over a year ago

Stack overflow exceptions usually occur when your layout uses Html.View or Html.RenderView on a view which requires a layout. This will cause a recursive render of the layout and the view... There's not enough information in this post to determine the cause of the Stack Overflow exception, but using Request.IsAjax is the correct way of doing what you're asking. Can you post the problem you're getting with the stack overflow exception and the layout, controller, action, etc? Let's solve the problem instead of trying to create a workaround.

Collectives™ on Stack Overflow

MVC3 Ajax.BeginForm with javascript disabled

Solution

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Solution

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related