Question

我试图验证我的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工作正常，但如何包含验证？我读过验证属于partial，但我也读过验证属于“主视图”。我希望有人可以做的是告诉我如何正确验证弹出窗口中的内容。

Answer 1

您需要将$.validator.unobtrusive.parse("PlayerForm");添加到成功显示对话框时调用的函数。您当前正在将其放入document.ready，因为页面已经加载，所以此时不会调用它。在我的应用程序中，我将从Ajax.ActionLink打开对话框，因此我将其放在链接的OnSuccess回调中。我不是100％确定你需要把它放在你的应用程序中，但我希望这足以让你继续解决这个问题。

在jquery弹出窗口中进行不显眼的验证

1 个答案: