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>

我希望在弹出窗口上单击编辑时弹出窗口{@ 1}}

任何人都可以帮助我

Answer 1

使用局部视图，您可以将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 2

您可以使用jQuery UI dialog。它允许您轻松创建可用于编辑信息的modal forms。 I wrote a sample在一个类似的问题中，您可以将其作为起点。

Answer 3

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

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

谢谢， -Naren

Answer 4

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

jqGrid为您提供添加，编辑，查看等弹出窗体，它是免费的。

Demos

Documentation

在mvc3中使用Jquery创建一个PopUp窗口？

4 个答案: