-1

I have a class 'YogaSpaceOverview' here with a title property that has a required attribute. My problem! When I pass in a title that's blank "", nothing happens, it doesn't get saved to the db, but no error or exception is thrown from the '[required]' attribute like it should. NOTE - there is no form submit and I'm doing everything in a jquery .post. Is my only option to check in jquery if there is a value and if not throw a error message and not save to db?? What are my options here? I thought there would be more options for using server side and client side validation with asp mvc!

public class YogaSpaceOverview
{
    [Required]
    [MaxLength(35, ErrorMessage = "Title cannot be greater then 35 characters.")]
    public string Title { get; set; }
    //other members left out for space saving
}

I have a page that allows you to edit the title, but there is no form submit, the saving takes place with a jQuery .change() event like below.

$('#Overview_Title').change(function() {
  var id = $(this).data('id');
  var url = $(this).data('url');
  var title = $(this).val();
  $.post(url, {
      ID: id,
      Title: title
    }, function(data) {
      // do something with the returned value e.g. display a message?
      //        // for example - if(data) { // OK } else { // Oops }
      //alert("success");
      $("#successmessage").show().delay(5000).fadeOut();
    })
    .fail(function() {
      alert("error");
    });
});
<div id="overview">
  <div class="form-group">
    @Html.LabelFor(model => model.Overview.Title, new { @class = "control-label" }) @Html.EditorFor(model => model.Overview.Title, new { htmlAttributes = new { @class = "form-control", data_id = Model.YogaSpaceId, data_url = Url.Action("UpdateTitle", "ManageSpaces")
    } }) @Html.ValidationMessageFor(model => model.Overview.Title, "", new { @class = "text-danger" })
  </div>
  <div class="form-group">
    @Html.LabelFor(model => model.Overview.Summary, new { @class = "control-label" }) @Html.EditorFor(model => model.Overview.Summary, new { htmlAttributes = new { @class = "form-control", data_id = Model.YogaSpaceId, data_url = Url.Action("UpdateSummary",
    "ManageSpaces") } }) @Html.ValidationMessageFor(model => model.Overview.Summary, "", new { @class = "text-danger" })
  </div>
</div>

Update title looks like this in C#

[HttpPost]
public ActionResult UpdateTitle(int id, string title)
{
    //update database
    YogaSpace yogaSpace = yogaSpaceRepository.Find(id);
    yogaSpace.Overview.Title = title;
    yogaSpaceRepository.InsertOrUpdate(yogaSpace);
    yogaSpaceRepository.Save();

    return Json(true); // don't return view because it gets refreshed
}

I can get the yogaspace and pass it to insertorupdate which looks like this.

public void InsertOrUpdate(YogaSpace yogaSpace)
{
    if (yogaSpace.YogaSpaceId == default(int))
    {
        context.Entry(yogaSpace).State = System.Data.Entity.EntityState.Added;
    }
    else
    {
        context.Entry(yogaSpace).State = System.Data.Entity.EntityState.Modified;
    }
}
Jon Skeet
  • 1,421,763
  • 867
  • 9,128
  • 9,194
chuckd
  • 13,460
  • 29
  • 152
  • 331

1 Answers1

0

Since you are doing this with ajax, the client doesn't have any way to know your property is Required. This is working as expected - the server sees your model is invalid so the record doesn't get saved.

You'll need to check the value on the client-side yourself and tell the user it is required.

Jack
  • 8,851
  • 3
  • 21
  • 26