Menu
I am new to this asp net mvc but got a strong background in web forms.
I would like to achieve a page that has a left hand menu of assets, that when you click on one of the assets then the details of that asset are available to edit on the right have side of the same page.
Now I am thinking I will need to use 2 strongly types partial views. 1 for the left hand menu that is of type List of Asset and 1 for the right hand panel of type Asset.
I have the left hand menu work 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 the other view do I create a new partial view of type Asset, What would the controller look like would I still goto the page by going to the url /assets, and how do I pass values between the 2 partial views, as I need to know which asset was selected on the left hand side to edit?
Thanks
986
If I understood correctly you have a single view where you want to display list of assets in one partial view and another partial view to edit the asset when selected.
First you should create the two partial views.
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 Index.cshtml you have to call the Assets.cshtml using Html.Partial/Html.RenderPartial while the other one will be called when click of asset link.
Index.cshtml
@Html.Partial("Assets", Model.Assets) @*rendering the partial view*@
... other html
<div id="editAssetContainer"> @*edit form placeholder*@
</div>
Note that you should also have a placeholder called editAssetContainer where you are going to display the edit form.
Now the pending thing is how you can render the edit form in the placeholder on click of asset links. You can do that through two ways: either directly using jquery or using Ajax.ActionLink. You can create all the asset links in the Asset.cshtml partial view as ajax links. )If you are using Ajax.ActionLink don't forget to include the unobtrusive ajax library)
Ex. of 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 an action in the controller that returns the EditAsset.cshtml.
public PartialViewResult EditAsset(int assetId)
{
var asset = .. get asset using assetId from db.
return PartialView(asset);
}
UPDATE:
There are two ways you can load the model into Assets.cshtml partial view. The first approach is you can create a view model that contains the list of assets as a property and you strongly type the index view with this view model. Then you can call the Html.Partial passing the assets to it.
Ex.
public class IndexViewModel
{
public IList<Asset> Assets;
.. other properties if there any
}
Index.cshtml
@model IndexViewModel
@Html.Partial("Assets", Model.Assets).
The second aproach is you can have a child action that gets the list of assets from database and return the partial view. In this case you don't need to go for strongly typing the Index view.
[ChildActionOnly]
public PartialViewResult Assets()
{
var assets = .. get from db
return View(assets);
}
You can call the child action from the Index as
@Html.Action("Assets")
You can use which one best suits for you.
125
You are on a right track, you need to create two partial views and place them in a parent view. You may also consider AJAX calls within the view to update partials. Here you are a post that explains the steps and how your view-model needs to look - Partial views in ASP.NET MVC 3 w/the Razor view engine
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
