1

大家好，当我单击编辑或详细信息或删除时，我想使用 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">

任何人都可以在这里帮助我吗

4

4 回答 4

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
于 2012-07-13T10:29:03.397 回答
2

您可以使用jQuery UI 对话框。它允许您轻松创建可用于编辑信息的模式表单。I wrote a sample在您可以用作起点的类似问题中。

于 2012-07-13T09:57:55.777 回答
0

我看到您正在尝试自己创建一个网格。我建议您使用像jqGrid这样的网格。

jqGrid 为您提供用于添加、编辑、查看等的弹出表单，并且是免费的。

演示

文档

于 2012-07-13T11:27:15.473 回答
0

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

Jsfiddle 示例：http: //jsfiddle.net/dwaddell/J6CWM/

谢谢，-纳伦

于 2012-07-13T10:20:25.630 回答