Formulaire de dialogue jQuery UI et ASP.NET MVC

Question

Je ne suis pas tout à fait sûr si c'est la meilleure façon de le dire, cependant, j'ai un peu de mal à savoir comment atteindre. Ce que j'ai est une page avec un formulaire pour éditer les détails d'un utilisateur.

La page elle-même se trouve sur/User/Edit/1234 où 1234 est le numéro d'employé. Sur cette page se trouve un lien de réinitialisation du mot de passe qui ouvre la boîte de dialogue jQuery UI suivante.

<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> 

Ce que je voudrais faire est de soumettre ce formulaire à une action (en l'occurrence/utilisateur/reset/1234) et retourner le résultat (réussite, échec ou un message de validation) à la boîte de dialogue sans que l'utilisateur jamais quitter la page.

Le code de l'action que je possède ferait ce que je veux si je revenais à la même action que la page, mais je ne le suis pas, et c'est là que je suis coincé.

Le code que j'ai est:

<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 

Alors, comment dois-je aller de là à ce que je suis en train d'essayer d'atteindre? J'ai considéré JSON comme une solution, mais mes connaissances à ce sujet sont assez limitées.

Toute aide est grandement appréciée.

Answer 1

Vous pouvez utiliser JSON pour cela, et vraiment ce n'est pas ce disque en utilisant asp.net mvc. Mettons ensemble quelques trucs.

d'abord le code 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> 

Remarquez comment nous avons lien (Modifier le mot de passe) pour ouvrir la boîte de dialogue et un div avec le contenu de la boîte de dialogue. Notez également comment le bouton OK est supprimé, nous allons utiliser la fonctionnalité de bouton intégré que jqueryui fournit pour les boîtes de dialogue contextuelles.

Ensuite, nous allons créer une méthode d'action qui renverra un objet JSON indiquant si la réponse fournie (OUI) est ok:

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; } 
     } 

La méthode Json sur le contrôleur bien convertir votre classe de résultat en Json.

Enfin, il y a le javascript, qui va ouvrir la boîte de dialogue et gérer l'événement beforeclose. Il gardera le dialogue ouvert quand le texte fourni n'est pas OUI, sinon il le fermera. En outre, il ajoutera un bouton de fermeture, le gestionnaire de ce bouton va essayer de fermer la boîte de dialogue, ce qui entraînera le déclenchement du gestionnaire d'événement beforeClose. Mettre ces choses ensemble vous donnera l'expérience que vous avez décrite ci-dessus. J'espère.

Answer 2

Je suis ne suis pas un programmeur asp donc je ne peux pas vous aider là-bas, mais ce qui faire est est d'utiliser jQuery form plugin il utilise ajax et a beaucoup d'options