5

私はこの asp net mvc を初めて使用しますが、Web フォームの強力なバックグラウンドを持っています。

資産の左側のメニューがあるページを実現したいと思います。資産の1つをクリックすると、その資産の詳細が同じページの右側で編集できるようになります。

今、私は2つの強力なタイプの部分ビューを使用する必要があると考えています. List of Asset タイプの左側のメニューに 1、Asset タイプの右側のパネルに 1。

これまでのところ、左側のメニューが機能しています

コントローラ

public class AssetsController : Controller
{
    //
    // GET: /Assets/
    public ActionResult Index()
    {
        var assets =Repo.getAssetList();

        return View(assets);
    }

}

レイアウト ビュー

 @model IList<CasWebSite.Models.Asset>

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <h1>
        Assets</h1>


    @RenderBody()

</body>
</html>

インデックス ビュー

    @model IList<CasWebSite.Models.Asset>
@{
    Layout = "_Layout.cshtml";
}
<ul>
    @foreach (var asset in Model)
    {
        <li>@asset.Name </li>
    }
</ul>

では、他のビューにどのように追加すれば、Asset タイプの新しい部分ビューを作成できますか? コントローラーはどのように見えるでしょうか? URL /assets に移動してページに移動しますか? 2 つの部分ビューの間で値を渡すにはどうすればよいですか?編集するために左側でどのアセットが選択されたかを知る必要がありますか?

ありがとう

4

2 に答える 2

8

私が正しく理解していれば、アセットのリストを 1 つの部分ビューで表示し、別の部分ビューでアセットを選択して編集する単一のビューがあります。

まず、2 つの部分ビューを作成する必要があります。

Assets.cshtml (部分ビュー)

@model IList<Models.Asset>

.. iterate the model and display the menu of assets

EditAsset.cshtml (部分ビュー)

@model Models.Asset

.. create the form and render the fields for editing

メイン ビューでは、アセット リンクをクリックすると、別のビューが呼び出される間に、 usingIndex.cshtmlを呼び出す必要があります。Assets.cshtmlHtml.Partial/Html.RenderPartial

インデックス.cshtml

@Html.Partial("Assets", Model.Assets) @*rendering the partial view*@

... other html

<div id="editAssetContainer">  @*edit form placeholder*@
</div>

editAssetContainer編集フォームを表示する場所と呼ばれるプレースホルダーも必要であることに注意してください。

保留中のことは、アセット リンクのクリック時にプレースホルダーで編集フォームをレンダリングする方法です。jquery を直接使用するか、Ajax.ActionLinkを使用するという 2 つの方法でそれを行うことができます。部分ビューのすべてのアセット リンクAsset.cshtmlを ajax リンクとして作成できます。)Ajax.ActionLink を使用している場合は、控えめな ajax ライブラリを含めることを忘れないでください)

元。Ajax.ActionLink の

@Ajax.ActionLink(linkText, 
"EditAsset", // the action that returns the partial view
new {assetId = @asset.Id }, // the assetId that to be passed to the action
new AjaxOptions // you can specify the targetid and others here..
   { UpdateTargetId = "editAssetContainer", 
      InsertionMode = InsertionMode.Replace 
   }
)

どちらの場合も、コントローラーでEditAsset.cshtml.

public PartialViewResult EditAsset(int assetId)
{
   var asset = .. get asset using assetId from db.
   return PartialView(asset);
}

アップデート：

モデルをAssets.cshtml部分ビューにロードするには、2 つの方法があります。最初のアプローチは、アセットのリストをプロパティとして含むビュー モデルを作成し、indexこのビュー モデルでビューを厳密に型指定することです。Html.Partial次に、アセットを渡すことを呼び出すことができます。

元。

public class IndexViewModel
{
   public IList<Asset> Assets;
   .. other properties if there any
}

インデックス.cshtml

@model IndexViewModel

@Html.Partial("Assets", Model.Assets).

2 番目のアプローチは、データベースからアセットのリストを取得し、部分ビューを返す子アクションを持つことができることです。この場合、Indexビューを強く型付けする必要はありません。

[ChildActionOnly]
public PartialViewResult Assets()
{
   var assets = .. get from db
   return View(assets);
}

Indexasから子アクションを呼び出すことができます

@Html.Action("Assets")

あなたに最適なものを使用できます。

于 2012-06-29T04:17:27.360 に答える
2

正しい軌道に乗っています。2 つの部分ビューを作成し、それらを親ビューに配置する必要があります。パーシャルを更新するために、ビュー内で AJAX 呼び出しを検討することもできます。これは、手順と、ビューモデルがどのように見える必要があるかを説明する投稿です-Razorビューエンジンを使用したASP.NET MVC 3の部分ビュー

于 2012-06-29T04:04:20.557 に答える