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>
このフォームの一番下に、validator.unobtrusive.parse への呼び出しを追加しましたが、まだ機能していません。
コントローラーの save メソッドは次のとおりです。
[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 は正常に動作しますが、検証を含めるにはどうすればよいですか? 検証が部分的に属していることを読みましたが、検証が「メインビュー」に属していることも読みました。誰かができることを望んでいるのは、ポップアップのコンテンツを正しく検証する方法を教えてくれることです。