I am new to mvc using razor so i need help regarding dynamic menu load.My current flow is like this there would be login button on master page or layout page on click of that a login dialog get opened and on successful submission user get login and certain
links get visible with it.I want to create same functionality in MVC using razor.For that i I have created a layout page like this
@section login
{
@* here i have written logic for loading menu dynamically based on user successful login*@
}
Now this stuff work but there is one problem of duplication i.e. i have to copy this same code on each page.So is there anyother approach i can achieve this.
Create a controller called “Partial” and in that controller a method “Menu”.
[ChildActionOnly]
public ActionResult MainMenu()
{
//Get the menuItems collection from somewhere
if (menuItems !=null || menuItems.Count >0)
{ return View(menuItems);
}
return View();
}
In order to make sure that this method can only be called by a “RenderAction” or an “Action” HTML extension method decorate it with the “ChildActionOnly” attribute. This way you won’t have to worry that this method can be called through a normal URL. For more information on this see: http://msdn.microsoft.com/en-us/library/system.web.mvc.childactiononlyattribute(v=vs.98).aspx
Create a corresponding View for this method in which you create the HTML to render the menu:
@model Models.MenuItems
@{
Layout = null;
}
<nav class="top">
foreach (var item in model.MenuItems)
{
//Do your magic here
}
</nav>
You need to fill in the blanks and set up your own method of passing the details from the controller to the view by creating a ViewModel, putting the details in a ViewBag or ViewData dictionary. And use your own code logic to set thing up but I think it
will help you on your way.
Hope this helps.
Regards,
Yorrick
Live life loosely coupled and separated of concerns
&
Don't forget to click "Mark As Answer" on the post that helped you.
public class MemberList
{
[Key]
public ulong memberId { get; set; }
[Required(ErrorMessage = "*")]
public string emailId { get; set; }
[Required(ErrorMessage = "*")]
public string password { get; set; }
}
Now i have created a partial view like this just right click on shared add partial view :
@model Catalogbrick.Models.MemberList
<link href="../../Content/popup.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
@*This below script should be added in order that validation works in jquery dialog box*@
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
@*This above script should be added in order that validation works in jquery dialog box*@
<script type="text/javascript">
$(function () {
//This enables validation in jquery dialogbox preventing postback.
//$.validator.unobtrusive.parse('#myform');
krutiksheth
Member
5 Points
16 Posts
Dynamically Load Menu on layout page in MVC razor
Oct 16, 2012 10:40 AM|LINK
hi,
I am new to mvc using razor so i need help regarding dynamic menu load.My current flow is like this there would be login button on master page or layout page on click of that a login dialog get opened and on successful submission user get login and certain links get visible with it.I want to create same functionality in MVC using razor.For that i I have created a layout page like this
<div class="topheader">
<div id="topheader">
<div id="login">
@RenderSection("login", required: false)
</div>
</div>
</div>
<div>
@RenderBody()
</div>
<div class="footer" />
Now i have created a controller class call home and Model class call User(emailid,password).Follwing is code of view of my view for index.cshtml
@model Storybrick.Models.MemberInfoModel
@{
ViewBag.Title = "Home";
}
@section login
{
@* here i have written logic for loading menu dynamically based on user successful login*@
}
Now this stuff work but there is one problem of duplication i.e. i have to copy this same code on each page.So is there anyother approach i can achieve this.
Thanks,
Krutik
pattanaik123
Member
159 Points
222 Posts
Re: Dynamically Load Menu on layout page in MVC razor
Oct 16, 2012 10:51 AM|LINK
I think you should go for a Partial View . Create a partial view and add it to your LayOut.cshtml and that would be available to all your views.
krutiksheth
Member
5 Points
16 Posts
Re: Dynamically Load Menu on layout page in MVC razor
Oct 16, 2012 11:06 AM|LINK
Hi,
Thanks for your reply.I am new to MVC Can you give me some links on creating Partial Views
me.sachan
Member
212 Points
65 Posts
Re: Dynamically Load Menu on layout page in MVC razor
Oct 16, 2012 11:10 AM|LINK
You can try using the following line of code to render the view at runtime. Provided I have sent a model to my view.
<% foreach (var menuitme in MenueItems) Html.RenderPartial("location/page.ascx",menuitme); %>Sandeep Sachan
Sandeep Sachan Blog
www.sandeepsachan.com
Please remember to click “Mark as Answer” on the post that helps you.
Yorrick vd V...
Participant
1674 Points
301 Posts
Re: Dynamically Load Menu on layout page in MVC razor
Oct 16, 2012 05:49 PM|LINK
Hi,
This is how I would do it.
First of all use the_Layout.cshtml to put your base layout in, including the placeholder (div) for the menu.
In that place holder user the Html.RenderAction() extension like this:
<div id=”Menu”> @{ Html.RenderAction("Menu", "Partial"); } </div>Create a controller called “Partial” and in that controller a method “Menu”.
[ChildActionOnly] public ActionResult MainMenu() { //Get the menuItems collection from somewhere if (menuItems !=null || menuItems.Count >0) {return View(menuItems); } return View(); }
In order to make sure that this method can only be called by a “RenderAction” or an “Action” HTML extension method decorate it with the “ChildActionOnly” attribute. This way you won’t have to worry that this method can be called through a normal URL. For more information on this see: http://msdn.microsoft.com/en-us/library/system.web.mvc.childactiononlyattribute(v=vs.98).aspx
Create a corresponding View for this method in which you create the HTML to render the menu:
@model Models.MenuItems @{ Layout = null; } <nav class="top"> foreach (var item in model.MenuItems) { //Do your magic here } </nav>You need to fill in the blanks and set up your own method of passing the details from the controller to the view by creating a ViewModel, putting the details in a ViewBag or ViewData dictionary. And use your own code logic to set thing up but I think it will help you on your way.
Hope this helps.
Regards,
Yorrick
&
Don't forget to click "Mark As Answer" on the post that helped you.
pattanaik123
Member
159 Points
222 Posts
Re: Dynamically Load Menu on layout page in MVC razor
Oct 16, 2012 06:05 PM|LINK
What I did ..I created a partial view in my shared folder and a respective controller for that view and rendered the same using below line
@Html.Action("MenuLayout", "Layout")
I put the partial view inside a UL tag . Below code i have put in my partial view .
foreach (var menuItem in Model.MenuItems)
{
<li>
@Html.ActionLink(menuItem.MenuTitle, menuItem.Action, menuItem.Controller, new { id = menuItem.MenuID })
</li>
and inside my controller i have put all my business validations .
Yorrick vd V...
Participant
1674 Points
301 Posts
Re: Dynamically Load Menu on layout page in MVC razor
Oct 17, 2012 04:53 AM|LINK
Hi,
Good to see you got it working.
Regards,
Yorrick
&
Don't forget to click "Mark As Answer" on the post that helped you.
hyenho91
Member
2 Points
1 Post
Re: Dynamically Load Menu on layout page in MVC razor
Nov 25, 2012 01:47 PM|LINK
could you please show me your model class ?
i am a newbie and have the same problem :(
i dont know how to access database from partial view :(
krutiksheth
Member
5 Points
16 Posts
Re: Dynamically Load Menu on layout page in MVC razor
Nov 26, 2012 09:29 AM|LINK
hi,
This is my model class:
public class MemberList
{
[Key]
public ulong memberId { get; set; }
[Required(ErrorMessage = "*")]
public string emailId { get; set; }
[Required(ErrorMessage = "*")]
public string password { get; set; }
}
Now i have created a partial view like this just right click on shared add partial view :
@model Catalogbrick.Models.MemberList
<link href="../../Content/popup.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
@*This below script should be added in order that validation works in jquery dialog box*@
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
@*This above script should be added in order that validation works in jquery dialog box*@
<script type="text/javascript">
$(function () {
//This enables validation in jquery dialogbox preventing postback.
//$.validator.unobtrusive.parse('#myform');
$('#dialogLogin').dialog({
autoOpen: false,
width: 470,
modal: true,
buttons: {
},
open: function (type, data) {
}
});
$("#lnklogin").click(function () {
$('#dialogLogin').dialog('open');
});
});
</script>
<style type="text/css">
.required
{
font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
font-weight: bold;
color: red;
}
</style>
@{
Html.EnableClientValidation(true);
Catalogbrick.Models.MemberList CurrentUser = HttpContext.Current.Session["MemInfo"] as Catalogbrick.Models.MemberList;
if (CurrentUser != null)
{
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="82%" align="right">
</td>
<td width="18%" align="right">
<a href="#" style="color: White">
@CurrentUser.emailId Logout </a>
</td>
</tr>
</table>
</div>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<div class="nav">
<ul>
<li><a href="../Home/Index" target="_self">Home</a></li>
<li><a href="#" target="_self">Tour</a></li>
<li><a href="#" target="_self">Features</a></li>
<li><a href="#" target="_self">Create App</a></li>
<li><a href="#" target="_self">Pricing</a></li>
<li><a href="#" target="_self">Faq</a></li>
<li><a href="../App/MyApps" target="_self">MyApps</a></li>
<li style="border-right: none; padding-right: 0px;"><a href="#" target="_self">Contact</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
}
else
{
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="82%" align="right">
<a href="#" id="lnklogin">
<img src="../../Content/images/login.png" width="78" height="34" border="0" /></a>
</td>
<td width="18%" align="right">
<a href="#">
<img src="../../Content/images/SIGN.png" width="125" height="34" border="0" /></a>
</td>
</tr>
</table>
</div>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<div class="nav">
<ul>
<li><a href="../Home/Index" target="_self">Home</a></li>
<li><a href="#" target="_self">Tour</a></li>
<li><a href="#" target="_self">Features</a></li>
<li><a href="#" target="_self">Pricing</a></li>
<li><a href="#" target="_self">Faq</a></li>
<li style="border-right: none; padding-right: 0px;"><a href="#" target="_self">Contact</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
}
}
<div id="dialogLogin" title="Log In">
<div>
@using (Html.BeginForm("Login", "Home", FormMethod.Post, new { id = "myform" }))
{
@Html.ValidationSummary(true)
<table width="100%" cellpadding="5" cellspacing="5">
<tr>
<td>
<b>Email Id</b>
</td>
</tr>
<tr>
<td>
@Html.TextBoxFor(x => x.emailId, new { @class = "textfeild" })
@Html.ValidationMessageFor(x => x.emailId, "", new { @class = "required" })
</td>
</tr>
<tr>
<td>
<b>Password</b>
</td>
</tr>
<tr>
<td>
@Html.PasswordFor(x => x.password, new { @class = "textfeild" })
@Html.ValidationMessageFor(x => x.password, "", new { @class = "required" })
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" class="btn1" id="btnLogin" />
</td>
</tr>
</table>
}
</div>
</div>
In layout page i have am calling my partial view like this
@Html.Partial("_IndexPartial", new Catalogbrick.Models.MemberList())
And i have created following method to handle action for submit button in dialogbox in mycontroller class
[HttpPost]
public ActionResult Login(MemberList MemberInfo)
{
if (ModelState.IsValid)
{
MemberList Model = db.Members.ToList().Find(p => p.emailId == MemberInfo.emailId && p.password == MemberInfo.password);
//ulong MemId=MemberInfoLogic.Login(MemberInfo);
if (Model != null)
{
Session["MemInfo"] = Model;
return View("Index", Model);
}
}
return View("Index", new MemberList());
}