ASP.NET MVC project (part 1) 6


Hello everyone,

here I am again and this time with an asp.net post.

Let me explain what this is about, this time I will show you a project I did for my work and I will change some informations and details which contain informations about my workplace.

Let’s start with what we need and what we want. We are a University with Pools for students, filled with computers and we got printer rooms, where students can scan and print stuff they need. Now we got new Printer with more functions and for this we need an application to assist the users, that’s where I come in place. I am designing an application which assists the user and will grant live support with our service point.

Lets start with all the Controllers I set up to do this.

Used Controllers

 

 

 

 

 

The “HomeController” is where it all starts and from there on the other Controller are called or used. What do I do in the HomeController? Actually I just get the actual IP adress and check for an errormessage, dont worry I will explain this later.

How does my Layout for the website look like in cshtml. Let me show you.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/zimk.css")
@Styles.Render("~/Content/addon.css")
@Styles.Render("//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css")
@Scripts.Render("//code.jquery.com/jquery-1.10.2.js")
@Scripts.Render("//code.jquery.com/ui/1.11.2/jquery-ui.js")
<script type="text/javascript">
// idle timer, when not moving mouse or pressing keys
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 30000); // 30 sec

//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
});

// helper function to increment idle timer and redirect after one minute
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime % 4 == 0) { // 1 minute
window.location.href = "/Home/index";
}
}
</script>
<style> .row {
max-width: 100%
} </style>
</head>
<body>
<div class="row collapse">
<div class="large-12 columns">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="/Home/Index"><i class="icon-uni_logo"></i> CPSupport</a></h1>
</li>
</ul>

<section class="top-bar-section">
<ul class="right">
<li><a class="li-style">Standort: @ViewBag.CurrentLocation</a></li>
<li>@Html.ActionLink("Admin Hub","Index","Admin")</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>MenĂ¼</span></a>
</ul>
</section>
</nav>
</div>
</div>

<div class="row">
<div class="large-12 columns">
<br>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<ul class="button-group round even-3">
<li>@Html.ActionLink("FAQ","selectprinter","faq", new object { },
new { @class = "large button"})</li>
<li>@Html.ActionLink("CHAT","Index","Chat", new object { },
new { @class = "large button"})</li>
<li>@Html.ActionLink("MAPS","Maps","Maps", new object { },
new { @class = "large button"})</li>
</ul>
</div>
</div>

@RenderBody()

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
At the top I have a javascript, which will do nothing but set an timer which will be resetted when you move the mouse or type something. When the timer is finished you will be redirect to the Index page again.
We do this because we thought about the students to just leave the homepage where they were and don’t reset to the index page. For this the homepage will be reset on the index when the user is inactive for a specific amount of time.

We are using the Foundation Framework and we need to adjust one element which is called row to be scaled on 100% of the device width. Else the rows would leave spaces on the sides.

After that I just declare the topbar with the current location, which I will explain later in this series.

Now we need the navigation of the three sections of our project. For this we use the asp.net function of creating a link.

@Html.ActionLink("FAQ","selectprinter","faq")

This is the standard version of creating a link in asp.net. You dont have to worry about writing down the wrong link, because you tell IIS to create alink to the wanted action of the selected Controller. The routing of asp.net takes care of the rest.

My version creates an additional attribute we know from html. We create a new object with the information about the class it has to use. This Object will then be added to the function.

Because the homepage would be static this way we have to call something to display upcoming and dynamic pages in the layout. This will be handled by the function @RenderBody()
All upcoming sites will be displayed from that function on. In summary we can say we created our masterpage or layout and where to display the dynamic sites.


More coming in the next parts. Stay tuned!

 

 


Leave a comment

Your email address will not be published. Required fields are marked *

6 thoughts on “ASP.NET MVC project (part 1)

  • Basil

    Simply want to say your article is as amazing. The clearness in your post is just excellent and i can assume you’re
    an expert on this subject. Well with your permission allow
    me to grab your RSS feed to keep up to date with forthcoming post.
    Thanks a million and please keep up the rewarding
    work.

  • MosesYWooton

    Howdy would you mind sharing which blog platform you’re utilizing?

    I’m going to begin my very own blog in the future but I’m
    developing a tough time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design seems different then most blogs and I’m
    searching for something unique. P.S Apologies for being off-topic having said that i
    were required to ask!

    my web-site MosesYWooton

  • minecraft

    Hi there just wanted to give you a quick heads up.
    The text in your content seem to be running off the screen in Safari.
    I’m not sure if this is a format issue or something
    to do with internet browser compatibility but I figured I’d post to let you know.
    The design and style look great though! Hope you get the problem resolved soon.
    Kudos