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?

Nic · Accepted Answer · 2014-02-27 09:17:14Z

5

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.

edited Feb 27, 2014 at 9:17

answered Feb 27, 2014 at 8:47

Nic

1,0893 gold badges20 silver badges44 bronze badges

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

Comments

Ashwini Verma · Accepted Answer · 2014-02-27 06:48:27Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related