Question

我有一项任务是在页面中排列文本框。这是我的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代码？

Answer 1

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

我用id说，如果你需要将它们放在不同的位置。如果你需要移动同一个类的所有对象，你可以按类获取它们（更改a的＃选择器。）。

jquery代码如下：

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

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

如果要更改id = myElement的元素的显示，则可以执行...

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

您可以找到合适的文档here或here

Answer 2

如果您在元素中添加ID，则可以在CSS中执行此操作。通过指定ID

类似的东西：

#ID_ELEMENT
{
 attribute : ...;
}

Answer 3

如果你想避免编写javascript，那么每个元素都有类，所以你可以很容易地在你的css中定位它们。如果你需要为特定的那些做任何事情，你需要在生成的标记中添加ID，或者使用一些更高级的css选择器技术，但是因为生成代码以使其更强大我会推荐ID，因为你不能授予元素的顺序。

Answer 4

定义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>

将自动安排

Answer 5

如果您正在使用此@Html.EditorFor(model => model.Age)，则页面上元素的ID将为#age ..

<style>
#age {
ur css here 
}
</style>
use this style to arrange for each once ..

如何在.net mvc4中使用jquery安排文本框？

5 个答案: