使用局部視圖來表示表格行

我想用局部視圖來表示我的項目中的表格的行。我現在有使用局部視圖來表示表格行

<table> 
    <thead> 
     <tr> 
      <th > 
       Column 1 
      </th> 
      <th > 
       Column 2 
      </th> 
      <th > 
       Column 3 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach(var item in Model.Items) 
     { 
     @Html.Action("ItemCalculatedView", new { Id = item.Id}) 
     } 
    </tbody> 
    </table>

在我的部分觀點我有這個

@using (Ajax.BeginForm("SaveStuff", "Whatever", 
    new { id = @Model.Id }, new AjaxOptions() 
    { 
     HttpMethod = "Post", 
     OnSuccess = "Success" 
    })) 
    { 
    @Html.HiddenFor(m => m.Id) 
    <tr> 
     <td> 
      @Html.Label("Col1", Model.Col1) 
     </td> 
     <td> 
      @Html.TextBox("Number", Model.Number) 
     </td> 
     <td> 
      <input type="submit" id='[email protected]'/> 
     </td> 
    </tr>   
    }

我怎樣才能使這項工作？

來源

2012-12-11 GatesReign

你可以把一個形式的表格細胞裏面，但你不能有一個TBODY元素，或跨越多個列中的表格。因此，有三個選項：

使用CSS佈局，而不是一個表，或使用的div CSS display set to "table"。（for example）
將整個表格（文本框和提交）內的td
換個表td元素中

我會建議＃1 - 使用CSS佈局構造表，因爲它是很難風格table標籤：

主要

<div class="table"> 
    <div class="header-row"> 
     <div class="header-cell">Column 1</th> 
     <div class="header-cell">Column 2</th> 
     <div class="header-cell">Column 3</th> 
    </div> 

    @foreach(var item in Model.Items) 
    { 
     @Html.Action("ItemCalculatedView", new { Id = item.Id}) 
    } 
</div>

部分

@using (Ajax.BeginForm(
    actionName: "SaveStuff", 
    controllerName: "Whatever", 
    routeValues: new { id = @Model.Id }, 
    ajaxOptions: new AjaxOptions 
    { 
     HttpMethod = "Post", 
     OnSuccess = "Success" 
    }, 
    htmlAttributes: new { @class = "row" } 
)) 
{ 
    <div class="cell"> 
     @Html.HiddenFor(m => m.Id) 
    </div> 
    <div class="cell"> 
     @Html.Label("Col1", Model.Col1) 
    </div> 
    <div class="cell"> 
     @Html.TextBox("Number", Model.Number) 
    </div> 
    <div class="cell"> 
     <input type="submit" id='[email protected]'/> 
    </div> 
}

CSS

.table { display: table; } 
.header-row, row { display: table-row; } 
.header-cell, cell { display: table-cell; }

來源

2012-12-11 18:07:04 McGarnagle

真棒，我的設計技能剛上了:) – GatesReign

@GatesReign關於使用'display：table'的警告：IE7和更早版本不支持它：http://caniuse.com/css-table – McGarnagle

我的表單（Ajax .BeginForm）似乎打破了表格佈局。如果表格在佈局中沒有表單元素時工作，但會嘗試強制表格表頭的第一列中的表格行。例如

內容

– GatesReign

您在這裏有幾個問題。首先，正如dbaseman所提到的，你不能將表單放在表格的結構中，並使其成爲合法的HTML。它可能起作用，或者它可能不起作用，即使它起作用，也不能保證它會繼續工作。

我會改爲將表格包裹在表格中，然後在帖子中根據其值和/或索引找出哪個按鈕被按下。

我強烈建議不要使用表格數據的css表格。這在語義上不正確。

另一個可能的解決方案是，而不是使用Ajax.BeginForm，而是使用jQuery $ .ajax，然後您可以選擇一行數據在javascript中發佈到服務器。

來源

2013-05-02 02:15:25

使用局部視圖來表示表格行

回答

相關問題