Geek Answers Handbook

How to visualize strongly typed partial views in one view?

I am new to this asp net mvc but got a strong background in web forms.

I would like to create a page with a left asset menu, which, when you click on one of the assets, then the information about this asset is available for editing on the right, has the side of the same page.

Now I think that I will need to use 2 strongly types of partial representations. 1 for the left hand menu, which is of type List of Asset, and 1 for the right panel of the Asset type.

I have a left hand menu so far

controller

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

Layout view

  @model IList<CasWebSite.Models.Asset> <!DOCTYPE html> <html> <head> <title>title</title> </head> <body> <h1> Assets</h1> @RenderBody() </body> </html>

Index view

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

So, how do I add in another view to create a new partial view of type Asset, what would the controller look like, could I still go to the page by going to url / assets and how do I pass the values ​​between 2 partial views, since I need to know Which asset was selected on the left side for editing?

thanks

+4
source share
2 answers

If I understand correctly, you have one view in which you want to display the list of assets in one partial view and another partial view for editing the asset when you select.

You must create two partial views first.

Assets.cshtml (partial view)

 @model IList<Models.Asset> .. iterate the model and display the menu of assets

EditAsset.cshtml (partial view)

 @model Models.Asset .. create the form and render the fields for editing

Now in the main view of Index.cshtml you need to call Assets.cshtml using Html.Partial/Html.RenderPartial , and the other will be called when you click on the link to the resource.

Index.cshtml

 @Html.Partial("Assets", Model.Assets) @*rendering the partial view*@ ... other html <div id="editAssetContainer"> @*edit form placeholder*@ </div>

Note that you must also have an editAssetContainer placeholder where you are going to display the edit form.

Now the expected thing is how you can visualize the edit form in the placeholder when clicking links to resources. You can do this in two ways: either using jquery or using Ajax.ActionLink . You can create all resource links in the partial Asset.cshtml as ajax links. ) If you use Ajax.ActionLink, be sure to include the unobtrusive ajax library)

Ex. 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 } )

In both cases, you need to perform an action in the controller that returns EditAsset.cshtml .

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

UPDATE:

There are two ways to load the model into a partial view of Assets.cshtml . The first approach is that you can create a view model containing a list of assets as a property, and you will strongly type the index view using this view model. Then you can call Html.Partial , passing the assets to it.

Ref.

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

Index.cshtml

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

In the second question, you can have a child action that gets a list of assets from the database and returns a partial view. In this case, you do not need to strongly introduce the index view.

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

You can call a child action from index as

 @Html.Action("Assets")

You can use the one that is best for you.

+8
source

You're on the right track, you need to create two partial views and put them in the parent view. You can also view AJAX calls in a view to update partial ones. Here's a post that explains the steps and how your view model should look - Partial Views in ASP.NET MVC 3 with Razor View Engine

+2
source

More articles:


All Articles