Asp.Net Mvc Layout and Partial- view - asp.net-mvc

there.. I'am really confused about Layout and PartialLayout.
I don't know what wrong I'am doing.
When I login as Admin I can se all links even this Admin links ("Register", "Role", "Department" and "Manage") plus Logout link. So far so good.
But when I click any link of Admin links then my Layout changes as I'am not Admin I mean I see only "Home" , "About" "kontakt" ANd very confusing my logout link changes to Login after all I'am logged. So I'am logged but shows me Login instead.
Then if I click "Home"..or About.. then I see all links again and Logout link.
Please I'am new to this staffs and show me by coding if it's Ok, becouse I couldn't fix this problem in many hours ...
Here is my one of the admin html "Role"
#model IEnumerable<MyApiDemo.Models.RoleViewModel>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
#Html.ActionLink("Details", "Details", new { id=item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
In my Index.cshtml , _Layout is included.
Here is my _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application namn", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
#Html.Partial("_LoginPartial")
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
And this is my _LoginPartial.cshtml
#using Microsoft.AspNet.Identity
#if (Request.IsAuthenticated && ViewData.ContainsKey("FullName"))
{
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", #class = "navbar-right" }))
{
#Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right">
#if (HttpContext.Current.User.IsInRole("Admin"))
{
<li>#Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
<li>#Html.ActionLink("Role", "Index", "Role")</li>
<li>#Html.ActionLink("Department", "Index", "Department")</li>
<li>#Html.ActionLink("Manage", "Pass", "Account")</li>
}
<li>
#Html.ActionLink("Welcome back " + (ViewData["FullName"]) + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
</li>
<li>Logout</li>
</ul>
}
}
else
{
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Login", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
</ul>
}

Related

Trying to create drop down login for Orchard CMS

I am new to Orchard and to ASP.NET MVC. I am trying to override the login process for users so that instead of going to a dedicated login page (the default process) they get a drop down form from the user menu that logs them in. I have created overrides in my custom theme for LogOn.cshtml and User.cshtml. The code is as follows:
//User.cshtml
#using System.Web.Mvc;
#using Orchard.ContentManagement;
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
#if (WorkContext.CurrentUser != null) {
<li class="dropdown">
<button id="userDropdown" class="btn btn-primary navbar-btn dropdown-toggle" data-toggle="dropdown">
Welcome #Html.ItemDisplayText(WorkContext.CurrentUser) <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
#Html.ActionLink(T("Change Password").ToString(), "ChangePassword", new { Controller = "Account", Area = "Orchard.Users" })
</li>
<li>
#Html.ActionLink(T("Sign Out").ToString(), "LogOff", new { Controller = "Account", Area = "Orchard.Users", ReturnUrl = Context.Request.RawUrl }, new { rel = "nofollow" })
</li>
#if (AuthorizedFor(Orchard.Security.StandardPermissions.AccessAdminPanel)) {
<li class="divider"></li>
<li>
#Html.ActionLink(T("Dashboard").ToString(), "Index", new { Area = "Dashboard", Controller = "Admin" })
</li>
}
</ul>
</li>
}
else {
<li class="dropdown">
<button class="btn btn-primary navbar-btn dropdown-toggle" data-toggle="dropdown">
Sign In <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
#Display.LogOn()
</li>
</ul>
</li>
}
</ul>
</div>
//LogOn.cshtml
#using System.Web.Mvc;
#using Orchard.ContentManagement;
<div>
#using (Html.BeginFormAntiForgeryPost(Url.Action("LogOn", new { ReturnUrl = Request.QueryString["ReturnUrl"] }))) {
<fieldset class="login-form group">
<legend>#T("Account Information")</legend>
<div class="form-group">
<label for="username-email">#T("Username")</label>
#Html.TextBox("userNameOrEmail", "", new { id = "username-email", autofocus = "autofocus", #class = "validate[required]" })
#Html.ValidationMessage("userNameOrEmail")
</div>
<div class="form-group">
<label for="password">#T("Password")</label>
#Html.Password("password", null, new { #class = "validate[required]" })
#Html.ValidationMessage("password")
</div>
<div class="checkbox">
<label class="forcheckbox" for="remember-me">
#Html.CheckBox("rememberMe", new { id = "remember-me" }) #T("Remember Me")
</label>
</div>
<div class="form-group">
<button class="primaryAction" type="submit">#T("Sign In")</button>
</div>
</fieldset>
}
</div>
The form displays fine in the dropdown, but when the submit button is clicked, I get a HTTP 404 error: Requested URL: /OrchardLocal/Contents/Item/LogOn.
I'm afraid that the default login process requires a separate view. I've been trying to figure out which existing override to use, but I'm just not seeing it. Any help would be greatly appreciated. Thanks.
You should be able to login properly by changing your form from
#using (Html.BeginFormAntiForgeryPost(Url.Action("LogOn", new { ReturnUrl = Request.QueryString["ReturnUrl"] })))
to something like this:
#using ( Html.BeginForm("LogOn", "Account", new { area = "Orchard.Users" /*other route values here*/ }, FormMethod.Post) )
{
#Html.AntiForgeryToken()
// ... your stuff here
}
This is the same for every other controller action. If in doubt: specify the area explicitly.

How do i Implement JqueryUI Datepicker

How do i Implement a DateTime Picker from the library of JqueryUI Datepicker.
So far i have folowed these steps http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/
Where i have done the first 3 Steps, and now i dont now how to move on so i can Implement the DateTime Picker?
What i have coded so far is my datetime Variable in the Model Class, like this
[DataType(DataType.Date)]
public DateTime Date { get; set; }
And in my Create view i have this
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Job</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Date, "Choose Date", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-1">
#Html.EditorFor(model => model.Date, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Date, "", new { #class = "text-danger" })
</div>
</div>
</div>
}
In my BundleConfig class i have i have implemented
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.theme.css"));
and in the _Layout.cshtml i have implemented
#Scripts.Render("~/bundles/jqueryui")
You'll need to add some pure javascript code, like this: http://jqueryui.com/datepicker/ (click on view source).
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
instead of "#datepicker" you need to use id of your date edit or ".form-control" for all edits which are have such class name
My Entire _Layout class, this is right, right?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<meta name="description" content="The description of my page" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Substi", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "ChooseTeacher", "Substitutes")</li>
<li>#Html.ActionLink("All Schools", "Index", "Schools")</li>
<li>#Html.ActionLink("All Teachers", "Index", "Teachers")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/jqueryui")
#RenderSection("scripts", required: false)
</body>
</html>

MVC dropdownlist filter onchange

I have an index view with dropdownlist filter. Whenever a new item is selected from the dropdownlist, the index page will display data based on groupid. Here is the view
#using (Html.BeginForm("index", "service"))
{
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-header" style="margin:10px 0px 5px 5px">
<div class="col-lg-12">
<a id="btnSAdd" class="btn btn-info glyphicon glyphicon-plus" href="/AppName/Service/Create"> Create New </a>
<button type="submit" id="btnSSave" class="btn btn-info glyphicon glyphicon-floppy-save"> Save </button>
</div>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse" style="margin:10px 0px 5px 5px">
<div class="input-group">
<span class="navbar" style="font-family:'Californian FB';font-weight:bold">Select a Menu:</span>
#Html.DropDownList("GroupID", new SelectList(ViewBag.TopMenuList, "GroupID", "GroupName"),
new { #class = "btn btn-info dropdown-toggle", #style = "border-color:grainsboro", #onchange = "window.location = 'service/index?groupid=' + this.value" })
</div>
</div>
</div>
</div>
<div class="row">
<div id="drag" class="panel-body">
<table class="table table-hover" style="width:auto" id="sTable">
<colgroup>
<col width="30" />
<col width="250" />
<col width="250" />
<col width="200" />
</colgroup>
<thead>
<tr>
<th> </th>
<th>Parent Group</th>
<th>Service Name</th>
<th>Service Description</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count; i++)
{
<tr class="orderedrow">
<td class="rowhandler">
<div class="drag rowdip">#Html.HiddenFor(model => model[i].ServiceID)</div>
</td>
<td>#Html.DropDownListFor(model => model[i].GroupID, new SelectList(Model[i].ParentServiceGroupList, "GroupID", "GroupName", Model[i].GroupID))</td>
<td>#Html.EditorFor(model => model[i].ServiceName, new { htmlAttributes = new { #style = "width:250px" } })</td>
<td>#Html.EditorFor(model => model[i].ServiceDescription, new { htmlAttributes = new { #style = "width:250px" } })</td>
</tr>
}
</tbody>
</table>
</div><!--End Div drag-->
</div><!--End of row-->
}
RouteConfig.cs
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
The problem I am having is the filter works only the first time as
http://localhost/AppName/service/index?groupid=4
. The second time, it seems to append my url as
http://localhost/AppName/service/service/index?groupid=5
How do I fix this?
Thanks
Try to change this
#onchange = "window.location = 'service/index?groupid=' + this.value"
to this
#onchange = "window.location = '/service/index?groupid=' + this.value"

MVC 5 does not contain a definition for bootstrap

I am trying to add a drop down on the nav bar for this MVC project and getting a "does not contain a definition for bootstrap error." Sorry if this question is stupid but this is my first time creating a website using ASP and MVC.
Whenever I run it I get an Exception of type 'System.Web.HttpCompileExpection' occured in System.Web.dll but was not handled in uesr code.
Here is my _LoginPartial view
#using Microsoft.AspNet.Identity
#if (Request.IsAuthenticated)
{
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", #class = "navbar-right" }))
{
#Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right">
<li>
#using (var dd = Html.Bootstrap().Begin(new DropDown("Manage")))
{
#dd.ActionLink("Account", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })
#dd.Action("Posts", "Manage", "Book", routeValues: null, htmlAttributes: new { title = "Manage" })
}
</li>
<li>Log off</li>
</ul>
}
}
else
{
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
</ul>
}
Here is the head of my _layout.cshtml
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Books4CSUSM</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
Here is the body of my _layout.cshtml
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Books4CSUSM", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
<li>#Html.ActionLink("Books", "Index", "Book")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Books4CSUSM</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
Based on the included code, I assume this reference Html.Bootstrap() is the issue. Bootstrap() is defined as an extension method of HtmlHelper, but MVC can't find it, hence this exception. Add a using statement to add the namespace where the bootstrap framework is defined.
I figured this out. I did not install TwitterBootstrapMVC with nuget. I installed TwitterBootstrap 3 and just used the regular syntax for html.
<li class="dropdown">
Manage <b class="caret"></b>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Manage Account", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })</li>
<li class="divider"></li>
<li>#Html.ActionLink("Manage Posts", "Manage", "Book", routeValues: null, htmlAttributes: new { title = "Manage" })</li>
</ul>
</li>
<li>Log off</li>
</ul>
Thanks for your help.

Ajax with asp.net mvc Partial view is not working correctly

I am trying to do a simple example of ajax with mvc but its not working correctly
I am based on wrox, professional asp.net mvc 3 book, chapter 8, and plural sight ajax video.
I will paste the code of the relevant code files here, I think it might be a problem with the scripts but I am not really sure.
_layout.csthml (Script partial view and non mandatory section at the end)
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
#Html.Partial("_css")
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>Eva 1.0</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
#if(Request.IsAuthenticated) {
<li> #Html.ActionLink("DashBoard", "Index", "Home")</li>
<li> #Html.ActionLink("Positions", "Index", "Position") </li>
<li> #Html.ActionLink("Prospects", "Position", "UserPositionPosition") </li>
<li> #Html.ActionLink("Prospect History", "Position", "UserPositionPosition") </li>
<li> #Html.ActionLink("Technical Interview", "Position", "UserPositionPosition") </li>
<li> #Html.ActionLink("Manager Interview", "Position", "UserPositionPosition") </li>
<li> #Html.ActionLink("Current Employees", "Position", "UserPositionPosition") </li>
<li> #Html.ActionLink("Current Employees History", "Position", "UserPositionPosition") </li>
}
#* else
{
<li> #Html.ActionLink("Log On", "LogOn", "Account") </li>
}*#
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
#Html.Partial("_scripts")
#RenderSection("scripts", false)
</body>
</html>
_scripts.cshtml
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
Index.cshtml (Where I am trying to achieve the ajax effect)
#model ICollection<Data.Model.Position>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section scripts{
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div id="dailydeal">
#Ajax.ActionLink("Click here to see today's special!", "Create",
"Position",
new AjaxOptions{
UpdateTargetId="dailydeal",
InsertionMode=InsertionMode.Replace,
HttpMethod="POST",
LoadingElementDuration=5000,
LoadingElementId="progress"
})
</div>
<div id="progress">
Loading...
</div>
<table>
<tr>
<th>
name
</th>
<th>
yearsExperienceRequired
</th>
<th>
Actions
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.DisplayFor(modelItem => item.yearsExperienceRequired)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.PositionID }) |
#Html.ActionLink("Details", "Details", new { id = item.PositionID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.PositionID })
</td>
</tr>
}
</table>
_Create.cshtml (Partial view with the create form)
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create<h2>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Position</legend>
<div class="editor-label">
#Html.LabelFor(model => model.name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.name)
#Html.ValidationMessageFor(model => model.name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.yearsExperienceRequired)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.yearsExperienceRequired)
#Html.ValidationMessageFor(model => model.yearsExperienceRequired)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
Position Controller method
/// <summary>
/// Create form of the position
/// </summary>
/// <returns></returns>
public PartialViewResult Create()
{
Thread.Sleep(2000);
return PartialView("_Create");
}
For Ajax.* helpers (such as Ajax.ActionLink) to work make sure that you have referenced the jquery.unobtrusive-ajax.js script:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
Then use FireBug or Chrome Developer Tools to inspect the AJAX request and see any possible reasons why it might be failing.
UpdateTargetId="dailydeal"
Where is that div? That div needs to exist to be updated.
http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx
Remove get or post attributes from controller
Having the same problem, I updated the Microsoft.jQuery.Unobtrusive.Ajax package using NuGet as found in this helpfull post from mezoid
unobtrusive-ajax-form-for-partial-view
Now, the validation works perfectly within my partial view!

Resources