How to Start with Materialize CSS

The beginners may have some difficulties about how to start and learn the materialize design.  Here is a simple steps to learn and quick start with materialize design.

1. Add the Following link

<!--Import Google Icon Font-->
					<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
					<link href="~/css/materialize.min.css" rel="stylesheet" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<span 				data-mce-type="bookmark" 				id="mce_SELREST_start" 				data-mce-style="overflow:hidden;line-height:0" 				style="overflow:hidden;line-height:0" 			></span>			<link href="~/css/ClientStyles/main.css" rel="stylesheet" /><span 				data-mce-type="bookmark" 				id="mce_SELREST_end" 				data-mce-style="overflow:hidden;line-height:0" 				style="overflow:hidden;line-height:0" 			></span>
<style>
.caret {
border-top: 0px !important;
}
</style>

2. Add following line of html

<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label></div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label></div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled value="I am not editable" id="disabled" type="text" class="validate">
<label for="disabled">Disabled</label></div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label></div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label></div>
</div>
<div class="row">
<div class="col s12">
This is an inline input field:
<div class="input-field inline">
<input id="email" type="email" class="validate">
<label for="email" data-error="wrong" data-success="right">Email</label></div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Select Project</label></div>
<div class="input-field col s6">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Select Percentage</label></div>
</div>
<div class="row">
<div class="col s6">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit
<i class="material-icons right">send</i>
</button></div>
<div class="col s6">
<button class="btn waves-effect waves-light" type="submit" name="action">
Cancel
<i class="material-icons right">send</i>
</button></div>
</div>
</form></div>

3. Add following script

@section Scripts{
<script>
$(document).ready(function () {
$('select').material_select();
});

</script>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="~/js/materialize.min.js"></script>
}

Design sample of above materialize css will look like

 

 

More Details Click Here

How to set and get the session value in asp.net core.

The Microsoft.AspNetCore.Session package provides middleware for managing session state.

1. Add the following heightened line in your Startup.cs

public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
// Adds a default in-memory implementation of IDistributedCache
 services.AddDistributedMemoryCache();
services.AddSession(options =>
{
// Set a time for session
options.IdleTimeout = TimeSpan.FromSeconds(200);
options.Cookie.HttpOnly = true;
});
}

public void Configure(IApplicationBuilder app)
{
app.UseSession();
app.UseMvcWithDefaultRoute();
}

2. Following line of code is needed to set the session value.

public class HomeController : Controller
{
const string SessionStoreName = "_StoreName";
const string SessionStoreID = "_StoreID";

public IActionResult Index()
{
// Requires using Microsoft.AspNetCore.Http
 HttpContext.Session.SetInt32(SessionStoreID, 3);
 HttpContext.Session.SetString(SessionStoreName, "ABC Store");
return RedirectToAction("SessionStore");
}

3. To get the session value

public IActionResult SessionStore ()
{
var storename = HttpContext.Session.GetString(SessionStoreName);
var storeID = HttpContext.Session.GetInt32(SessionStoreID);
return Content($"Store Name: \"{ storename }\",Store ID: \"{ storeID}\"");
}