Sometimes you don’t have time to write javascript code, and if like me you don’t want to use microsoft ajax, you’ll end up creating a basic form.
It would be nice to have the equivalent of Ajax.BeginForm( ) but using the jQuery library.
Well now you have it.
Usage
Add the jquery ajaxform plugin to your site
See http://jquery.malsup.com/form/
In a partial control (called DemoAjaxForm here), add your form
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DemoFormModel>" %>
<%@ Import Namespace="Mvc.Extensions" %>
<% using(Html.UpdatePanel( "demoFormPost","home" ) ) { %>
first name : <%: Html.EditorFor(m => m.FirstName) %> <%: Html.ValidationMessageFor(m => m.FirstName) %><br />
friend first name : <%: Html.EditorFor(m => m.FirstNameOfFriend) %> <%: Html.ValidationMessageFor(m => m.FirstNameOfFriend)%><br />
<br />
<% if(Model.PercentMatch.HasValue) { %>
<div style="font-weight: bold; text-align: center; font-size: x-large">LOVE MATCH <%: Model.PercentMatch %>%</div>
<br />
<% } %>
<div><%: Html.ValidationSummary(true) %></div>
<input type="submit" style="border: 1px solid #333" />
<% } %>
On your home controller, add this demoFormPost action
you can mark this action with [HttpPost] (you should)
public ActionResult DemoFormPost(DemoFormModel model)
{
if (ModelState.IsValid)
{
model.FirstName.Trim();
model.FirstNameOfFriend.Trim();
model.CalcLoveMatch();
}
else
ModelState.AddModelError("", "Fill all fields mark with a star");
return PartialView("DemoAjaxForm", model);
}
The model
public class DemoFormModel
{
[Required(ErrorMessage="*")]
[StringLength(20, ErrorMessage = "Max 20 caractères")]
public string FirstName { get; set; }
[Required(ErrorMessage = "*")]
[StringLength(20, ErrorMessage = "Max 20 caractères")]
public string FirstNameOfFriend { get; set; }
public int? PercentMatch;
public void CalcLoveMatch()
{
PercentMatch = new Random().Next(0,100);
}
}
Full code of the UpdatePanel Html helper
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Web.Routing;
namespace Mvc.Extensions {
public static partial class HtmlExtensions
{
public static MvcUpdatePanel UpdatePanel(this HtmlHelper html, string action, string controller,
object routeValues = null, object htmlAttributes = null)
{
return new MvcUpdatePanel(html, action, controller, routeValues, htmlAttributes);
}
}
public class MvcUpdatePanel : IDisposable
{
readonly MvcForm _form;
readonly TextWriter _writer;
bool _disposed;
public MvcUpdatePanel(HtmlHelper html, string action, string controller, object routeValues,
object htmlAttributes)
{
_writer = html.ViewContext.Writer;
RouteValueDictionary dicRouteValues = new RouteValueDictionary(routeValues);
IDictionary<string,object> dicHtmlAttributes = new RouteValueDictionary(htmlAttributes);
string formId;
object oFormId;
if (dicHtmlAttributes.TryGetValue("id", out oFormId))
formId = oFormId as string;
else
{
formId = GenerateFormId();
dicHtmlAttributes.Add("id", formId);
}
//Render scripts
RenderScripts(formId);
//Render form
_form = html.BeginForm(action, controller, dicRouteValues, FormMethod.Post, dicHtmlAttributes);
}
#region private
private static string GenerateFormId()
{
return "mup" + new Random().Next(0, 1000000);
}
private void RenderScripts(string formId)
{
var tagBuilder = new TagBuilder("div");
tagBuilder.MergeAttribute("id", formId+"div");
_writer.Write(tagBuilder.ToString(TagRenderMode.StartTag));
tagBuilder = new TagBuilder("script");
tagBuilder.MergeAttribute("type", "text/javascript");
_writer.Write(tagBuilder.ToString(TagRenderMode.StartTag));
const string script = @"
$(function(){{
$('#{0}').ajaxForm({{ target: '#{1}' }});
}});";
_writer.Write(String.Format(CultureInfo.InvariantCulture, script, formId, formId + "div"));
_writer.Write(tagBuilder.ToString(TagRenderMode.EndTag));
}
#endregion
#region IDisposable Members
/// <summary>
/// Render end of form
/// </summary>
public void Dispose()
{
Dispose(true /* disposing */);
GC.SuppressFinalize(this);
}
protected virtual void Dispose(bool disposing)
{
if (!_disposed)
{
_disposed = true;
_form.Dispose();
_writer.Write("</div>");
}
}
#endregion
}
}