asp.net-mvc
उस्तरा

परिचय

वाक्य - विन्यास

• @ {...}
• @चर का नाम
• @(चर का नाम)
• @के लिये(...){ }
• @ (स्पष्ट अभिव्यक्ति)
• @* टिप्पणियाँ *@

टिप्पणियों

टिप्पणी करें

रेजर की अपनी टिप्पणी वाक्य रचना है जो @* शुरू होती है और *@ समाप्त होती है।

इनलाइन टिप्पणी:

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

बहु-पंक्ति टिप्पणी:

@* Comments can spread
   over multiple
   lines *@

HTML टिप्पणी

तुम भी साथ शुरू सामान्य HTML टिप्पणी वाक्य-विन्यास का उपयोग कर सकते <!-- और के साथ समाप्त --> उस्तरा विचारों में। लेकिन अन्य टिप्पणियों के विपरीत, HTML टिप्पणी के अंदर रेजर कोड अभी भी सामान्य रूप से निष्पादित किया जाता है।

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

उपरोक्त उदाहरण निम्न HTML आउटपुट उत्पन्न करता है:

<!-- Hello World! -->

एक कोड ब्लॉक के भीतर टिप्पणियाँ:

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

HTML को रेजर कोड ब्लॉक के भीतर प्रदर्शित करें

रेज़र कोड ब्लॉक के अंदर, ब्राउज़र केवल 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>
}

ध्यान दें कि रेजर, एक कोड ब्लॉक के अंदर, 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] एक ईमेल की तरह दिखता है और रेजर द्वारा इसे प्रदान किया जाएगा।

नियंत्रण प्रवाह बयानों के अंदर कोड संलग्न करें:

<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 का उपयोग करके इनलाइन कक्षाएं और विधियाँ बनाएँ

रेजर @functions कीवर्ड का उपयोग रेजर फ़ाइल के भीतर इनलाइन उपयोग के लिए कक्षाएं और तरीके पेश करने की क्षमता देता है:

@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 में विशेषता नामों में अंडरस्कोर स्वीकार्य नहीं हैं।

संपादक टेम्प्लेट

रेज़र कोड का पुन: उपयोग करने के लिए संपादक टेम्पलेट एक अच्छा तरीका है। आप संपादक टेम्पलेट को रेजर आंशिक विचारों के रूप में परिभाषित कर सकते हैं और फिर उन्हें अन्य दृश्यों में उपयोग कर सकते हैं।

संपादक टेम्प्लेट आम तौर पर Views/Shared/EditorTemplates/ folder में मौजूद होते हैं, हालांकि उन्हें Views/ControllerName/EditorTemplates/ फ़ोल्डर में भी सहेजा जा सकता है। दृश्य का नाम आम तौर पर उस वस्तु का नाम है जिसे आप टेम्पलेट के लिए उपयोग करना चाहते हैं, जैसे <type>.cshtml ।

यहाँ DateTime के लिए एक सरल संपादक टेम्प्लेट है:

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

फ़ाइल को दृश्य / साझा / EditorTemplate / DateTime.cshtml के रूप में सहेजें।

फिर, इस टेम्पलेट कोड को किसी अन्य दृश्य में कॉल करने के लिए EditorFor का उपयोग करें:

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

फ़ाइल नाम निर्दिष्ट करने के लिए UIHint विशेषता भी है:

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

इस फोन नंबर टेम्प्लेट को व्यू / शेयर / एडिटरटेम्पलेट्स / फोननंबर.शीलेट में परिभाषित करें।

संपादक टेम्पलेट्स को कस्टम प्रकारों के लिए भी परिभाषित किया जा सकता है।

यहाँ एक कस्टम प्रकार है जिसे 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; }
}

यह सबमॉडल के लिए 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*@

रेज़र कंटेंट को @helper पास करें

रेज़र भाग को @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 साझा करें

@ हेल्पर्स को विचारों के बीच साझा किया जा सकता है।

उन्हें फ़ोल्डर में बनाया जाना चाहिए App_Code

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

//call

@MenuHelpers.CreatePrimaryBootstrapButton("my button")

App_code में परिभाषित @ हेल्पर में ग्लोबल्स @Url और @Html डिफ़ॉल्ट रूप से उपलब्ध नहीं हैं। आप उन्हें इस प्रकार जोड़ सकते हैं (अपने 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; }
    }
 }