HTML 도우미 ASP.NET MVC 스타일 지정

StackOverflow https://stackoverflow.com/questions/40816

  •  09-06-2019
  •  | 
  •  

문제

다음과 같은 HTML 도우미가 있는 경우:

Name:<br />
<%=Html.TextBox("txtName",20) %><br />

CSS 클래스를 어떻게 적용합니까?한 겹으로 포장해야 하나요?아니면 도우미의 HtmlAttributes 속성을 활용해야 합니까?

도움이 되었습니까?

해결책

이를 TextBox 호출에 매개변수로 전달할 수 있습니다.

Name:<br/>    
<%= Html.TextBox("txtName", "20", new { @class = "hello" }) %>

이 줄은 값이 20인 텍스트 상자를 만들고 hello 값이 있는 클래스 속성을 할당합니다.class는 예약어이므로 클래스 앞에 @ 문자를 붙였습니다.다른 속성을 추가하려면 키/값 쌍을 쉼표로 구분하세요.

다른 팁

동일한 요소에 클래스와 스타일을 추가하는 방법입니다.

"x"는 TextBoxID 속성을 사용하여 뷰에 전달된 모델입니다.

@Html.TextBoxFor(x => x.TextBoxID, new { @class = "SearchBarSelect", style = "width: 20px; background-color: green;" })

나는 몇 가지 조사를 한 결과 귀하의 질문에 대한 해결책이 있는 것 같은 이 기사를 발견했습니다.

ASP.NET MVC를 사용한 Ajax 제어 툴킷#

원천:짐짐머만

기사 링크

http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=330

인용하다

따라서 기본적으로 클래스 이름 TextBoxWatermark를 텍스트 상자 입력에 넣는 경우 다음과 같은 워터 마크로 표시하려는 제목이 있습니다.

<input type="text" class"TextboxWatermark" name="username" id="username" title="Must be at least 6 chars" />

또는

<%= Html.TextBox("username", new { @class = "TextboxWatermark", @title = "Must be at least 6 chars" }) %>

두 번째 옵션의 장점은 var var 'username'이라는 Var의 ViewData에 항목이있는 경우 View Engine이 텍스트 상자의 값을 채우도록 추가 이점을 얻는 것입니다.

사용 htmlAttributes tihs와 같은 익명 유형의 매개변수:

<%=Html.TextBox("txtName","20", new { @class = "test"}) %>

도우미 구현 

public static class LabelExtensioncs
{
    public static MvcHtmlString Alarm(this HtmlHelper helper, string target, string text)
    {
        return MvcHtmlString.Create(string.Format("<p class='alert' style='background-color: #b8f89d;border-radius: 5px;width: 100%;'><b>{0}</b><br /><i>{1}</i></p>", target, text));
    }    
}

보기 섹션의 사용법

@Html.Alarm("Title", "please unsure your card no is invisible in your authorized information")

결과enter image description here

동적이 아니기 때문에 스팬을 사용할 필요가 없습니다.

CSS:

.testClass {
color: #1600d3;
}

보기(색인):

@Html.TextBox("expression", "Text to show.", new { @class = "testClass" })

동적 옵션이 필요한 경우 다음과 같이 사용할 수 있습니다.

CSS:

.test class{
background: #ffffff;
}

컨트롤러(테스트용 인덱스):

[HttpGet]
public ActionResult Index()
{
ViewBag.vbColor = "#000000";
return View();
}

보기(색인):

<div>
<span>
@Html.TextBox("expression", "Text to show.", new 
{ @class = "testClass", @style="color: " + 
@ViewBag.vbColor })
</span>
</div>

도움이 되길 바랍니다.

그게 훨씬 더 많은 일인가요?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top