Question

Im trying to validate a popup in my ASP.net MVC 3 application. Ive searched the web for a solution, but have yet to get any of them to work.

I have the following, very simple model:

public class Player
{
    public int playerId { get; set; }

    [Required]
    [Range(0, 99)]
    public int number { get; set; }

    [DisplayName("First Name")]
    [Required]
    [StringLength(15)]
    public string firstName { get; set; }

    [DisplayName("Last Name")]
    [Required]
    [StringLength(15)]
    public string lastName { get; set; }

    [Required]
    public float battingAverage { get; set; }
}

I then have the following view which takes a list of players. Here i’m using a Jquery popup to create or edit a player. The player is then appended to the list in this view.

 @model IEnumerable<PlayingWithJSON.Models.Player>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
  <div id="PlayerListBlock"></div>
  <span class="AddLink ButtonLink">Add New Player</span>
  <div id="PlayerDialog" title="" class="Hidden"></div>

<script type="text/javascript">
    $(function () {
      $("#PlayerDialog").dialog(
      {
          autoOpen: false, width: 400, height: 500, modal: true,
          buttons:
              {
                  "Save": function () {
                      if ($("#PlayerForm").valid()) {
                          $.post("/Player/Save",
                                  $("#PlayerForm").serialize(),
                                  function (data) {
                                      $("#PlayerDialog").dialog("close");
                                      $("#PlayerListBlock").html(data);
                                  }
                                );
                      }
                  },
                  Cancel: function () { $(this).dialog("close"); }
              }
    });
    $(".EditLink").live("click", function () {
        var id = $(this).attr("playerid");
        $("#PlayerDialog").html("")
            .dialog("option", "title", "Edit Player")
            .load("/Player/Edit/" + id, function () { $("#PlayerDialog").dialog("open"); });
    });
    $(".AddLink").click(function () {
        $("#PlayerDialog").html("")
            .dialog("option", "title", "Add Player")
            .load("/Player/Create", function () { $("#PlayerDialog").dialog("open"); });
    });
    LoadList();
});
function LoadList() {
    $("#PlayerListBlock").load("/Player/List");
}
</script>

Below is the partial view which corresponds to the popup that allows me to create and edit a player.

@model PlayingWithJSON.Models.Player

@using(Html.BeginForm("Save", "Player", FormMethod.Post, new { id = "PlayerForm" })) 
{
    @Html.ValidationSummary(true)
    @Html.Hidden("playerId")
    <label class="Number">
        <span>Number</span><br />
        @Html.TextBoxFor(x => x.number)<br />
        @Html.ValidationMessageFor(x => x.number)
    </label>
    <label class="FirstName">
        <span>First Name</span><br />
        @Html.TextBoxFor(x => x.firstName)
        @Html.ValidationMessageFor( x => x.firstName )
    </label>
    <label class="LastName">
        <span>Last Name</span>
        @Html.TextBoxFor(x => x.lastName)
        @Html.ValidationMessageFor( x => x.lastName )
    </label>
    <label class="BattingAverage">
        <span>Batting Average</span>
        @Html.TextBoxFor(x => x.battingAverage)
        @Html.ValidationMessageFor( x => x.battingAverage )
    </label>
}
    <script type="text/javascript">
        $(function () {
            $.validator.unobtrusive.parse("PlayerForm");
        });
    </script>

At the bottom of this form I’ve added a call to validator.unobtrusive.parse, but have yet to get that to work.

Here is the save method in the controller:

[HttpPost]
public ActionResult Save(Player player)
{
    if (ModelState.IsValid)
    {
        //Save Stuff
        baseBall.Players.Add(player);
        baseBall.SaveChanges();
        return PartialView("List", baseBall.Players.ToList());
    }
    else
        return PartialView("PlayerForm", player);
}

When I hit the “save” button on the popup, none of the client side validation occurs. The jquery I’ve written so far works fine, but how to I include validation? I’ve read validation belongs in the partial, but i’ve also read validation belongs in the “main view”. What i’m hoping someone can do is show me how to correctly validate the content in the popup.

Answer 1

You need to add the $.validator.unobtrusive.parse("PlayerForm"); to a function that you call on successful display of the dialog box. You are currently putting it in document.ready, which isn’t called at the point because the page has already been loaded. In my application I am opening the dialogs from Ajax.ActionLink, so I put it in the OnSuccess callback of the link. I am not 100% sure where you need to put it in your application, but I hope this gives you enough to go on to resolve the issue.