Question

I am having problems with an Ajax/jQuery postback in ASP.NET MVC 3.

• If validation fails on the code below, the expected result is given and the form does not post.
• If validation succeeds, the function below is not hit upon form submission and the form submits and returns a json file to the browser.

If anybody could shed some light on this, I’d appreciate it.

I’ve included my partial, view and controller below.

My View

@model TheLayer.EF.NoteAddPartial

@{using (Html.BeginForm("Create", "Note", new { area = "" }, FormMethod.Post, new { id = "noteAdd" }))
{ 

@Html.TextAreaFor(m => m.Note_Text, new { @class = "note-input"  })  //note-input
@Html.ValidationMessageFor(model => model.Note_Text)     

<input type="submit" value="Send" /> 

}}

My client side script (within the view)

<script type="text/javascript">

$(function () {

    $('#noteAdd').submit(function (e) {

        e.preventDefault();

        if ($(this).valid()) {
            alert('posting');
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('An error occured when processing this request:\r\n\r\n' + thrownError);
                },
                success: function (result) {
                    alert(result.s);
                }
            });
        }
        return false;
    });
});

My Controller

public class NoteController : Controller
{
    [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult Create(NoteAddPartial model)
    {
        try
        {
            NoteMethods.CreateLeadNote(model.Note_Text, SessionManager.Current.ActiveUser.Username, model.ItemId, SessionManager.Current.ActiveUser.Company);
            return Json(new { s = "Success" });
        }
        catch (NoPermissionException)
        {
            return Json(new { s = "No permission" }); 
        }

    }
}

My Partial

namespace XX
{
/// <summary>
/// Partial lead person view
/// </summary>
[MetadataType(typeof(NoteAddPartial_Validation))]
public partial class NoteAddPartial
{
    public string Note_Text { get; set; }
    public int? Source { get; set; }
    public string Username { get; set; }
    public int ItemId { get; set; }
    public int TypeId { get; set; }

}
public class NoteAddPartial_Validation
{

    [Required]
    public string Note_Text { get; set; }

    [HiddenInput(DisplayValue = false)]
    public int ItemId { get; set; }

    [HiddenInput(DisplayValue = false)]
    public int TypeId { get; set; }

}
}

Answer 1

did you add client side validation libraries?

jquery.validate.min.js

jquery.validate.unobtrusive.min.js

NOTE :

If you configured you app not to work with unobtrusive validation, you
do not need to reference the second library.