在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