asp.net-mvc
면도칼

소개

통사론

• @ {...}
• @variableName
• @ (variableName)
• @for (...) {}
• @ (명시 적 표현식)
• @* 코멘트 *@

비고

댓글 추가

면도기에는 @* 시작하고 *@ 끝나는 자체 주석 구문이 있습니다.

인라인 코멘트 :

<h1>Comments can be @*hi!*@ inline</h1>

여러 줄 주석 :

@* Comments can spread
   over multiple
   lines *@

HTML 주석

Razor보기에서 <!-- 시작하고 --> 로 끝나는 일반 HTML 주석 구문을 사용할 수도 있습니다. 그러나 다른 주석과 달리 HTML 주석의 Razor 코드는 여전히 정상적으로 실행됩니다.

@{
    var hello = "Hello World!"; 
} 
<!-- @hello -->

위의 예제는 다음 HTML 출력을 생성합니다.

<!-- Hello World! -->

코드 블록 내의 주석 :

@{
    // This is a comment
    var Input = "test";
}

면도기 코드 블록 내에 HTML 표시

Razor 코드 블록 안에있는 동안 브라우저는 코드가 이스케이프 된 경우에만 HTML 코드를 인식합니다.

단일 행에 @: 를 사용하십시오.

@foreach(int number in Model.Numbers)
{
    @:<h1>Hello, I am a header!</h1>
}

여러 줄의 경우 <text> ... </text> 을 사용하십시오.

@{
    var number = 1;

    <text>
        Hello, I am text
        <br / >
        Hello, I am more text!
    </text>
}

Razor는 코드 블록 내부에서 HTML 태그를 인식합니다. 따라서 HTML 태그 주위에 text 태그를 추가하는 것은 필요하지 않습니다 (여전히 올바르지 만). 예를 들면 다음과 같습니다.

@{
    var number = 1;
    <text>
        <div>
            Hello, I am text
            <br / >
            Hello, I am more text!
        </div>
    </text>
}

기본 구문

면도기 코드는 HTML 코드 내의 아무 곳에 나 삽입 할 수 있습니다. 면도기 코드 블록은 @{ ... } 로 묶습니다. 인라인 변수 및 함수는 @ 시작합니다. 면도기 안의 코드는 일반적인 C # 또는 VB 규칙을 따릅니다.

한 줄 진술 :

@{ var firstNumber = 1; }

다중 행 코드 블록 :

@{
    var secondNumber = 2;
    var total = firstNumber + secondNumber;
}

변수 인라인 사용 :

<h1>The total count is @total</h1>

변수 인라인을 명시 적으로 사용 :

<h2>Item@(item.Id)</h2>

이 특별한 예제에서는 [email protected] 가 전자 메일처럼 보이고 Razor에 의해 렌더링 될 것이므로 암시 적 구문을 사용할 수 없습니다.

제어 흐름 문 내부에 코드를 포함하십시오.

<h1>Start with some HTML code</h1>

@for (int i = 0; i < total; i++){
    Console.Write(i);
}

<p>Mix in some HTML code for fun!</p>
<p>Add a second paragraph.</p>

@if (total > 3)
{
    Console.Write("The total is greater than 3");
}
else
{
    Console.Write("The total is less than 3");
}

이 구문은 for , foreach , while , if , switch 등과 같은 모든 명령문에 사용됩니다.

코드 내부에 코드 추가하기 :

@if (total > 3)
{
    if(total == 10)
    {
        Console.Write("The total is 10")
    }
}

두 번째 if 에는 @ 를 입력 할 필요가 없습니다. 코드 다음에는 기존 코드 뒤에 다른 코드를 입력하면됩니다.

당신이 HTML 요소 다음 코드를 추가하려는 경우 당신은 입력 할 필요합니까 @ .

@ 문자 이스케이프

대부분의 경우 면도기 파서는 이메일 주소와 같은 부분이 아니라 코드의 일부로 @ 기호를 사용해야 할 때를 파악할만큼 똑똑합니다. 아래 예제에서는 @ 기호를 이스케이프 처리하지 않아도됩니다.

<p>Reach out to us at [email protected]</p>

그러나 경우에 따라 @ 기호의 사용이보다 모호하며 아래 예제와 같이 @@ 하여 명시 적으로 이스케이프 처리해야합니다.

<p>Join us @@ Stack Overflow!</p>

또는 HTML로 인코딩 된 @ 문자를 사용할 수 있습니다.

<p>Join us &#64; Stack Overflow!</p>

@functions를 사용하여 인라인 클래스 및 메서드 만들기

Razor @functions 키워드를 사용하면 Razor 파일에서 인라인 사용을위한 클래스와 메소드를 소개 할 수 있습니다.

@functions
{
    string GetCssClass(Status status)
    {
        switch (status)
        {
            case Status.Success:
                return "alert-success";
            case Status.Info:
                return "alert-info";
            case Status.Warning:
                return "alert-warning";
            case Status.Danger:
            default:
                return "alert-danger";
         }
     }
}


<label class="alert @GetCssClass(status)"></label>

클래스에 대해서도 동일한 작업을 수행 할 수 있습니다.

@functions
{
    class Helpers
    {
        //implementation
    }
}

이름에 - (하이픈)이있는 사용자 정의 속성 추가

이름에 - (하이픈)이있는 면도기를 통해 속성을 추가해야하는 경우 간단히 할 수 없습니다

@Html.DropDownListFor(m => m.Id, Model.Values, new { @data-placeholder = "whatever" })

컴파일되지 않습니다. data- * 속성은 요소에 추가 값을 추가하기 위해 html5에서 유효하고 공통적입니다.

그러나 다음은 작동합니다.

@Html.DropDownListFor(m => m.Id, Model.Values, new { @data_placeholder = "whatever" })

렌더링 될 때 "_"은 "-"로 대체되기 때문입니다.

html의 속성 이름에는 밑줄을 사용할 수 없으므로이 방법이 유용합니다.

편집기 템플릿

편집기 템플릿은 Razor 코드를 재사용하는 좋은 방법입니다. 편집기 템플릿을 Razor 부분 뷰로 정의한 다음 다른 뷰에서 사용할 수 있습니다.

편집기 템플릿은 일반적으로 Views/Shared/EditorTemplates/ 폴더에 있지만 Views/ControllerName/EditorTemplates/ 폴더에도 저장할 수 있습니다. 보기의 이름은 일반적으로 <type>.cshtml 과 같이 템플릿을 사용하려는 개체의 이름입니다.

다음은 DateTime을위한 간단한 편집기 템플릿입니다.

@model DateTime
<div>
   <span>
      @Html.TextBox("", Model.ToShortDateString(), new { data_date_picker="true" })
   </span>
</div>

파일을 Views / Shared / EditorTemplate / DateTime.cshtml 으로 저장합니다.

그런 다음 EditorFor 를 사용하여 다른보기에서이 템플릿 코드를 호출합니다.

@Html.EditorFor(m => m.CreatedDate)

파일 이름을 지정하는 UIHint 속성도 있습니다.

public class UiHintExampleClass
{
    [UIHint("PhoneNumber")]
    public string Phone { get; set; }
}

이 전화 번호 템플릿은 Views / Shared / EditorTemplates / PhoneNumber.cshtml에 정의하십시오.

사용자 정의 유형에 대해서도 편집기 템플리트를 정의 할 수 있습니다.

다음은 SubModel 이라는 사용자 정의 유형입니다.

public class SubModel
{
    public Guid Id { get; set;} 
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

public class Model
{
    public Guid Id { get; set; }
    public DateTime Created {get; set; }
    
    public SubModel SubModel{get; set; }
}

이것은 SubModel을위한 EditorTemplate입니다.

@model SubModel
<div class="form-group">
    @Html.LabelFor(m => m.FirstName)
    @Html.TextBoxFor(m => m.FirstName)
</div>
<div class="form-group">
    @Html.LabelFor(m => m.LastName)
    @Html.TextBoxFor(m => m.LastName)
</div>

이제 모델보기가 간단 해집니다.

@model Model
@Html.EditorFor(m => m.CreatedDate)
@Html.EditorFor(m => m.SubModel, new { @Prefix = "New"}) 
@* the second argument is how you can pass viewdata to your editor template*@

Razor 콘텐츠를 @helper에 전달합니다.

Razor 파트를 @helper (예 : HTML div)로 보냅니다.

@helper WrapInBox(Func<Object, HelperResult> content)
{
    <div class="box">@content(null) </div>
}

//call 
@WrapInBox(@<div>
                I'm a inner div
            </div>)

뷰 전체에서 @helpers 공유

@Helpers는보기간에 공유 될 수 있습니다.

이 파일은 App_Code 폴더에 만들어야합니다.

@helper CreatePrimaryBootstrapButton(string label)
{
    <button type="button" class="btn btn-primary">@label</button>
}

//call

@MenuHelpers.CreatePrimaryBootstrapButton("my button")

전역 변수 @Url 과 @Html 은 App_code에 정의 된 @Helper에서 기본적으로 사용할 수 없습니다. 다음과 같이 추가 할 수 있습니다 (App_code 폴더의 모든 .cshtml에 대해)

@*  Make @Html and @Url available *@
@functions
{
    private new static HtmlHelper<object> Html
    {
        get { return ((WebViewPage)CurrentPage).Html; }
    }

    private static UrlHelper Url
    {
        get { return ((WebViewPage)CurrentPage).Url; }
    }
 }