asp.net-mvc
HTML 도우미
수색…
소개
HTML 도우미는 뷰에서 HTML 요소를 렌더링하는 데 사용되는 메소드입니다. 이들은 System.Web.Mvc.HtmlHelper
네임 스페이스의 일부입니다.
다양한 유형의 HTML 도우미가 있습니다.
표준 HTML 도우미 : Html.TextBox()
와 같은 일반적인 HTML 요소를 렌더링하는 데 사용됩니다.
강력한 형식의 HTML 도우미 :이 도우미는 Html.TextBoxFor()
와 같은 모델 속성을 기반으로 HTML 요소를 렌더링합니다.
사용자 지정 HTML 도우미 : 사용자가 MvcHtmlString
을 반환하는 사용자 지정 도우미 메서드를 만들 수 있습니다.
사용자 정의 HTML 도우미 - 표시 이름
/// <summary>
/// Gets displayName from DataAnnotations attribute
/// </summary>
/// <typeparam name="TModel"></typeparam>
/// <typeparam name="TProperty"></typeparam>
/// <param name="htmlHelper"></param>
/// <param name="expression"></param>
/// <returns></returns>
public static MvcHtmlString GetDisplayName<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
{
var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
var value = metaData.DisplayName ?? (metaData.PropertyName ?? ExpressionHelper.GetExpressionText(expression));
return MvcHtmlString.Create(value);
}
사용자 정의 도우미 - 렌더링 제출 버튼
/// <summary>
/// Creates simple button
/// </summary>
/// <param name="poHelper"></param>
/// <param name="psValue"></param>
/// <returns></returns>
public static MvcHtmlString SubmitButton(this HtmlHelper poHelper, string psValue)
{
return new MvcHtmlString(string.Format("<input type=\"submit\" value=\"{0}\">", psValue));
}
HTML 출력을 포함한 HtmlHelper 샘플의 전체 목록
HtmlHelper.Action()
-
@Html.Action(actionName: "Index")
출력 :Index()
라는 작업 메서드로 렌더링 된 HTML
-
@Html.Action(actionName: "Index", routeValues: new {id = 1})
출력 : Action 메서드에서 렌더링 한 HTMLIndex(int id)
-
@(Html.Action("Index", routeValues: new RouteValueDictionary(new Dictionary<string, object>{ {"id", 1} })))
출력 : Action 메서드에서 렌더링 한 HTMLIndex(int id)
-
@Html.Action(actionName: "Index", controllerName: "Home")
output :HomeController
에서Index()
라는 액션 메소드에 의해 렌더링 된 HTML
-
@Html.Action(actionName: "Index", controllerName: "Home", routeValues: new {id = 1})
output :HomeController
에서Index(int id)
라는 액션 메소드에 의해 렌더링 된 HTML
-
@Html.Action(actionName: "Index", controllerName: "Home", routeValues: new RouteValueDictionary(new Dictionary<string, object>{ {"id", 1} }))
output :HomeController
에서Index(int id)
라는 액션 메소드에 의해 렌더링 된 HTML
HtmlHelper.ActionLink()
-
@Html.ActionLink(linkText: "Click me", actionName: "Index")
출력 :<a href="Home/Index">Click me</a>
-
@Html.ActionLink(linkText: "Click me", actionName: "Index", routeValues: new {id = 1})
출력 :<a href="Home/Index/1">Click me</a>
-
@Html.ActionLink(linkText: "Click me", actionName: "Index", routeValues: new {id = 1}, htmlAttributes: new {@class = "btn btn-default", data_foo = "bar")
출력 :<a href="Home/Index/1" class="btn btn-default" data-foo="bar">Click me</a>
-
@Html.ActionLink()
출력 :<a href=""></a>
@HtmlHelper.BeginForm()
-
@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new {id="form1",@class = "form-horizontal"}))
출력 :<form action="/MyController/MyAction" class="form-horizontal" id="form1" method="post">
표준 HTML 도우미와 HTML 출력
-
@Html.TextBox("Name", null, new { @class = "form-control" })
출력 :<input class="form-control" id="Name"name="Name"type="text"value=""/>
-
@Html.TextBox("Name", "Stack Overflow", new { @class = "form-control" })
출력 :<input class="form-control" id="Name"name="Name"type="text" value="Stack Overflow"/>
-
@Html.TextArea("Notes", null, new { @class = "form-control" })
출력 :<textarea class="form-control" id="Notes" name="Notes" rows="2" cols="20"></textarea>
-
@Html.TextArea("Notes", "Please enter Notes", new { @class = "form-control" })
출력 :<textarea class="form-control" id="Notes" name="Notes" rows="2" cols="20" >Please enter Notes</textarea>
-
@Html.Label("Name","FirstName")
출력 :<label for="Name"> FirstName </label>
-
@Html.Label("Name", "FirstName", new { @class = "NameClass" })
출력 :<label for="Name" class="NameClass">FirstName</label>
-
@Html.Hidden("Name", "Value")
출력 :<input id="Name" name="Name" type="hidden" value="Value" />
-
@Html.CheckBox("isStudent", true)
출력 :<input checked="checked" id="isStudent" name="isStudent" type="checkbox" value="true" />
-
@Html.Password("StudentPassword")
출력 :<input id="StudentPassword" name="StudentPassword" type="password" value="" />
사용자 정의 도우미 - 레이블이있는 라디오 버튼 렌더링
public static MvcHtmlString RadioButtonLabelFor<TModel, TProperty>(this HtmlHelper<TModel> self, Expression<Func<TModel, TProperty>> expression, bool value, string labelText)
{
// Retrieve the qualified model identifier
string name = ExpressionHelper.GetExpressionText(expression);
string fullName = self.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name);
// Generate the base ID
TagBuilder tagBuilder = new TagBuilder("input");
tagBuilder.GenerateId(fullName);
string idAttr = tagBuilder.Attributes["id"];
// Create an ID specific to the boolean direction
idAttr = string.Format("{0}_{1}", idAttr, value);
// Create the individual HTML elements, using the generated ID
MvcHtmlString radioButton = self.RadioButtonFor(expression, value, new { id = idAttr });
MvcHtmlString label = self.Label(idAttr, labelText);
return new MvcHtmlString(radioButton.ToHtmlString() + label.ToHtmlString());
}
예 : @Html.RadioButtonLabelFor(m => m.IsActive, true, "Yes")
사용자 지정 도우미 - 날짜 시간 선택 도구
public static MvcHtmlString DatePickerFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
{
var sb = new StringBuilder();
var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
var dtpId = "dtp" + metaData.PropertyName;
var dtp = htmlHelper.TextBoxFor(expression, htmlAttributes).ToHtmlString();
sb.AppendFormat("<div class='input-group date' id='{0}'> {1} <span class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></span></div>", dtpId, dtp);
return MvcHtmlString.Create(sb.ToString());
}
예:
@Html.DatePickerFor(model => model.PublishedDate, new { @class = "form-control" })
Bootstrap.v3.Datetimepicker 를 사용하는 경우 JavaScript는 아래와 같습니다.
$('#dtpPublishedDate').datetimepicker({ format: 'MMM DD, YYYY' });
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow