JQuery UI Диалоговая форма и ASP.NET MVC

Question

Я не совсем уверен, что это лучший способ выразить это, однако у меня возникли небольшие проблемы с определением того, как этого добиться. У меня есть страница с формой для редактирования информации о пользователе.

Сама страница находится на / User / Edit / 1234, где 1234 - номер сотрудника.

На этой странице есть ссылка для сброса пароля, которая открывает следующее диалоговое окно jQuery UI.

<div id="dialog-confirm" title="Are you sure?">
    <form name="passReset" id="passReset" action="/User/Reset/<%=Html.ViewData("EmployeeNumber")%>" method="post">
    <div id="reset1"><%=Html.ViewData("Name")%>'s password will be reset to 11111. You need to notify them that 
    they will need to change their password immediately or the account will be locked out. <br /> <br />
    If you are sure you wish to proceed. Type the word <b>"YES"</b> in the box below and click OK.

        <div align="center">
            <%=Html.ValidationMessage("confirmResetText")%>
            <input type="text" id="confirmResetText" style="width: 45px;"/><input type="submit" value="OK" />
        </div>
    </div>
    </form>     
</div>

То, что я хотел бы сделать, это отправить эту форму в действие (в данном случае / user / reset / 1234) и вернуть результат (сообщение об успешном завершении, неудаче или проверке) в диалоговое окно, не покидая страницу .

Код действия, которое у меня есть, будет делать то, что я выполняю, если я отправляю обратно на то же действие, что и страница, но это не так, и я застрял здесь.

Код, который у меня есть:

<AcceptVerbs(HttpVerbs.Post)> _
Function Reset(ByVal employee As String, ByVal collection As FormCollection)

    If ModelState.IsValid Then

        If collection("confirmResetText") <> "Yes" Then
            ModelState.AddModelError("confirmResetText", "You didn't enter 'YES'.")
        End If
        'if data doesn't pass all rules, take them back to the form
        If (Not ModelState.IsValid) Then
            Return View(collection)
        End If
        ModelState.SetModelValue("confirmResetText", New ValueProviderResult(ValueProvider("confirmResetText").AttemptedValue, collection("confirmResetText"), System.Globalization.CultureInfo.CurrentCulture)) 'First Name
        Dim myArea = (From a In db.secUserInfos _
                         Where a.EmployeeNumber = User.Identity.Name.ToString).SingleOrDefault

        Dim uEditable As secUserInfo = gsecRepository.CheckIfUserCanBeEdited(employee, myArea.AreaID).SingleOrDefault

        'check if user can be edited by you.
        If uEditable Is Nothing Then
            Return Redirect("/Home")
        Else
            Try
                db.aspnet_Membership_SetPassword("/", employee, "11111", "11111", DateTime.Now, 0)
            Catch ex As Exception
                Response.Write(ex.Message)
            End Try

            Return Redirect("/User/Edit/" & employee)
        End If
    End If


End Function

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

Любая помощь очень ценится.

Answer 1

Вы можете использовать Json для этого, и на самом деле это не так сложно, используя asp.net mvc. Давайте соединим некоторые вещи.

Первый html:

<a href="#" id="dialogpopup">Change password</a>

    <div id="dialog-confirm" title="Are you sure?">
        <form name="passReset" id="passReset" method="post">
        <div id="reset1">Your's password will be reset to 11111. You need to notify them that 
        they will need to change their password immediately or the account will be locked out. <br /> <br />
        If you are sure you wish to proceed. Type the word <b>"YES"</b> in the box below and click OK.

        <div id="confirmResetTextMessage"></div> 

            <div align="center">                               
                <input type="text" name="confirmResetText" id="confirmResetText" style="width: 45px;"/>                
            </div>
        </div>
        </form>     
    </div>

Обратите внимание, что у нас есть ссылка (Изменить пароль), чтобы открыть диалоговое окно, и div с содержимым диалога. Также обратите внимание, как кнопка OK удаляется, мы собираемся использовать встроенную функциональность кнопки, которую jqueryui предоставляет для всплывающих диалогов.

Далее мы собираемся создать метод действия, который будет возвращать объект json, указывающий, в порядке ли предоставленный ответ (ДА):

public JsonResult Confirm(string confirmResetText)
        {
            if (confirmResetText != "YES")
                return Json(new ConfirmResult { OK = false, Message = "Confirm text should be yes" });

            return Json(new ConfirmResult { OK = true });
        }

        private class ConfirmResult
        {
            public bool OK { get; set; }

            public string Message { get; set; }
        }

Метод Json на контроллере преобразует ваш класс результатов в Json.

Наконец, есть JavaScript, который откроет диалог и обработает событие beforeclose. Он будет держать диалог открытым, если предоставленный текст не YES, в противном случае он закроет его. Также будет добавлена ​​кнопка закрытия, обработчик этой кнопки попытается закрыть диалоговое окно, что вызовет запуск обработчика события beforeClose.

<script type="text/javascript">
        $(InitDialog);

        function InitDialog() {
            $("#dialogpopup").click(OpenDialog);
        }

        function OpenDialog(eventObject) {
            var dialog = $('#dialog-confirm').dialog({
                autoOpen: false,
                buttons: { "Ok": function() { $(this).dialog("close"); } },
                beforeclose: function(event, ui) {
                    $.getJSON("/Home/Confirm", { confirmResetText: $("#confirmResetText").val() }, function(data, textStatus) {
                        var ok = data.OK;

                        if (!ok) {
                            $("#confirmResetTextMessage").text(data.Message);
                        }
                        else {
                            dialog.dialog("destroy");
                        }
                    });

                    return false;
                }
            });

            dialog.dialog("open");
        }
    </script>    

Соединение этих вещей даст вам опыт, который вы описали выше. Я надеюсь.

Answer 2

Я не программист asp, поэтому я не могу вам помочь, но я бы использовал jQuery-плагин формы , он использует ajax и имеет много опций