1

我的任务是安排页面中的文本框。这是我的html代码。此代码是自动生成的。我想通过创建来默认安排文本框的位置。

@model Resume.Models.Resume

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Resume</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Gender)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Gender)
            @Html.ValidationMessageFor(model => model.Gender)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Address)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Phone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Phone)
            @Html.ValidationMessageFor(model => model.Phone)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DateOfBirth)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.DateOfBirth)
            @Html.ValidationMessageFor(model => model.DateOfBirth)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Age)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.City)
            @Html.ValidationMessageFor(model => model.City)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Country)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Country)
            @Html.ValidationMessageFor(model => model.Country)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.HighSchool)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.HighSchool)
            @Html.ValidationMessageFor(model => model.HighSchool)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.CollegePer)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CollegePer)
            @Html.ValidationMessageFor(model => model.CollegePer)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Qualification)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Qualification)
            @Html.ValidationMessageFor(model => model.Qualification)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DegreeYearOfPassout)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.DegreeYearOfPassout)
            @Html.ValidationMessageFor(model => model.DegreeYearOfPassout)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PreviousCompanyName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PreviousCompanyName)
            @Html.ValidationMessageFor(model => model.PreviousCompanyName)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

我怎样才能做到这一点？是否有任何 jquery 插件或任何 jquery 代码？

4

5 回答 5

0

如果你正在使用它@Html.EditorFor(model => model.Age)，那么页面上元素的 id 将是 #age ..

<style>
#age {
ur css here 
}
</style>
use this style to arrange for each once ..
于 2013-02-28T10:33:26.817 回答
0

如果您将 ID 添加到您的元素，您可以在 CSS 中完成。通过指定 ID

就像是 ：

#ID_ELEMENT
{
 attribute : ...;
}
于 2013-02-27T13:13:11.813 回答
0

如果您想避免编写 javascript，则这些元素中的每一个都有类，因此您可以很容易地在 css 中定位它们。如果您需要为特定的标记做任何事情，但是您需要将 ID 添加到生成的标记中，或者使用一些更高级的 css 选择器技术，但是随着代码的生成使其更加健壮，我建议您使用 ID，因为您不能授予元素的顺序。

于 2013-02-27T13:31:50.787 回答
0

使用 jquery，您可以通过 id 获取元素（您必须设置它们的 id），并操作它们的 css 属性。

我说的是 id，以防您需要将它们定位在不同的位置。如果您需要移动同一类的所有对象，您可以按类获取它们（将 # 选择器更改为 .）。

jquery代码如下：

$('#ID').css({ 'ATRIBUTE NAME': 'VALUE' });

所以，让我们看一个例子......

如果您想更改 id=myElement 的元素的显示，您可以...

$('#myElement').css({ 'display': 'none' });

您可以在此处或此处找到适当的文档

于 2013-02-27T13:07:52.877 回答
0

定义 CSS 类

div.editor-field input[type=text]
{
 margin: 0 0 0 0; //just a sample position
 padding: 0 0 0 0;
 ....
}

然后每次你掉

 <div class="editor-field">
            @Html.EditorFor(model => model.CollegePer)

        </div>

它会自动排列

于 2013-02-27T14:00:34.223 回答