lördag 23 april 2016

Easy way to handle a button click in MVC.

In asp you used a button with an onclick event, and handled the click in code behind. It is not as easy to handle a button click in MVC, but don't worry it is pretty trivial anyway.

For this example we will use Visual Studio 2015 community edition.
Start a new web project, select MVC and  change authentication to no authentication. Make sure that bootstrap is added to your project.
Click on index.cshtml in Views/Home.

The code should look something like this:
1:  @{  
2:    ViewBag.Title = "Home Page";  
3:  }  
4:  <div class="jumbotron">  
5:    <h1>ASP.NET</h1>  
6:    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>  
7:    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>  
8:  </div>  
9:  <div class="row">  
10:    <div class="col-md-4">  
11:      <h2>Getting started</h2>  
12:      <p>  
13:        ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that  
14:        enables a clean separation of concerns and gives you full control over markup  
15:        for enjoyable, agile development.  
16:      </p>  
17:      <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>  
18:    </div>  
19:    <div class="col-md-4">  
20:      <h2>Get more libraries</h2>  
21:      <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>  
22:      <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>  
23:    </div>  
24:    <div class="col-md-4">  
25:      <h2>Web Hosting</h2>  
26:      <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>  
27:      <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>  
28:    </div>  
29:  </div>  

Remove the @Viewbag.Title, Remove the jumbotron and remove the text between the <div class="col-md-4"> tags. 
The Code should now look like this:
1:  <div class="row">  
2:    <div class="col-md-4">  
3:    </div>  
4:    <div class="col-md-4">  
5:    </div>  
6:    <div class="col-md-4">  
7:    </div>  
8:  </div>  

Add @Html.ActionLink("Click Me", "SayHello", new { yourname = "Sherlock" }, new{ @class ="btn btn-success"}) between the first col-md-4 tag and @ViewBag.Message between the last col-md-4 tag

This is what your code should look like now:

1:  <div class="row">  
2:    <div class="col-md-4">  
3:      @Html.ActionLink("Click Me", "SayHello", new { yourname = "Sherlock" }, new{ @class ="btn btn-success"})  
4:    </div>  
5:    <div class="col-md-4">  
6:    </div>  
7:    <div class="col-md-4">  
8:      @ViewBag.Message  
9:    </div>  
10:  </div>  

Add this method to the Home controller, and you are done :)
 public ActionResult SayHello(string yourname)  
     {  
       ViewBag.Message = "Hello " + yourname;  
       return View("~/Views/Home/Index.cshtml");  
     }  

Itshould be noted that this isn't best practise if you just want to update a part of the webpage, it is probably better to use Ajax and update the page on client side. But if you are just getting started with MVC it can be daunting to learn Ajax as well.

Inga kommentarer:

Skicka en kommentar