Asp.net mvc introPER KVARNBRINK, 2015-01-27

Byggstenarna i ett mvc-projekt1. Databasen

2. Datamodellen (M:et)

3. Entity framwork

4. Routing

5. Kontroller (C:et)

6. Vy (V:et)

7. Vymodeller

8. Troligen en radda språk/verktyg: sql, linq, C#, Razor, Jquery, html, css, json, xml…

Datamodellen1. Skrivs i ett programmeringsspråk, t.ex. C#

2. Beskriver data som en klass, egenskaper

3. Har nästan alltid en motsvarighet i databasen, tabeller, fält, relationer

4. Följer med som en röd tråd genom hela strukturen, i vyn (view), i kontrollern, i kontrollens action och i databasen.

5. Kan innehålla randvillkor, t.ex. om det är obligatoriskt, begränsat, antal tecken etc. Detta gör att valideringen styrs från Modellen.

6. Man bör se till att alla randvillkor finns i modellen. Det är en dålig lösning att lägga till det när alla views är klara. Valideringen blir enkel då.

public class UserDetail{

public int id { get; set; }public string namn { get; set; }public DateTime datum_created { get; set; }

}

public class UserMethod{

public int CreateUser (UserDetail) { //lägg till kod här

}

//komplettera så att det blir CRUD, ReadUser, UpdateUser, DeleteUser}

Här har jag skrivit en egen modell!

namespace NewOmtenta.Models{

using System;using System.Collections.Generic;

public partial class Amne{

public Amne(){

this.Kursers = new HashSet<Kurser>();}

[DisplayName("Kurs-Id")]public int Id { get; set; }

[DisplayName("Ämne")]public string ANamn { get; set; }

public virtual ICollection<Kurser> Kursers { get; set; }}

}

Här har Entity Framework skriviten egen modell!

using System.ComponentModel.DataAnnotations;

[DisplayName("Efternamn")][Required(ErrorMessage = "Ange efternamn")][StringLength(30, ErrorMessage = "Det är max 30 tecken för detta fält.")]public string Efternamn { get; set; }

Man kan lägga till attribut till fälten i datamodellen using System.ComponentModel.DataAnnotations;

Databasen och Entity Framework (EF)1. En databas är en databas!

2. Databasen har tabeller, fält och relationer – inga konstigheter alls!

3. All data brukar sparas i databasen. Controller, datalagret och views skyfflar och moddardata…

4. EF kopplar ihop datamodell med databas och man väljer mellan två metoder:

- Database first – EF bygger då upp datamodellen med CRUD, dvs det kommer att finnas ett detaljobjekt och ett metodobjekt med metoder för CRUD

- Code first – EF bygger då upp databas och utgår från hur modellen ser ut

5. Om man har bråttom så kan man använda Scaffolding – New Scaffolded Item…

- då får man en controller och ett antal views automatiskt!

Controllern1. Tar emot en förfrågan, request, från Internet och levererar en passande view med eller utan data

2. Den förstår skillnaden mellan, och hanterar get och post

3. Kan hämta data (ofta vid get) eller skicka data (ofta vid post) till databasen

4. Hanterar databasfrågorna.

5. Man kan välja teknik för databasfrågorna, frågespråket LINQ är vanligt men SQL går också bra.

6. Den hanterar också inloggning, t.ex. kan den kontrollera att en viss användare kan göra vissa saker

7. Den kan också lägga till extra säkerhet för att säkerställa att inmatad data kommer från ett pålitligt formulär (formulär är en webbsida med inmatningsfält och en submit-knapp)

8. Den anpassar sig till de regler för routing som gäller för sajten

9. En kontroller är en kontroller!

RoutingRouting sker enligt vissa mönster:

http://localhost:63421/Tentamenslista/Index

http://localhost:63421/Amne/Edit/1

Adressen till webbservern

Namn på controllern (och det finns ett defaultvärde)

Action i controllern (och det finns ett defaultvärde)

Extra parameter t.ex. ett id för ett ämne

Routing – exempel:

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 }

);}

I routingen ser jag defaultadressen http://localhost/home/index/ ( = http://localhost/)

Controllen ett exempelpublic class AmneController : Controller

{

private NewOmtentaEntities1 db = new NewOmtentaEntities1();

// GET: /Amne/

[Authorize(Users = "MonaLisa,Valentina,Catharina")]

public ActionResult Index()

{

return View(db.Amnes.ToList());

} Här passar controllern data till vyn

Controllern heter Amne och svarar mot http://domännamn/Amne

Action Index, svarar mot http://domännamn/Amne/Index/

Controllen ett exempel till: Edit - get// GET: /Amne/Edit/5

[Authorize(Users = "MonaLisa,Valentina,Catharina")]

public ActionResult Edit(int? id)

{

if (id == null)

{

return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

}

Amne amne = db.Amnes.Find(id);

if (amne == null)

{

return HttpNotFound();

}

return View(amne);

}

Här passar controllern data till vyn

Action Edit, svarar mot http://domännamn/Amne/Edit/5, get

Controllen ett exempel till: Edit - post// POST: /Amne/Edit/5

// To protect from overposting attacks, please enable the specific properties you want to bind to, for

// more details see http://go.microsoft.com/fwlink/?LinkId=317598.

[HttpPost]

[ValidateAntiForgeryToken]

[Authorize(Users = "MonaLisa,Valentina,Catharina")]

public ActionResult Edit([Bind(Include = "Id,ANamn")] Amne amne)

{

if (ModelState.IsValid)

{

db.Entry(amne).State = EntityState.Modified;

db.SaveChanges();

return RedirectToAction("Index");

}

return View(amne);

}

Om allt går bra så skickas användaren till Index

Action Edit, svarar mot http://domännamn/Amne/Edit/5, post och den binder data från formuläret

Om inte sidan valideras som korrekt så skickas användaren tillbaka till vyn

Sista handen på konstverket – The View!1. Vyn sätter ihop data med html-kod

2. Vyn exekverar på servern och skickar html-kod till klienten

3. I vyn kan man skriva C#-kod

4. I vyn kan man också använda Razor – ett språk som hjälper till att baka ihop allt eller som är smidigt på att göra bra html-taggar (html-helper)

5. Vyn kan med fördel ta emot data i välförpackad form – t.ex. IEnumerable (enumererbar data)

6. Här löser man problem (programmeringsuppgifter) och jämför gärna med övriga delar i MVC som i huvudsak förpackar om och skickar data. (Det betyder inte att det är dåligt)

Underskatta inte vyn1. Det är nästan som gamla tekniken MS ASP – active server pages

2. Det är nästan som vanlig php, pretty home page

3. Det är nästan som asp.net webforms om man skippar code behind och lägger allt i .asp-sidan

4. Man kan göra en hel del i vyn

Delar i en Vy@model IEnumerable<NewOmtenta.Models.Amne>

@{

ViewBag.Title = "Ämnen";

}

<h2>Ämnen</h2>

<p>

@Html.ActionLink("Skapa ett nytt ämne", "Create")

</p>

Beskriver inkommande data

Sätter sidans titel

Blanda med html Blir en länk till Amne/Create/där Create är Action i controllern Amne

Delar i en Vy<table class="table">

<tr>

<th>

Ämnen

</th>

<th></th>

</tr>

@foreach (var item in Model) {

//rendera ut koden för ämnen här, se nästa slide

</table>

En vy kan innehålla en hel del html

Och man kan loopa igenom data

Delar i en Vy@foreach (var item in Model) {

<tr>

<td>

@Html.DisplayFor(modelItem => item.ANamn)

</td>

<td>

@Html.ActionLink("Ändra", "Edit", new { id=item.Id }) |

@Html.ActionLink("Detaljerad vy", "Details", new { id=item.Id }) |

@Html.ActionLink("Ta bort", "Delete", new { id=item.Id })

</td>

</tr>

}

Skriver ut data

I en vy kan man rendera olika kod om en användare är inloggad

@if (@User.Identity.IsAuthenticated){

<div class="bigtext">

<ol>

@foreach (var item in Model){rendera ut data och html här…}

</ol>

</div>

}

else {

<ol>

@foreach (var item in Model){eller rendera ut data och html här

</ol>}

Blanda in html

I en vy kan man också fixa datum…@{

string s = item.Datum.ToString();

s = s.Replace("00:00:00", "");

s = s.Replace(" ", "");

}

<td>

@s, @Html.DisplayFor(modelItem => item.Dag), …

</td>

Det finns också något som heter vy-modeller – view models

1. En vymodell är en datamodell som görs för att kopplas till en vy

2. Modellen beskriver data

3. Rätt utfört så får man hjälp att passa data till vyn och hantera data i vyn

Exempel vymodell, cat.csnamespace ViewModelWithCats.ViewModel

{

public class Cat

{

// Auto-implemented properties.

public int Age { get; set; }

public string Name { get; set; }

}

}

Exempel vymodell, controllernusing ViewModelWithCats.ViewModel;

namespace ViewModelWithCats.Controllers

{

public class CatController : Controller

{

//

// GET: /Cat/// Här ska action för index komma

◦ }

}

public ActionResult Index(){List<Cat> cats = new List<Cat>

{new Cat(){ Name = "Sylvester", Age=8},new Cat(){ Name = "Whiskers", Age=2 },new Cat(){ Name = "Sasha", Age=14 }};

Cat cat = new Cat { Age = 10, Name = "Fluffy" };cats.Add(cat);return View(cats);

}

Exempel i controllern - linqList<Cat> ordered_cats = new List<Cat> { };

ordered_cats = cats.OrderBy(x => x.Age).ToList();

ordered_cats = cats.OrderBy(x => x.Age).ThenBy(x => x.Name).ToList();

ordered_cats = cats.OrderBy(x => x.Age).Where(x => x.Name == "Sylvester").ToList();

Exempel vymodell, cat/index.cshtml@model IEnumerable<ViewModelWithCats.ViewModel.Cat>

@{

ViewBag.Title = "Index";

}

<h2>Mina katter</h2>

<ul>

@foreach (var item in Model)

{

<li>@Html.DisplayFor(modelItem => item.Name), @Html.DisplayFor(modelItem => item.Age) år</li>

}

</ul>

Och så här blir html-koden (förstås…)<h2>Mina katter</h2>

<ul>

<li>Sylvester, 8 år</li>

<li>Whiskers, 2 år</li>

<li>Sasha, 14 år</li>

<li>Fluffy, 10 år</li>

</ul>

Något mer om LinqIEnumerable<Cat> ordered_cats =

from katt in cats

orderby katt.Name ascending

select katt; (Ordering data)

IEnumerable<Cat> ordered_cats =

from m in cats

where m.Name == ”Sylvester”

select m; (Filtering data)

Mer:Joinig dataGrouping dataPlus mycket mer, tex. samla data från två tabeller eller två listor

M

C

V

Webbläsare Routern Controllern

Action

Entity Frame-work

DataModelDatabasenVyn

Datamodellen håller koll!

1. Requesttill routern

2. Vilken controller?

3. Vilken action?

4. Data? 5. Data?

6. Data!7. Data!8. Data!9. H

tml

HtmlCss

JavascriptBilder

10. Lägg ihopallt till enhelhet

C

V

M1. 2.

3.

M

C

V Ett vanligt sätt att hantera formulärGör en controller med tre action samt två vyer:

1. Action Index() returnerar en vy som innehåller formuläret2. I webbläsaren fyller man i kontrollerna och submittar. Det är formtaggen som avgör var data

ska skickas.3. Formuläret returnerar till en action: GetData(). Den är av typen HttpPost.

Här kan inparametern vara av typen FormCollection men det finns andra sätt att ta in data i metoden.

4. GetData tar emot data och skickar över jobbet till action ShowData(). Den returnerar inte en vy, utan en RedirectToAction()

5. ShowData avslutar med att skicka över informationen till vyn med samma namn.

Det går att se att data levereras antingen ett verktyg i en webbläsare eller i en breakpoint i VisualStudio. Felsökningen kan gå lättare om man delar upp jobbet på tre actions.