ненавязчивая проверка в jQuery popup


Я пытаюсь проверить всплывающее окно в моем ASP.net приложение MVC 3. Я искал в Интернете решение, но еще не получил ни одного из них, чтобы работать.

У меня есть следующая, очень простая модель:

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; }
}

Затем у меня есть следующее представление, которое принимает список игроков. Здесь я использую всплывающее окно Jquery для создания или редактирования плеера. Затем игрок добавляется к списку в этом представлении.

 @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>

Ниже приведен частичный вид, который соответствует всплывающему окну, позволяющему мне создать и редактировать плеер.

@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>

В нижней части этой формы я добавил вызов валидатора.ненавязчивый.разбирайте, но еще не заставили это работать.

Вот метод сохранения в контроллере:

[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);
}

Когда я нажимаю кнопку "Сохранить" во всплывающем окне, проверка на стороне клиента не выполняется. Jquery, который я написал до сих пор, работает нормально,но как включить проверку? Я прочитал, что валидация принадлежит частичному представлению, но я также прочитал, что валидация принадлежит "главному представлению". Что я такое надеюсь, что кто-то может сделать это показать мне, как правильно проверить содержимое во всплывающем окне.

1 2

1 ответ:

Необходимо добавить $.validator.unobtrusive.parse("PlayerForm"); в функцию, вызываемую при успешном отображении диалогового окна. В данный момент вы помещаете его в document.ready, который не вызывается в данный момент, потому что страница уже загружена. В моем приложении я открываю диалоги из Ajax.ActionLink, поэтому я помещаю его в OnSuccess обратный вызов ссылки. Я не уверен на 100%, где вы должны поместить его в своем приложении,но я надеюсь, что это даст вам достаточно, чтобы решить эту проблему.