Create a PopUp Window using Jquery in mvc3?

Question

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

this is how my cshtml looks

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

can any one help me here please

score 3 · Answer 1 · answered Jul 13 '12 at 10:29

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.

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

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

score 2 · Answer 2 · edited May 23 '17 at 11:56

2

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

edited May 23 '17 at 11:56

Community

1
1

answered Jul 13 '12 at 09:57

Darin Dimitrov

1,023,142
271
3,287
2,928

score 0 · Answer 3 · answered Jul 13 '12 at 10:20

0

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

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

Thanks, -Naren

answered Jul 13 '12 at 10:20

Narendra V

595
1
8
21

score 0 · Answer 4 · answered Jul 13 '12 at 11:27

0

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

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

Demos

Documentation

answered Jul 13 '12 at 11:27

VJAI

32,167
23
102
164

Create a PopUp Window using Jquery in mvc3?

4 Answers4