DisplayFor在不同的行上顯示LabelFor MVC

我在MVC中創建了一個編輯頁面，並決定我不希望該ID可編輯，但我確實希望它看起來像其餘的，最好是灰色。DisplayFor在不同的行上顯示LabelFor MVC

這裏是我的財產：

<div class="form-group"> 
    @Html.LabelFor(model => model.EvpId, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10">         
     @Html.DisplayFor(model => model.EvpId, new { htmlAttributes = new { @class = "form-control" } }) 
     @Html.ValidationMessageFor(model => model.EvpId, "", new { @class = "text-danger" }) 
    </div> 
</div>

做一些閱讀後，每個人都似乎使用@Html.DisplayFor這是有道理的，儘管它看起來並不像其餘的建議。

然而調換EditorFor爲DisplayFor我注意到，該標籤是不是在同一條線上時：

enter image description here

什麼是具有這種在同一行對應的標籤的簡單方法，我正在使用標準的開箱即用CSS。頁面上

查看源：

<div class="form-group"> 
    <label class="control-label col-md-2" for="EvpId">Id</label>   
    <div class="col-md-10">         
     2 
     <span class="field-validation-valid text-danger" data-valmsg-for="EvpId" data-valmsg-replace="true"></span> 
    </div> 
</div>

來源

2015-03-02 JsonStatham

你可以發佈生成的html嗎？ – 2015-03-02 17:40:44

@SatwikNadkarny我已經添加了html請求 – JsonStatham 2015-03-02 17:45:40

使用賈森的回答，我能夠做到通過改變<span>的寬度是我想要的不過這似乎升技雜亂：

<span class="form-control" style="width:280px;">@Model.EvpId</span>

我的問題的最終答案是這樣的，因爲它是我最初尋找的：

@Html.EditorFor(model => model.EvpId, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })

希望這可以幫助別人。

來源

2015-03-03 09:52:39 JsonStatham

很高興你找到了答案 - fyi有一個「表單控件靜態」css類，用於靜態內容代替表單控件。 – Kaido 2015-03-03 09:59:14

這裏有一個鏈接['form-control-static']（http：// getbootstrap.com/css/#forms-controls-static）。 – Jasen 2015-03-03 16:22:20

當您使用@Html.DisplayFor()助手是基於類型選擇標記。在這裏它選擇輸出一個裸露的字符串，這會破壞Bootstrap樣式。

<div class="col-md-10">         
    2 <!-- no surrounding tags for EvpId value --> 
    ... 
</div>

做的僅僅是使用純HTML來插入自己的標記

<div class="col-md-10">         
    <span class="form-control-static">@Model.EvpId</span> 
    ... 
</div>

如果你這樣做了很多，或者您也可以創建自定義的助手擴展更多的標記，最簡單的事情。這是一個很簡單的例子：

public static class HtmlHelperExtensions 
{ 
    public static HtmlString IdSpan(this HtmlHelper helper, string id) 
    { 
     return new HtmlString(String.Format("<span class=\"form-control\">{0}</span>", id)); 
    } 
}

用法：

<div class="col-md-10">         
    @Html.Idspan(Model.EvpId) 
    @Html.ValidationMessageFor(model => model.EvpId, "", new { @class = "text-danger" }) 
</div>

來源

2015-03-02 18:43:57 Jasen

這似乎解決方案把ID放回到相同樣式的文本框中，但不可編輯，但是寬度佔用了整個頁面？ – JsonStatham 2015-03-03 09:29:21

寬度將取決於容器的網格類'col-md-10'。 – Jasen 2015-03-03 16:21:07

我有同樣的問題。 Jasen的回答沒有幫助，因爲span沒有將元素放入與標籤相同的水平線中，但是他後來對鏈接到bootstrap doc的評論解決了問題，我們應該使用p標記而不是span。

所以我最終的解決辦法是：

<p class="form-control-static">@Html.DisplayFor(model => model.Contractor.Name) </p>

由於賈森！

來源

2015-04-07 03:34:39

DisplayFor在不同的行上顯示LabelFor MVC

回答

相關問題