2010-11-15 5 views
0

Je commence juste à explorer asp mvc et jquery.JQuery Popup du contrôleur MVC

J'ai un formulaire simple qui a 2 champs, une date et un montant.

Le comportement que j'essaye de réaliser est que quand le formulaire est soumis, si l'enregistrement n'existe pas déjà dans ma base de données alors ajoutez l'article. Si cela existe déjà, avertissez et demandez à l'utilisateur de confirmer. Si l'utilisateur continue, remplacez l'enregistrement existant.

Voici mon Majoration

<% using (Html.BeginForm()) 
     { %> 
    <div> 
     <%:Html.LabelFor(mod => Model.bal.Date) %> 
    </div> 
    <div> 
     <%: Html.TextBoxFor(mod => Model.bal.Date)%> 
     <%:Html.ValidationMessageFor(mod => Model.bal.Date)%> 
    </div> 
    <div> 
     <%: Html.LabelFor(mod => Model.bal.Amount)%> 
    </div> 
    <div> 
     <%: Html.TextBoxFor(mod => Model.bal.Amount)%> 
     <%: Html.ValidationMessageFor(mod => Model.bal.Amount)%> 
    </div> 
    <p> 
     <input type="submit" value="Create" /> 

Et voici mon code du contrôleur

 [HttpPost] 
     public ActionResult Index(Balance bal) 
     { 

      var dataContext = new DataDataContext(); 
      if (ModelState.IsValid) 
      { 
       // Check if exsists 
       if (dataContext.Balances.ToList().Contains(bal, new BalanceEquality())) 
       { 
        //Exsists, Warn then edit 
        // Add code here to open popup 
        // if Continue then over write exsisting data in db 

       } 
       else 
       { 
        //Not exsist, insert 
        dataContext.Balances.InsertOnSubmit(bal); 
        dataContext.SubmitChanges(); 
       } 
      } 

      compModel myModel = new compModel(); 
      myModel.bal = bal; 
      myModel.allBalances = dataContext.Balances.OrderBy(ball => ball.Date).ToList(); 
      return View(myModel); 
     } 

Le problème que j'ai est comment afficher et d'obtenir les résultats d'une Jquery Popup à partir de mon contrôleur.

Je pensais que sur la définition d'une variable dans la collection ViewData, mais cela ne semblait pas comme « meilleure pratique » pour me

Merci

+0

peut-être utiliser un formulaire ajax ici - vous ne voulez pas être soumettre le formulaire, montrant alors une confirmation (côté client), puis à nouveau soumettre. pauvre UX IMO. aussi, comment un enregistrement peut-il déjà "exister"? Quels champs sont uniques? – RPM1984

+0

Cherchez-vous une solution AJAX à ceci, ou voulez-vous soumettre le formulaire deux fois - d'abord soumettez-le vérifie l'unicité, s'il est unique il va de l'avant et crée l'enregistrement, sinon il réaffiche le formulaire avec le message d'avertissement, si l'utilisateur soumet la deuxième fois qu'il crée l'enregistrement. – ace

+0

concernant le popup, vous pouvez regarder ici http://mrgsp.md:8080/awesome/popupformdemo – Omu

Répondre

2

Vous êtes à la mauvaise fin de l'exécution désolé, le contrôleur est indépendant de la vue, c'est-à-dire que vous ne pouvez pas répondre à la réponse pendant l'exécution du code du contrôleur autrement que pour renvoyer une vue. Vous pouvez faire au moins quatre choses (je suis sûr qu'il y a d'autres solutions):

1 - Utilisez Ajax pour appeler la méthode du contrôleur JsonResult qui détermine si l'entrée existe déjà après avoir cliqué sur le bouton Soumettre - puis, sur la base du résultat de la requête, vous pouvez afficher une fenêtre contextuelle par laquelle "Oui" soumet le formulaire et remplace, ou "Non" arrête le formulaire soumis. 2 - Vous pouvez retourner la vue (sans soumettre la requête à la base de données) et demander à l'utilisateur de confirmer l'écrasement de l'enregistrement existant - mais vous devrez ajouter une logique supplémentaire comme un champ de saisie caché afin de déterminer que l'utilisateur a vu le message et a accepté de l'écraser. Ce ne serait pas une bonne approche et ne serait probablement pas très intuitif pour l'utilisateur.

3 - Ajoutez une case à cocher "écraser l'enregistrement existant" dans le formulaire qui confirme que l'utilisateur souhaite remplacer les données si elles existent déjà. 4 - Logiquement séparés Ajouter et modifier pour l'utilisateur de sorte que lorsqu'un utilisateur veut mettre à jour un enregistrement existant, il sélectionne l'enregistrement d'une liste et édite les données existantes - ce serait la méthode la plus traditionnelle je pense. Ensuite, si l'utilisateur tente d'ajouter un nouvel élément qui est le même qu'un existant, vous ré-affichez simplement la page avec une erreur indiquant que l'enregistrement existe déjà.

+0

Merci à tous, Ouais, vous êtes bien de l'interaction de l'utilisateur étrange qui se passe ici. Mais ceci est un système que je n'utiliserai que moi-même, donc je suis heureux d'avoir l'ajout/Écrasement sur le formulaire. –

+0

Salut Rob, je pense que je vais donner une première chance à votre première option, voir Si je peux le faire fonctionner. –

0

Je suis allé de l'avant et mis en œuvre la 1ère option de la réponse.

Il aurait certainement été plus facile de s'en tenir aux scénarios traditionnels d'ajout et de modification et d'utiliser le modèle standard mvc asp. Mais c'était une bonne expérience d'apprentissage.

Heres le code et le balisage, il a encore besoin de plus de travail, mais vous avez l'idée. Tous les commentaires/suggestions seraient appréciés.

 function validate() { 

     // Need to do form validation 
     var balance = {}; 
     balance.date = $("#bal_Date").val(); 
     balance.amount = $("#bal_Amount").val(); 
     $.post("balance/validate" 
       , balance 
       , function (data) { 
        if (data.valid) { 
         $("#existCheck").val("Valid"); 
         checkBalanceExist(); 
        } 
        else { 
         $("#existCheck").val("Not Valid"); 
         $("#errorMessage").text(data.message); 
        } 
       } 
       , 'json' 
       ); 
    }; 






    function checkBalanceExist() { 

     $("#existCheck").val($("#bal_Date").val()); 


     // Do ajax call to see if balance exist 
     var balance = {}; 
     balance.date = $("#bal_Date").val(); 
     balance.amount = $("#bal_Amount").val(); 
     $.post("balance/doesBalanceExist" 
       , balance 
       , balanceCheckPost 
       , 'json' 
       ); 
    }; 


    balanceCheckPost = function (data) { 
     $("#existCheck").val(data); 
     if (data) { 
      // Does Exist 
      $("#existCheck").val("Exist"); 
      // raise confirmation popup 


      $('#dialog').dialog('open'); 

     } 
     else { 
      // Does Not Exist 
      $("#existCheck").val("NOT Exist"); 

      // insert Item 
      var balance = {}; 
      balance.date = $("#bal_Date").val(); 
      balance.amount = $("#bal_Amount").val(); 
      $.post("balance/insert", 
       balance, 
       confirmChange 
       ); 
     } 

    }; 



    function overWriteBalance() { 
     // insert Item 
     var balance = {}; 
     balance.date = $("#bal_Date").val(); 
     balance.amount = $("#bal_Amount").val(); 
     $.post("balance/edit", 
       balance, 
       confirmChange 
       ); 
    }; 




    confirmChange = function() { 
     $("#existCheck").val("Changed"); 
    }; 

et

public JsonResult validate(Balance bal) 
    { 
     if (ModelState.IsValid) 
     { 
      return Json(new { valid = true }); 
     } 
     else 
     { 
      var errorMessage = ""; 
      foreach (var key in ModelState.Keys) 
      { 
       errorMessage += ModelState[key].Errors.FirstOrDefault().ErrorMessage; 

      } 
      return Json(new { valid = false, message = errorMessage }); 
     } 
    } 

    public JsonResult doesBalanceExist(Balance bal) 
    { 
     var dataContext = new DataDataContext(); 
     return Json(dataContext.Balances.ToList().Contains(bal, new BalanceEquality())); 
    } 

    public ActionResult Index() 
    { 
     var dataContext = new DataDataContext(); 

     compModel myModel = new compModel(); 
     myModel.bal = new Balance(); 
     myModel.allBalances = dataContext.Balances.OrderBy(bal => bal.Date).ToList(); 

     return View(myModel); 
    } 

    [HttpPost] 
    public ActionResult Index(Balance bal) 
    { 
     var dataContext = new DataDataContext(); 

     compModel myModel = new compModel(); 
     myModel.bal = new Balance(); 
     myModel.allBalances = dataContext.Balances.OrderBy(ball => ball.Date).ToList(); 

     return View(myModel); 



    } 

    public void insert(Balance bal) 
    { 
     var dataContext = new DataDataContext(); 
     dataContext.Balances.InsertOnSubmit(bal); 
     dataContext.SubmitChanges(); 
    } 


    public void edit(Balance bal) 
    { 
     var dataContext = new DataDataContext(); 
     var balToEdit = dataContext.Balances.Single(b => b.Date == bal.Date); 
     balToEdit.Amount = bal.Amount; 
     dataContext.SubmitChanges(); 
    } 

}