使用弹出窗口显示验证消息

时间:2015-03-09 07:45:19

标签: asp.net-mvc

我在mvc 4中使用弹出菜单进行注册表单。问题是所有验证都在另一个页面中执行。但验证仅在弹出窗口中进行。

1 个答案:

答案 0 :(得分:0)

这是一个使用带引导模式的Ajax.BeginForm()的简单示例:

注意:请记住添加

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

你的控制器:

  public ActionResult Edit()
  {
     return View(new QuestionMaster());
  }

  [HttpPost]
  public ActionResult Edit(QuestionMaster question2)
  {
     if (!ModelState.IsValid)
     {
        return View(question2);
     }
     return RedirectToAction("Index");

  }

您的观看代码:

  @model MVCApp.Controllers.QuestionMaster
  <div id="replaceDiv">
     @using (Ajax.BeginForm(null, new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "replaceDiv", OnSuccess = "$('#myModal').modal('show');" }))
     {
        <fieldset>
           <legend>QuestionMaster</legend>
           <div class="editor-label">
              @Html.LabelFor(model => model.Question)
           </div>
           <div class="editor-field">
              @Html.EditorFor(model => model.Question)
           </div>
        </fieldset>
        <p>
           <input type="submit" value="Save" />
        </p>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
           <div class="modal-dialog">
              <div class="modal-content">
                 <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                 </div>
                 <div class="modal-body">
                    @Html.ValidationMessageFor(model => model.Question)
                 </div>
                 <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                 </div>
              </div>
           </div>
        </div>
     }
  </div>