ASP.Net MVC Razor HTML Help 範例

 

@{
    ViewBag.Title = "RazorHelp";
}

<h2>RazorHelp</h2>

<h3>文字框（input type="text"）</h3>

@{
    string defaultValue = "Default Value";
}

<h5>有預設值</h5>
@Html.TextBox("textBoxName", defaultValue, new { @class = "form-control" })

<h5>預設值為空</h5>

@Html.TextBox("textBoxName", null, new { @class = "form-control" })
<hr />

<h3>下拉選單（select）</h3>

<h5>有預設值</h5>
@{
    List<SelectListItem> items = new List<SelectListItem>
{
        new SelectListItem { Text = "Option 1", Value = "1" },
        new SelectListItem { Text = "Option 2", Value = "2", Selected = true },
        new SelectListItem { Text = "Option 3", Value = "3" }
    };
}

@Html.DropDownList("dropdownName", items, "Select an option", new { @class = "form-control" })

<h5>預設值為空</h5>

@{
    List<SelectListItem> items2 = new List<SelectListItem>
    {
        new SelectListItem { Text = "Option 1", Value = "1" },
        new SelectListItem { Text = "Option 2", Value = "2" },
        new SelectListItem { Text = "Option 3", Value = "3" }
    };
}

@Html.DropDownList("dropdownName", items2, "Select an option", new { @class = "form-control" })

<hr />

<h3>checkbox</h3>

@{
    bool isChecked = true; // 設置是否選中
}

<h5>有預設值</h5>

@Html.CheckBox("checkBoxName", isChecked, new { @class = "form-check-input" })

<h5>預設值為空</h5>

@Html.CheckBox("checkBoxName", false, new { @class = "form-check-input" })

<hr />

<h3>radio button</h3>

@{
    string selectedValue2 = "option2"; // 選擇預設值
}

<h5>有預設值</h5>

<label>
    @Html.RadioButton("radioButtonName", "option1", selectedValue2 == "option1") Option 1
</label>

<label>
    @Html.RadioButton("radioButtonName", "option2", selectedValue2 == "option2") Option 2
</label>

<label>
    @Html.RadioButton("radioButtonName", "option3", selectedValue2 == "option3") Option 3
</label>


<h5>預設值為空</h5>

<label>
    @Html.RadioButton("radioButtonName", "option1") Option 1
</label>

<label>
    @Html.RadioButton("radioButtonName", "option2") Option 2
</label>

<label>
    @Html.RadioButton("radioButtonName", "option3") Option 3
</label>

<hr />

<h3>輸出資料包含HTML</h3>

@{
    string htmlStr = "123<br/>456";
}


<h5>沒處理, 直接輸出文字</h5>

<div>@htmlStr</div>


<h5>html.raw()處理, 輸出HTML格式</h5>

<div>@Html.Raw(@htmlStr)</div>

<hr />