1

編集、詳細、または削除をクリックしたときに、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>

ポップアップウィンドウで編集をクリックしたときにポップアップウィンドウを取得したい<div class="main_a">

誰でもここで私を助けてくれますか

4

4 に答える 4

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
于 2012-07-13T10:29:03.397 に答える
2

jQuery UI dialogを使用できます。情報の編集に使用できるモーダル フォームを簡単に作成できます。I wrote a sample出発点として使用できる同様の質問で。

于 2012-07-13T09:57:55.777 に答える
0

http://jqueryui.com/demos/dialog/でいくつかの良い例を見つけることができます

Jsfiddleの例：http ：//jsfiddle.net/dwaddell/J6CWM/

ありがとう、-ナレン

于 2012-07-13T10:20:25.630 に答える
0

自分でグリッドを作成しようとしているようです。jqGridのようなグリッドを使用することをお勧めします。

jqGrid は、追加、編集、表示などのためのポップアップ フォームを無料で提供します。

デモ

ドキュメンテーション

于 2012-07-13T11:27:15.473 に答える