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