Ajax post a form (validation) in MVC AsP.net?

Question

So I have a page that have a few forms on it and one of those forms is a one for addresses which has three functions. Save as new, Update and Delete. I want to use form.submit() to fire the MVC validation on the client and server side but I dont want the entire page refresh.

So this is what I want to use the simple form.submit() to gather the elements and send it to the ASP.net MVC controller as a model and handle the validation based on the attributes I have on the model and use a callback to handle a JSON response to update only the affected area.

I know I could use jQuery to create an AJAX post request but I would have to handle everything, i.e. bind to the viewmodel, validation and create the request itself. Is there anyway I can get the best of both methods?

Answer 1

In MVC, once you validate Model data using DataAnnotations attributes you have already done with server side validation and then you can use jQuery.validation library to validate on client side.

Here you can use Ajax.BeginForm post where you utilize DataAnnotations validation with ajax post.

DataAnnotations attributes

   public class Movie {
    public int ID { get; set; }

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

    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

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

    [Range(1, 100)]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

jQuery.validation library

 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>    
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>    
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

Form with validation

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
   {
        <fieldset>
            <legend>Movie</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.Title)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Title)
                @Html.ValidationMessageFor(model => model.Title)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.ReleaseDate)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ReleaseDate)
                @Html.ValidationMessageFor(model => model.ReleaseDate)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Genre)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Genre)
                @Html.ValidationMessageFor(model => model.Genre)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Price)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Price)
                @Html.ValidationMessageFor(model => model.Price)
            </div>
            <div class="editor-label">
        @Html.LabelFor(model => model.Rating)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Rating)
        @Html.ValidationMessageFor(model => model.Rating)
    </div>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    }

Resource : http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-validation-to-the-model

Answer 2

Also do not forget in Post Method in Controller to check

if(ModelState.IsValid) 

because client side validation will not validate hidden fields also if you will use ctr+shift+i in any browser and you will delete an @Html.EditorFor(model => model.Price) client validation will not validate this attribute.