2

我试图在我的 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 的调用,但尚未使其正常工作。

这是控制器中的保存方法:

[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 工作正常,但是如何包含验证?我读过验证属于部分,但我也读过验证属于“主视图”。我希望有人能做的是向我展示如何正确验证弹出窗口中的内容。

4

1 回答 1

7

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.

于 2012-07-17T17:01:02.277 回答