mvc3에서 Jquery를 사용하여 팝업 창을 만드시겠습니까?

Question

안녕 얘들 아 내가 편집 또는 세부 사항을 클릭하거나이 내 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> 

모습입니다

삭제할 때 jQuery를 사용하여 팝업 창을 만들려면 내 팝업 창에서 편집 당신은 jQuery UI dialog을 사용할 수

Answer 1

<div class="main_a">이 하나가 여기 제발 도움을 줄 수 있어야한다. 정보를 편집하는 데 사용할 수있는 modal forms을 쉽게 만들 수 있습니다. I wrote a sample과 비슷한 질문을 시작 지점으로 사용할 수 있습니다.

Answer 2

당신은 http://jqueryui.com/demos/dialog/

Jsfiddle 예 @ 좋은 예를 찾을 수 있습니다 http://jsfiddle.net/dwaddell/J6CWM/

감사합니다, -Naren

Answer 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 

Answer 4

난 당신이 그리드를 직접 만들려고 참조하십시오. jqGrid과 같은 표를 사용하는 것이 좋습니다.

jqGrid는 추가, 편집,보기 등을위한 팝업 양식을 제공하며 무료입니다.

Demos

Documentation