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

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

• javascript
• jquery
• asp-mvc-3

Share Improve this question Follow edited Jul 13, 2012 at 11:20 VJAI 32.8k2323 gold badges106106 silver badges166166 bronze badges asked Jul 13, 2012 at 9:52 SoftwareNerdSoftwareNerd 1,90588 gold badges2929 silver badges6363 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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 

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.

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

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

Thanks, -Naren

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

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

Demos

Documentation