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
Best Answer
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)
EditAsset.cshtml (partial view)
Now in the main view
Index.cshtml
you have to call theAssets.cshtml
usingHtml.Partial/Html.RenderPartial
while the other one will be called when click of asset link.Index.cshtml
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
In both cases you need an action in the controller that returns the
EditAsset.cshtml
.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 theindex
view with this view model. Then you can call theHtml.Partial
passing the assets to it.Ex.
Index.cshtml
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.You can call the child action from the
Index
asYou can use which one best suits for you.