Проверка на стороне клиента диалогового окна JQuery на Требуется !! поля с asp.net mvc2

Я загрузил форму динамически в диалоговое окно jquery ui. Теперь я хочу добавить в это диалоговое окно проверку на стороне клиента. Я пробовал блог Скотта Гу, и он работает хорошо, но не влияет на диалог (нет сообщения об ошибке «Требуется заголовок», когда я использую форму в диалоговом окне), когда я просто использую обычный URL. Я пробовал jquery.validate с правилами и сообщениями, аналогичными ответу на вопрос "Проверка на стороне клиента Mvc2" в модальном диалоговом окне JQuery? и это по-прежнему не показывает ничего другого в диалоговом окне, и когда я нажимаю кнопку отправки, он все еще говорит об успешном. (Я уверен, что я на правильном пути с этим)

Я могу манипулировать вспомогательными классами, чтобы предотвратить запись большей максимальной длины, но минимальную длину и требуемые поля данных, с которыми я борюсь. Я пробовал использовать все javascripts, о которых я мог думать, как MvcJQueryValidation, но все равно ничего.

Пожалуйста, помогите кому-нибудь, спасибо


user-interface validation jquery client-side asp.net-mvc-2
person porps89    schedule 28.06.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот пример того, как вы можете действовать. Как всегда, начнем с модели представления, которая будет представлять данные формы внутри партиала:

public class MyViewModel
{
    [Required]
    public string Foo { get; set; }
    public string Bar { get; set; }
}

Затем контроллер:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Dialog()
    {
        return PartialView(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Dialog(MyViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return View(model);
        }

        // TODO: the model is valid => process ...
        return Json(new { success = "thanks for submitting" });
    }
}

и, наконец, взгляды.

~/Views/Home/Index.aspx:

<%@ Page 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script type="text/javascript" src="<%: Url.Content("~/scripts/jquery-1.4.1.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/scripts/jquery-ui-1.8.11.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/scripts/MicrosoftAjax.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/scripts/MicrosoftMvcValidation.js") %>"></script>
<script type="text/javascript">
    $(function () {
        $('#show').click(function () {
            $('#dialog').load(this.href, function (result) {
                Sys.Mvc.FormContext._Application_Load();
                $('#myForm').submit(function () {
                    if (!Sys.Mvc.FormContext.getValidationForForm(this).validate('submit').length) {
                        $.post(this.action, $(this).serialize(), function (data) {
                            if (data.success) {
                                alert(data.success);
                                $('#dialog').dialog('close');
                            } else {
                                $('#dialog').html(data);
                            }
                        });
                    }
                    return false;
                });
            }).dialog({ autoOpen: true });
            return false;
        });
    });
</script>

<%= Html.ActionLink("Show jquery dialog", "Dialog", null, new { id = "show" })%>

<div id="dialog"></div>

</asp:Content>

и, наконец, частичное (~/Views/Home/Dialog.ascx):

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.MyViewModel>" %>

<% Html.EnableClientValidation(); %>

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" })) { %>
    <div>
        <%= Html.EditorFor(x => x.Foo)%>
        <%= Html.ValidationMessageFor(x => x.Foo) %>
    </div>
    <div>
        <%= Html.EditorFor(x => x.Bar)%>
        <%= Html.ValidationMessageFor(x => x.Bar) %>
    </div>
    <input type="submit" value="OK" />
<% } %>

Важная часть происходит, когда диалог загружается и форма вводится в DOM => вам нужно повторно проанализировать правила проверки, используя метод Sys.Mvc.FormContext.getValidationForForm.

person Darin Dimitrov    schedule 28.06.2011