004.MVC views, Helper Methods

I. View basics-
View Definition:
User interface, which is the display application user Interface (UI) component
Web application: page
Role:
1. Output/display model data
2. Entry and exit submissions
Views suggest storing views in the View folder location

View Engine (understanding): The intended engine, here refers to: the software that handles the view (inside the Frame)
asp. NET Web Forms provide a view engine called the Web Forms engine
Support for Web Forms engine in asp. MVC1 and MVC2 versions
In addition to supporting the Web Forms engine, the Asp. net MVC3 version also provides a new view engine called the Razor (view) engine
Razor engine is more clear and concise, it is recommended to use in the project

Two view engines in Asp. MVC3.0
1.Web Form view Engine [aspx view engine]: working with Web Forms [handling. aspx files]
2.Razor View engine [razor engine]: handling razor views [handling. cshtml files]

The difference between the web and the Razor engine declares Variables:
Web engine variables <%=name%>: declaring characters more, inconvenient to use
Razor engine variable @name: more clear and concise, optimize the performance of the page, save traffic

Razor View Engine Features Advantages:
Razor view features advantages of design principles:
Clear and concise, with @ instead of the once Web Form <%=%>
As clean as possible, the status of the previous request is not reserved (not reserved) without special requirements
Razor: Original razor, Here analogy this type of view clean and concise, try to use!

Working principle:
Web client (browser) → server-side processing
↑↓
↑net framwork
↑↓
↑↓
↑asp.net Web Forms
↑MVC Routing component →→ view engine
↑↓
Client processing ←←razor View engine

Razor Engine:
The 1.Razor engine compiles the view in the Program. the view is converted to a C # class and then compiled
The file suffix of the razor view is. cshtml
The contents of the Razor view Include:
A. Static content, such as: HTML markup (html course, CSS)
B. Dynamic content: dynamic content is generated at run time (client script [language] written by the + server-side scripting language [written]) (javascript,jquery,ajax and other client technologies)
Answer: As with Web Forms
2. Key learning:
Dynamic content written using Server-side scripting [language]

Two. Razor Syntax
Attention:
Not suitable for razor syntax to write a large number of complex business logic on the razor page, you can write a small amount and view-related logic!

Learn the new syntax:
Razor syntax [@ begins with syntax] follows C # syntax specification

Method 1:
Inline code (code rendering block syntax), embedding C # code in the Razor input file
For small amounts of attempted logic, such as if or foreach code snippets, must be written using the Page's default Service-side language, which executes during the rendering of the page
A. There are two ways to use inline code
1>@ A single statement that does not require a semicolon to end. such as: @ViewBag. Title used to make calls (variables, Methods)
2>@{...} A single statement, or multiple statements, requires a semicolon to end. for example: @{viewbag.title= "Index", which declares or defines a variable [for variable assignment] does not render! equivalent to writing in the controller!
B. statement:
@if
@foreach
@for
C. Annotations @* *@
D. () use of @

Exercise: for foreach output a table with 50 rows, 3 columns

Method 2:
What is an HTML helper method:
Is asp. >> methods for HTML elements >> last: HTML elements in the browser

Why Encapsulation:
Easy to use, easy to maintain
Experience!! Attention:
Most of the html-assisted methods, really convenient to use, easy to maintain, but also not good!!
There are also some HTML elements that do not have corresponding footprints! Sumit often used, no encapsulation!
When designing a razor Web page: how does the HTML Control +html helper method choose?!
Text Box: There are all can (like to use which with which, personal hobbies, if you want to bind the data to display the model, it is best to use the HTML helper METHOD)

How to Encapsulate: method name >> tag type input type= "?"
Properties of parameters >> tags id= "?" name= "?"
Tags have many properties
Parameters are not many >> encapsulated, corresponding to some of the commonly used tag attributes
Infrequently used tag properties, if necessary (with anonymous data Type)
Code example:
HTML helper Method Code:
@Html. TextBox ("t1") <br/>
@Html. TextBox ("t2", 123) <br/>
@Html. TextBox ("t3", "n", new {style= "background-color:red;color:black;width:300px;"})
The browser automatically converts the code into html:
<input id= "t1" name= "t1" type= "text" value= ""/><br/>
<input id= "t2" name= "t2" type= "text" value= "123"/><br/>
<input id= "t3" name= "t3" style= "background-color:red;color:black;width:300px" type= "text" value= "/>"

The MVC framework provides an HTML helper method that helps to generate common, single HTML elements or multiple HTML elements to facilitate maintenance of views.

Three. weakly-typed HTML Helper methods:

1.URL Helper Methods:
Final Essence: path; [direct handwriting]
Advantages:
Good readability, can be maintained, can use ~ means to find files from the root directory!~ belongs to the syntax in C #
Attention:
Image control, It is not found, it is recommended to specify the path with the URL helper method

Path >>url helper Methods >> paths
@Url. Content ("~/images/my.bmp") <br/>
/images/my.bmp
@Url. Action ("Login", "Student") <br/>
/student/login
@Url. RouteUrl (new {controller= "C", action= "F"})
/c/f

1. Layout page:
Layout pages are used as Master pages, and are sometimes called Master pages
Layout Master
2. Content page: contains partial markup (does not contain html,head,body)
3. Full page = Layout page + content page
[email protected] () Render page Body purpose: placeholder method (placeholder Control)
5. How to make a content page select a layout page
Layout = "~/views/shared/_layout.cshtml";
6. Exercise: Create two layout pages
Create a method for a content page that lets the content page use the first layout page,
Then let this content page use a second layout page
7. Extension: You can test the previous master page or good homepage tag to razor, layout page, in the appropriate location: @RenderBody ()

2.html[input] Helper Method
1.html.textbox
2.html.password
3.html.hidden
4.html.textarea
5. Value String Type
Exercise: first create a typical entity class and then use the above control value string type

radio button Use note
1: general use of three parameters of the overload, whether selected by the third parameter, generally used for multiple items, but can only select one item of the field (gender, Whether)
What is the practical usage? how to use it correctly and rationally?
See: DAY03MVC View Razor Syntax HTML helper method view output and display model data >>F2 view
Use of check boxes
1: relatively simple
@Html. CheckBox ("cb", False) Sports <br/>
@Html. CheckBox ("cb", True) Music <br/>
@Html. CheckBox ("cb", True) Art <br/>
Use of Drop-down lists
@Html. DropDownList ("ddl1", New selectlist (new string[]{"male", "female", "unknown"}) <br/>
@Html. DropDownList ("ddl2", New selectlist (new string[]{"male", "female", "unknown"}), "please Select") <br/>

Remember the grammar!!!!! *****

------------------------------------------------------auxiliary methods------------------------------------------

I. Strongly typed HTML input helper methods

Weak type: Html. Method name ()
Strong type (3 conditions):
1.Html. Method name for ()
2. The current page must be declared: @model ... Model
The controller must use the model to pass values to the view
3.Html. method name for (parameter Lambda Expression)
Html.textboxfor (x=>x.t)
4. Note: If the model of the collection type, the parameter lambda how to write x=>o.id//two cannot be the same

Which one is used:
1. The general situation uses the strong type to compare many! (closely linked to the Model)
2. But for Droplist,listbox common weak types of

Exercise 1:
First create a typical entity class and then use the texbox; Password; Hidden,textarea the strongly typed input helper method to display the value of the corresponding field to display the data
Exercise 2:
first, Create a typical entity class, return multiple objects to the view, display in the view with a strongly typed input helper method, textbox common
Exercise 3: First create a typical entity class, return an object to the view, and use the Model template helper method in the view to display the P20 method all call

Two. Model Template Input helper method
Just specify the model object or property that you want to edit, and the rest of the details work is computed and rendered by the MVC framework
Automatically selects the appropriate object to display depending on the type of field

Controller code:
Public ActionResult Index2 ()
{
Users users = new users
{
Id = 1,
Name = "zhang san",
Birthday = DateTime.Now.AddYears (-20),//20-year-old birthday, today-20
sexstring = "male",
Sexbool = True
};
return View (users);
}
View Code:
<div>
@Html. Editorformodel () <br/>
@Html. Label ("Name") <br/>
@Html. DisplayText ("Name") <br/>
@Html. Display ("Name") <br/>
@Html. Editor ("Name") <br/>
@Html. DisplayText ("sexbool")
@Html. Display ("sexbool")
@Html. Editor ("Name") <br/>
@Html. Editor ("sexbool") <br/>

@Html. Editorformodel () <br/>
@Html. labelfor (x=>x.name) <br/>
@Html. displaytextfor (x=>x.name) <br/>
@Html. displayfor (x=>x.name) <br/>
@Html. editorfor (x=>x.name) <br/>
@Html. displaytextfor (x=>x.name)
@Html. displayfor (x=>x.sexbool)
@Html. editorfor (x=>x.name) <br/>
@Html. editorfor (x=>x.name) <br/>
</div>
Model Code:
public class Users
{
public int Id {get; set;}
public string Name {get; set;}
Public DateTime Birthday {get; set;}

public string sexstring {get; set;}
public bool Sexbool {get; set;}

}

THREE. View Controller Input Commit

Form helper Methods
View Input Submit (1)-submit button
View input Submit view input Submit (2)-hyperlink
Get requests and POST requests

1..asp.net Mvc-view-controller
Controller method Receive input
Get by Context Object
The Controller method receives the input through the action method parameter gets
Model binding

2. View input Submission
Page Work:
Two situations are actually used:
A. View [browse news] make a request
Get read operations
B. Interaction [interaction] (see addition procedure 2):
Make a 1th request to get an initial page F1
Get first load input information,
Issue a 2nd request for submission >> processing F2
Post-commit processing (read-write)
Login
Registered
add, Modify ...

* Focus: enter, submit, and process the content of the submission * * * *

There are two ways to enter submissions:
Post mode: form input field information: a large number of high security requirements!
Get mode: URL query string information http://...?a=123&b=ok

Post submission in asp: (the contents of the form input Field)
Submit the contents of the page, form input field content
1> have a form
3 ways to type your form:
Notation 1: Original
<form action= "/home/f" method= "post" ></form>
How to form 2:html forms aid
@{html.beginform ();}
@* Write Control *@
@{html.endform ();}
3:html Form helper Method (common ok!!)
@using (html.beginform ())
{ }
2> using the Submit submit button
There are only 1 ways of writing: Primitive

asp,net mvc in Get commits: (information for URL query Strings)
1>url Hyperlink notation 3:
Notation 1: Original overload?
<a href= "/home/f3?a=123&b=ok" > Insert </a>
Syntax 2: Hyperlink helper method overloading

The controller handles get and post requests:

-get requests for read operations, that is, the first load
-post request for write operation, i.e. submit processing, such as increment, delete, change etc.

Features (* * * *):
Because of a web interaction, requires two requests = Two methods, simply, two methods to apply the overload, while labeling is a get method or Post method
Actual project: Login to login (get), login (post)
Add Insert (get), Insert (post)

See Day01mvc addition procedure Method 2
Two view methods are written as overloaded methods, introducing two features [httpget] and [httppost]
First load using [httpget]
Working with [httppost]

Controller code:
public class Ccontroller:controller
{
GET:/C/
F1,f2 changed to F method overload of the same name
[httpget]//can be omitted
Public ActionResult F ()
{
return View ();
}

[httppost]//cannot Omit
Public ActionResult F (m M)
{
1. Get input by parameters, automatically get

2. handling
M.C = M.A + m.b;
3. Output
VIEWBAG.A = m.c;
Modelstate.clear ();
return View (m);
}

Model Code:
public class M
{
public int A {get; set;}
public int B {get; set;}
public int C {get; set;}
}

View Code:
<body>
@using (html.beginform ("F", "C"))
{
<span> addend </span> @Html textboxfor (x=>x.a) <br/><br/>
<span> summand </span> @Html textboxfor (x=>x.b) <br/><br/>
<input id= "Submit1" type= "submit" value= "calculation"/><br/>
@*<span> The result is:</span> @ViewBag. a*@
<span> @Html. textboxfor (x=>x.c) </span>
}
</body>

Global Code:
public static void RegisterRoutes (routecollection routes)
{
Routes. Ignoreroute ("{resource}.axd/{*pathinfo}");

Routes. MapRoute (
"Default",//route Name
' {controller}/{action}/{id} ',//URL with parameter
New {controller = "C", action = "F", id = urlparameter.optional}//parameter Default value
);
}

The Controller method receives input Information:
* The Controller method needs to fetch data from the request, there are two main methods:

Method 1: get (preferred, use More) by using the method parameters
Use the model, or define the parameter name as the input control name
Method 2. Get through the context Object:
Request
Sessions session and Web Forms use the same way!

Model binding [concept] (module Binding) 2.1
The process of converting and moving into a model automatically (fetching data from a request) by asp.

Common context Objects:
Property Type description
Request.url URL of the currently requested URL
request.userhostaddress String The IP address of the current request
RequestForm Name-number of requests sent by post
Requestquerystring name-value to request parameters sent by Get mode
Request.Files
Httpcontext.session Httpsessionstatebase The session state of the browser

004.MVC views, Helper Methods