مساعدات HTML للتصميم ASP.NET MVC

Question

إذا كان لدي مساعد HTML مثل ذلك:

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

كيف يمكنني تطبيق فئة CSS عليها؟هل يجب علي أن ألفه في فترة؟أو هل أحتاج إلى استخدام خاصية HtmlAttributes الخاصة بالمساعد بطريقة أو بأخرى؟

Answer 1

يمكنك تمريره إلى استدعاء TextBox كمعلمة.

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

سيقوم هذا السطر بإنشاء مربع نص بالقيمة 20 وتعيين سمة الفئة بالقيمة hello.أضع الحرف @ أمام الفصل، لأن الفصل عبارة عن كلمة رئيسية محجوزة.إذا كنت تريد إضافة سمات أخرى، فما عليك سوى فصل أزواج المفتاح/القيمة بفواصل.

Answer 2

هذه هي كيفية إضافة فئة ونمط على نفس العنصر ...

"x" هو النموذج الذي تم تمريره إلى العرض باستخدام خاصية TextBoxID

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

Answer 3

لقد أجريت بعض الأبحاث ووجدت هذه المقالة التي يبدو أنها تحتوي على حل لسؤالك.

مجموعة أدوات التحكم Ajax مع ASP.NET MVC#

مصدر:jimzimmerman

رابط المادة

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" }) %>

ما هو لطيف في الخيار الثاني هو أن تحصل على فائدة إضافية تتمثل في الحصول على محرك العرض لملء قيمة مربع النص إذا كان هناك عنصر في ViewData من viewData.model الذي يحتوي على var اسمه "اسم المستخدم".

Answer 4

استخدم ال htmlAttributes معلمة بنوع مجهول، مثل tihs:

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

Answer 5

تنفيذ المساعد

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")

النتائج

Answer 6

ليست هناك حاجة لاستخدام النطاق، لأنه ليس ديناميكيًا.

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>

نأمل أن يساعد.

Answer 7

هل هذا المزيد من العمل؟