javascript 在 mvc3 中使用 Jquery 创建一个弹出窗口？

Create a PopUp Window using Jquery in mvc3?

提问by SoftwareNerd

Hi guys i want to create a popup window using jquery when i click on edit or details or delete

嗨，伙计们，当我单击编辑或详细信息或删除时，我想使用 jquery 创建一个弹出窗口

this is how my cshtml looks

这是我的 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>

i want to get a popup window when i click on edit on my popup window should be <div class="main_a">

当我点击弹出窗口上的编辑时，我想得到一个弹出窗口应该是 <div class="main_a">

can any one help me here please

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

回答by patel.milanb

using partial view, you can put your html content inside it. and using Jquery Ajax method you can call upon on success handler, you can render your partial view.. here is the sample code that might give you head start.

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

Add action that returns the partial view.

添加返回局部视图的操作。

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

Notes: AjaxOptions ( // parameters )

注释：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 

回答by Darin Dimitrov

You could use jQuery UI dialog. It allows you to easily create modal formsthat could be used for editing information. I wrote a samplein a similar question that you could use as a starting point.

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

回答by Narendra V

You can find some good examples @ http://jqueryui.com/demos/dialog/

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

Jsfiddle example: http://jsfiddle.net/dwaddell/J6CWM/

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

Thanks, -Naren

谢谢，-纳伦

回答by VJAI

I see you are trying to create a grid yourself. I would recommend you to use a grid like jqGrid.

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

jqGrid provides you popup forms for adding, editing, viewing etc and it's free.

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

Demos

演示

Documentation

文档