在mvc3中使用jquery創建一個彈出窗口？

Question

嗨，大家好，我想使用jquery，當我在編輯或詳情點擊或刪除

這是我CSHTML外觀

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

我希望當我點擊，彈出窗口中創建一個彈出窗口我的彈出式窗口的編輯應該<div class="main_a">

任何一個可以幫助我在這裏請

Answer 1

你可以使用jQuery UI dialog。它允許您輕鬆創建可用於編輯信息的modal forms。 I wrote a sample在一個類似的問題，你可以作爲一個起點。

Answer 2

你可以找到一些很好的例子@http://jqueryui.com/demos/dialog/

的jsfiddle例如：使用局部視圖http://jsfiddle.net/dwaddell/J6CWM/

感謝， -Naren

Answer 3

，你可以把你的HTML內容裏面。並使用Jquery Ajax方法，您可以在成功處理程序上調用，您可以渲染您的局部視圖..以下是可能會爲您提供開始的示例代碼。

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

添加將返回部分視圖的操作。

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

注：AjaxOptions（//參數）

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

我看你是想自己創建一個網格。我會建議你使用像jqGrid這樣的網格。

jqGrid爲您添加，編輯，查看等彈出窗口，它是免費的。

Demos

Documentation