3

私はMVCを学び始めたばかりなので、我慢してみてください。

編集、削除、詳細を表示できるオプションがいくつかあるテーブルがあります。

ここに画像の説明を入力してください

ここで[詳細]ボタンをクリックすると、上の表を表示するIndex.cshtml と同じコントローラーにある別のページ（Details.cshtml）に移動します。

これはテーブルのコードです（Index.cshtml）

@model Collusus.Models.IndexModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<h2>Hello @Html.ActionLink(Model.userLoggedIN, "getProfile")</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Change ID</th> 
    <th>Owner</th> 
    <th>Priority</th> 
    <th>Disposition Date</th> 
    <th>Completion Date</th> 
    <th>Do what?</th>
</tr> 
</thead> 
<tbody> 
@for(int i=0; i<Model.changes.Count(); i++)
{
<tr> 
    <td>@Model.changes[i].ID</td> 
    <td>@Model.changes[i].Owner</td> 
    <td>@Model.changes[i].Priority</td> 
    <td>@Model.changes[i].DispositionDate.ToShortDateString()</td> 
    <td>@Model.changes[i].ActualCompletionDate.ToShortDateString()</td> 
    <td>@if (Model.changes[i].Owner == Model.userLoggedIN)
        {
            @Html.ActionLink("Delete", "Delete", new { id=Model.changes[i].ID })
            @Html.ActionLink("Edit", "Edit", new { id=Model.changes[i].ID })
        }
        @Html.ActionLink("Details", "Details", new { id=Model.changes[i].ID })
    </td>
</tr> 
}
</tbody> 
</table>

以下のコードでわかるように、別のページに移動します。

@Html.ActionLink("Details", "Details", new { id=Model.changes[i].ID })

私がやりたいこと：

  • 別のページではなく、ダイアログで[削除]、[編集]、または[詳細]ビューを開きます。
  • 別のページを開いている場合と同じ機能を引き続き使用できます。

それがあまりにも理にかなっているのかどうかはわかりません。私はそれをできる限り説明しようとしましたが、Googleを検索したり、他のソリューションのコードを試したりすることに不満を感じていましたが、機能させることができませんでした。

JQUERYダイアログ以外の方法を提案する場合は、そのオプションも使用します。私はとてもイライラしてきたので、すべての助けに感謝します。

4

1 に答える 1

3

それらをモーダルダイアログで開きたいと思います。これを実現するために、コントローラーから部分的なビューを返すことができます。

次のように、アクションリンクにクラスを追加できます。

@Html.ActionLink("Details", "Details", new { id=Model.changes[i].ID }, new { @class = "details-modal" })

詳細アクションメソッド：

public ActionResult Details(int id)
{
    // Your code here
    return PartialView("_Details", myModel); // return the partial view with the model
}

jQuery（頭のてっぺんから離れているので、100％正しくない可能性があります）：

$('#my-dialog').dialog({
    autoOpen: false,
    width: 400,
    resizable: false,
    modal: true
});

$('.details-modal').click(function() {
    var theURL = $(this).attr('href');

    $('#my-dialog').load(theURL, function() {
        $(this).dialog('open');
    });

    return false; // ensures the browser is not redirected to the link's URL
});
于 2012-11-18T06:08:22.167 に答える