A .NET MVC “Hello World” html form — the basics and what I’ve learned from watching someone do it the proper way
Before we start
I wrote this because I wanted to create my .NET MVC html form from scratch instead of just copying and pasting something I didn’t understand. However, I eventually ended up with something I liked. Hopefully this will help you if you are in the same boat.
If you are just learning .NET MVC, this article is great for you. You should know what a .cshtml file and a SomethingController.cs file does — you don’t need to know how to pass data between them, I’ll mention it here.
If you have zero knowledge about .NET MVC, google ‘asp.net mvc hello world’ you know what? You’re probably not going to do it because there’s too much to type. Just click here.
Article actually starts here
I thought I knew how to code a .NET MVC application — but I’ve been doing it wrong. Here are some lessons I’ve learned when watching an expert do it.
Btw, if you’re interested, here is what I ended up with — click on ‘Try It’.
The goal is just to make a simple form where the user enters some text in a text box and presses submit.
The server does something with that input and then sends the user to a second page displaying results. This is a basic Hello World web app.
At least that’s how it starts, then you want to make everything look nice taking you hours to center a f**king image. I digress.
So here are my top 3 learnings:
1. Use ViewModels instead of hard-coded inputs.
Before I just used to do this in my controller:
public ActionResult PreviewDemoAudioPlayer(string url)
{
doStuffWith(userInput);
…Though this seems quick, it is not great because what if you need to change the number of input parameters in the future? You’ll have to modify this function definition and things get ugly fast.
What you should do is create a class with the fields you want to pass from the .cshtml to the controller.
public class PreviewDemoViewModel
{
public string url { get; set; }
}Your controller now looks like this:
public ActionResult PreviewDemoAudioPlayer(PreviewDemoViewModel vm)
{
var urlToconvert = vm.url;
…This brings us to the second item, which is…
2. How to call your controllers from the .cshtml — using the class we just created
Your .cshtml will look like this:
@using (Html.BeginForm(“PreviewDemoAudioPlayer”, “PreviewDemo”)) //the PreviewDemoAudioPlayer is the method - "PreviewDemo" refers to the PreviewDemoController class
{
<h3>Orator — preview</h3>
@Html.TextBoxFor(x => x.url, new { @class = “form-control”, placeholder = “copy and paste a url from medium.com”, id=”urlText” })
<h5>Example:</h5>
<h5>https://medium.com/efficientHacks/get-back-at-it-whats-your-motivation-7030095aad88 </h5>
</div>
<div>
<button type=”submit” class=”btn btn-primary btn-lg”>Orate This!</button>
}Note that the autocomplete works when you do:x => x.url — how does it know about your ViewModel class?
A: You have to put @model WebApplication1.Models.PreviewDemoViewModel at the top of your cshtml file.
And that is pretty much what you need to know to get you started with ASP.net MVC. The rest of this article is only if you’re interested. So read on if you like. Or I’ll see you next time!
3. Prevent CSRF in 2 steps
CSRF is what happens when the user opens your site and a malicious site in the same browser. Apparently, the malicious site can send GET/POST requests to your site which may not be desirable when the request causes changes to the user’s settings or when the request is an expensive operation.
Here’s how you prevent it:
In your .cshtml file, add this within the Html.BeginForm block:
@using (Html.BeginForm(“PreviewDemoAudioPlayer”, “PreviewDemo”))
{
@Html.AntiForgeryToken();
...Now add this to your controller method:
[ValidateAntiForgeryToken]
public ActionResult PreviewDemoAudioPlayer(PreviewDemoViewModel vm)
{
var urlToconvert = vm.url;4. Use Site.css to override default css (not bootstrap.css)
So I actually never knew what the purpose of Site.css was, but now I do. The reason is that your changes to bootstrap.css may get overwritten when there is an update. So make your changes in Site.css.
5. Stick with regular HTML forms if you are just learning
Ajax is not as pretty and there’s less autocomplete support for it and you have to pretty much learn a new thing at the same time. Also debugging JavaScript is a pain in the ass.
If you want to do form submits without the whole page reloading, you can put your form in an iframe.
Some other random things that are nice to know:
Remove header and footer on a specific .cshtml file.
<style>
body {
padding-top : 0px;
display:list-item;
}
.navbar {
display: none;
}
.footer {
display: none;
}</style>
How to use the lightbox
This is another tutorial in itself, let me know if you are interested in this by leaving a comment.
If you want to try it out yourself, google ‘fancybox’
Did I mention that you should leave a comment yet?
If you want a sample .sln project, or have comments/suggestions please leave a comment which will let me know that at least one person has found this helpful.
If you have a Pluralsight subscription, I recommend you check out this course — which is the one I’m watching (it’s a 3 part course).
