Show model errors in client side without postback

Question

I have created a form using asp.net mvc with service layer to validate business logic without model validation using Data Annotations.

This is my code in the service class for validation

public class TutorService : ITutorService       
{
    private ModelStateDictionary modelstate;
    private ITutorRepository repository;

    public TutorService(ModelStateDictionary modelstate, ITutorRepository repository)
    {
        this.modelstate = modelstate;
        this.repository = repository;

    }

    //Validation Logic
    protected bool Validate(Tutor tutor)
    {

        if (tutor.FirstName==null)
            modelstate.AddModelError("FirstName", "First Name is required.");

        if (tutor.LastName == null)
            modelstate.AddModelError("LastName", "Last Name is required.");

        return modelstate.IsValid;
    }

    public bool CreateTutor(Tutor tutor)
    {
        if (Validate(tutor))
        {
            try
            {
                repository.CreateTutor(tutor);
                return true;
            }
            catch
            {
                return false;
            }

        }
        else
        {
            return false;
        }
    }

    public IEnumerable<Tutor> ListTutors()
    {
        return repository.ListTutors();
    }
}

public interface ITutorService
{
    bool CreateTutor(Tutor productToCreate);
    IEnumerable<Tutor> ListTutors();
}

this method use for validate the model. In this mechanism client side validation does not work. When click the submit button it post back and display error messages. But I want to display error messages without post backing. I have already added

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

to BundleConfig.cs and

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

to Web.config file.

This Is Tutor Create View :

@model MvcApplication7.Models.DB.Tutor

@{
    ViewBag.Title = "Create";
 }

 <h2>Create</h2>

@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
    <legend>Tutor</legend>

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

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

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

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

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

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

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

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

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

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

    <p>
        <input type="submit" value="Create" />
    </p>
  </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Tutor Class :

 public partial class Tutor
{
    public Tutor()
    {
        this.Examinations = new HashSet<Examination>();
    }

    public decimal TutorID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string Address3 { get; set; }
    public string Tel1 { get; set; }
    public string Tel2 { get; set; }
    public string EMail { get; set; }
    public string Password { get; set; }
    public Nullable<bool> IsConfirmed { get; set; }

    public virtual ICollection<Examination> Examinations { get; set; }
}

Where is your property data annonation, you are validating using service. — Amit, Apr 29 '14 at 12:15
I don't use any data annotation attribute to validate inside model. Tutor class is plain class generated by EF and it contains only FirstName, LastName and some other properties without data annotation. — Sithira Pathmila, Apr 29 '14 at 12:23
Decorate your `FirstName` and `LastName` properties in Tutor class with `[Required]` attribute and give it a try. — Karthik Chintala, Apr 29 '14 at 13:00
When I add [Required] annotation to that attributes it will flush out when edmx model change and I want to add model errors separately. In my approach successfully display error messages in error labels but it is postbacking. It is the problem. — Sithira Pathmila, Apr 29 '14 at 13:06
I did this program using this tutorial. this is the approach how im doing this program. http://www.asp.net/mvc/tutorials/older-versions/models-(data)/validating-with-a-service-layer-cs But in this approach client side validation does not working. — Sithira Pathmila, Apr 29 '14 at 13:11

score 0 · Answer 1 · answered Apr 29 '14 at 12:22

0

maybe help

Install-Package jQuery.Validation.Unobtrusive

answered Apr 29 '14 at 12:22

AiSatan

158
2
10

added Attribute tutor.FirstName [Remote("Action", "Controller")] ? – AiSatan Apr 29 '14 at 12:36
just below the answer to your question – AiSatan Apr 29 '14 at 13:30

score 0 · Answer 2 · answered Apr 29 '14 at 13:24

I think you can use MetadataType data annotation to generate the second class for Tutor.

Basically EF generates Tutor as a partial class and you can create another class within the same namespace with data annotations.

Here is what it takes to look like

namespace MVCApplication
{
    [MetadataType(typeof(TutorMetaData))]//<- Just adding this class level attribute does the job for us.
    public partial class Tutor
    {
        public Tutor()
        {
            this.Examinations = new HashSet<Examination>();
        }

        public decimal TutorID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Address1 { get; set; }
        public string Address2 { get; set; }
        public string Address3 { get; set; }
        public string Tel1 { get; set; }
        public string Tel2 { get; set; }
        public string EMail { get; set; }
        public string Password { get; set; }
        public Nullable<bool> IsConfirmed { get; set; }

        public virtual ICollection<Examination> Examinations { get; set; }
    }

    public class TutorMetaData
    {
        public Tutor()
        {
            this.Examinations = new HashSet<Examination>();
        }

        public decimal TutorID { get; set; }
        [Required] //<-- use as many annotations as you like
        public string FirstName { get; set; }
        [Required] //<-- use as many annotations as you like
        public string LastName { get; set; }
        public string Address1 { get; set; }
        public string Address2 { get; set; }
        public string Address3 { get; set; }
        public string Tel1 { get; set; }
        public string Tel2 { get; set; }
        public string EMail { get; set; }
        public string Password { get; set; }
        public Nullable<bool> IsConfirmed { get; set; }

        public virtual ICollection<Examination> Examinations { get; set; }
    }
}

Hope it helps.

In some cases one attributes uses more than one view with more than one error message to same annotation (for example : Create view display one error message and Edit view display another error message to same annotation) . I think this approach is not the best. And [MetadataType(typeof(TutorMetaData))] code also flushing out when edmx change. — Sithira Pathmila, Apr 29 '14 at 13:36

score 0 · Answer 3 · answered Aug 21 '17 at 20:21

change bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); to

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*",
                "~/Scripts/jquery.unobtrusive*"));

Show model errors in client side without postback

3 Answers3