开发者

jQuery ui Dialog with PartialView will not validate (MVC3)

开发者 https://www.devze.com 2023-03-13 17:12 出处:网络
Can someone please help me. I cannot get my jQuery ui-dialog to validate. I have tried to find a solution on this site and countless others but although everyone seems to have some sort of solution, I

Can someone please help me. I cannot get my jQuery ui-dialog to validate. I have tried to find a solution on this site and countless others but although everyone seems to have some sort of solution, I cannot get any of them to work. I understand that it can sometimes be difficult to describe a problem so I have written a complete application that contains the minimum necessary to hopefully make things clear. In the VIEW, there is an alert("saved"); which I do not want to see as the Dialog should prevent this getting that far. Any suggestions will be most gratefully received.

CONTACTMESSAGE

using System.ComponentModel.DataAnnotations;

namespace TestValidation.Models
{
  public class ContactMessage
  {
    [Required(ErrorMessage = "Message is Requried")]
    public string Message { get; set; }
  }
}

CONTROLLER:

    namespace TestValidation.Controllers
    {
      public class HomeController : Controller
      {
        public ActionResult Index()
        {
          return View();
        }

        public ActionResult Edit()
        {
          return PartialView("MessageForm", 
            new ContactMessage{Message="Test"});
        }

        public ActionResult Save()
        {
          return Content("Saved");
        }
      }
    }

VIEW:

@model TestValidation.Models.ContactMessage
@{
  Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <title>ViewPage1</title>
  <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="Stylesheet" type="text/css" />
  <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
</head>
<body>
  <a href="#" id="editButton">Dialog</a>
  <div id="Placeholder" title=""></div>
</body>
</html>
<script type="text/javascript">

  $(function () {

    $("#Placeholder").dialog({
      autoOpen: false, width: 400, height: 330, modal: true,
      buttons: {
        "Save": function () {
          $.post("/Home开发者_如何学C/Save",
                 $("#EditForm").serialize(),
                 function (data) {
                   alert("saved");
                   $("#Placeholder").dialog("close");
                 });
        },
        Cancel: function () { $(this).dialog("close"); }
      }
    });

    $("#editButton").click(function () {
      $("#Placeholder").html("")
                .dialog("option", "title", "Edit Message")
                .load("/Home/Edit/", function () {
                  $("#Placeholder").dialog("open");
                });

    });
  });

</script>

PARTIAL VIEW:

@model TestValidation.Models.ContactMessage
<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"></script>
@using (Html.BeginForm("null", "null", FormMethod.Post, new { id = "EditForm" }))
{
  @Html.ValidationSummary(true)

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


just after loading form into DOM do this

jQuery.validator.unobbstrusive.parse(jQuery('#EditForm'));
0

精彩评论

暂无评论...
验证码 换一张
取 消