Question

在使用了一些小型MVC应用程序之后，我开始从头开始研究新的MVC应用程序。我有一些功能在jQuery对话框中打开PartialView。此对话框允许用户添加某种新模型。它使用jQuery按钮存储，因此没有submitbutton。问题是，当模型无效时（例如，未填写必填字段），它会显示验证

简短的故事;对话框执行它需要做的事情，除了通过对话框按钮显示我的验证

在主要布局中，我有以下参考资料

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftMvcValidation.debug.js")"></script>

DropDownList和按钮的初始化

<label>Area: </label>@Html.DropDownListFor(m => m.SelectedArea.ID, new SelectList(Model.Areas, "ID", "Code", Model.SelectedArea.ID), new { @onchange = "this.form.submit();" }) <input type="button" onclick="openAreaPopup(false)" value="Area toevoegen" />
<div id="addAreaDialog" style="display: none;"></div>

然后，将以下内容放在标签内

<script type="text/javascript">
function openAreaPopup(updateArea) {
  if (!updateArea) {
    $("#addAreaDialog").dialog({
      autoOpen: false,
      title: 'Area toevoegen',
      width: 500,
      height: 'auto',
      modal: true,
      buttons: {
        "Opslaan": function () {
          var thisDialog = this;
          var form = $('form', this);
          if ($(form).validate().form()) {
            $.ajax({
              type: "POST",
              url: "Area/Create",
              dataType: "json",
              data: JSON.stringify($(form).serialize())
            }).success(function (data) {
              if (data.success == true) {
                $(thisDialog).dialog("close");
                window.location.assign(window.location);
              }
            });
          }
        },
        "Annuleren": function () {
          $(this).dialog("close");
        }
      },
      hide: {
        effect: "fade",
        duration: 250
      },
      open: function (event, ui) {
        $(this).load("/Area/Create");
        $(this).load(options.url, function () {
          var $jQval = $.validator;
          $jQval.unobtrusive.parse($(this));
        });
      }
    });
  }
}
</script>

区域模型

public class Area
{
private List<Location> _locations;

public int ID { get; set; }
[Required(ErrorMessage = "This is required")]
public string Code { get; set; }
public string Description { get; set; }
public List<Location> Locations
{
  get
  {
    return _locations ?? (_locations = new List<Location>());
  }
  set
  {
    _locations = value;
  }
}
}

控制器的代码：

[HttpGet]
public PartialViewResult Create()
{
  return PartialView();
}

//
// POST: /Area/Create
[HttpPost]
[ValidateInput(true)]
public ActionResult Create(FormCollection collection)
{
  var model = new Area();
  try
  {
    model.Code = collection["Code"];
    model.Description = collection["Description"].TrimEnd('\"');

    if (TryValidateModel(model))
    {
      // Area naar BLL sturen en opslaan
      _areaBLL.AddArea(ref model);
      return Json(new { success = true });
    }
    else
    {
      return PartialView();
    }
  }
  catch
  {
    return PartialView();
  }
}

最后是Create.cshtml的代码

@model PCLPro.Common.Models.Area

@using (Html.BeginForm())
{
  @Html.AntiForgeryToken()
  @Html.ValidationSummary(false, "De volgende velden zijn niet goed ingevuld")

<fieldset>
    <legend>Area</legend>

    <div class="editor-label">
  @Html.LabelFor(model => model.Code)
</div>
<div class="editor-field">
  @Html.EditorFor(model => model.Code)
  @Html.ValidationMessageFor(model => model.Code)
</div>

<div class="editor-label">
  @Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
  @Html.EditorFor(model => model.Description)
</div>

}

Answer 1

愚蠢的问题，但你是否添加了jquery参考资料？

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript">

我通常使用DataAnnotations，例如[Required]等。你能展示你的Area模型吗？

Answer 2

所以，谷歌搜索其他东西，我发现this post有我的问题的答案。由于它们是部分视图，我需要重新分析客户端不显眼的验证规则。

$('form').removeData('validator');
$('form').removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('form');

将其添加到我的对话框的open-function中可以解决我的问题。

jQuery对话框按钮不会触发ValidationSummary

2 个答案: