Créer une fenêtre PopUp en utilisant Jquery dans mvc3?

Question

Salut les gars je veux créer une fenêtre en utilisant jquery lorsque je clique sur modifier ou de détails ou supprimer

c'est ainsi que mon cshtml ressemble

@model IEnumerable<BugTracker.Models.ProjetModel> 
@{ 
    ViewBag.Title = "Projects"; 
} 
<p> 
@Html.ActionLink("Create New", "Create") 
</p> 
<table> 
    <tr> 
     <th> 
      ProjectName 
     </th> 
     <th> 
      Description  
     </th> 
     <th> 
      Status 
     </th> 
    </tr> 

    @foreach (var item in Model) 
    { 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.projectName) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Description) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.status) 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id = item.projectName }) | 
      @Html.ActionLink("Details", "Details", new { id = item.Description }) | 
      @Html.ActionLink("Delete", "Delete", new { id = item.status }) 
     </td> 
    </tr> 
    } 
</table> 

<div class="main_a"> 
    <h1>Edit</h1> 
    <div class="lable"> 
     <span>User Name</span> 
     <input type="text" /> 
     <label>User Name</label> 
     <input type="text" /> 
     <label>User Name</label> 
     <input type="text" /> 
     <a href="#"><input type="submit" value="save" /></a> 
     <input type="button" value="Cancel" /> 
    </div> 
</div> 

je veux obtenir une fenêtre pop-up lorsque je clique sur modifier ma fenêtre pop-up devrait être <div class="main_a">

peut me aider ici s'il vous plaît

Answer 1

Vous pouvez utiliser jQuery UI dialog. Il vous permet de créer facilement modal forms qui pourrait être utilisé pour éditer des informations. I wrote a sample dans une question similaire que vous pourriez utiliser comme point de départ.

Answer 2

Vous pouvez trouver quelques bons exemples @http://jqueryui.com/demos/dialog/

exemple jsFiddle: http://jsfiddle.net/dwaddell/J6CWM/

Merci, -Naren

Answer 3

en utilisant une vue partielle, vous pouvez mettre votre contenu HTML à l'intérieur. et en utilisant la méthode Jquery Ajax vous pouvez faire appel à un gestionnaire de succès, vous pouvez afficher votre vue partielle. Voici l'exemple de code qui pourrait vous donner un bon départ.

@Ajax.ActionLink("openPopup", "SomeAction", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess="openPopup" })<br /> 

<div id="result" style="display:none;"></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#result").dialog({ 
     autoOpen: false, 
     title: 'Title', 
     width: 500, 
     height: 'auto', 
     modal: true 
    }); 
}); 
function openPopup() { 
    $("#result").dialog("open"); 
} 
</script> 

Ajouter une action qui renvoie la vue partielle.

[HttpGet] 
public PartialViewResult SomeAction() 
{ 
     return PartialView(); 
} 

Remarques: AjaxOptions (// paramètres)

UpdateTargetId : which will be the DIV, which is set to display "none" 
InsertionMode = InsertionMode.Replace 
OnSuccess="openPopup" // which will call the function and open up the dialogue 

Answer 4

Je vois que vous essayez de créer vous-même grille. Je vous recommande d'utiliser une grille comme jqGrid. JqGrid vous fournit des formulaires contextuels pour l'ajout, l'édition, la visualisation, etc. et c'est gratuit.

Demos

Documentation