2016-07-22 6 views
1

私が抱えているアラインメントの問題を誰かが助けてくれるのだろうかと思います。私はそれをループするときにテーブルの中に入れたい部分的なビューを持っています。ビューとパーシャルビューのアラインメントの問題

Iは、2つの別々のテーブル(メインビューに1つ、部分図内の1つ)を使用して二つのアプローチ

  1. を試みました。

  2. テーブルをメインビューに配置し、部分ビュー内の行のみを成功させないようにします。

また、私は(これは私がこれらの余分な空白行をしようとすると停止するように、テーブルを使用する主な理由である。)

私が更新している私のモデルを通じて各ループ間に余分な改行を取得しています何が起こったのか、提案を含めて今起きている。私はまだ問題があります。

問題は、新規追加をクリックすると非常に具体的に発生します。新しい行はテーブルに入っていません。ページがすでにロードされているためです。部分が更新されたときにテーブル全体を更新することは可能ですか?問題は、テーブルのヘッダーが部分的なビューの外側にあるため、継続的に繰り返されないということです。

ご協力いただき誠にありがとうございます。

画像

enter image description here

メインビュー:

<div id="editorRows"> 
    <div class="row text-center "> 
     @Html.ActionLink("Add New Line", "BlankEditorRow", null, new { id = "addItem", @class = "btn blue" }) 
     <input type="submit" value="Save Changes" class="btn blue" /> 
    </div> 

    <table class="table" style="border: none;" width="70"> 
     <tr> 
      <th>StockCode</th> 
      <th class="tg-031e">Description</th> 
      <th>Qty</th> 
      <th>Price</th> 
      <th>Net</th> 
      <th>Tax</th> 
      <th>Gross</th> 
      <th>Remove</th> 
     </tr> 
     <tr> 
      @if (Model.OrderLines != null) 
      { 
       foreach (var item in Model.OrderLines) 
       { 
        Html.RenderPartial("OrderLinesEditorRow", item); 
       } 
      } 
     </tr> 
    </table> 
</div> 

部分図:

@using HtmlHelpers.BeginCollectionItem 
@model MyModel.Models.OrderLines 

<style> 
    input.Width { 
     width: 5em; 
    } 
</style> 

<div class="editorRow"> 
    <script> 
     $("a.deleteRow").live("click", function() { 
      $(this).parents("div.editorRow:first").remove(); 
      return false; 
     }); 

     $(document).ready(function() { 
      $('.selectpicker').selectpicker({ 
       liveSearch: true, 
       showSubtext: true 
      }); 
     }); 
    </script> 

    @using (Html.BeginCollectionItem("OrderLines")) 
    { 
     <td> 
      @Html.HiddenFor(model => model.Itemid, new { size = 4 }) 
      @Html.DropDownList("StockCode", 
        new SelectList(ViewBag.StockCodeList, "Value", "Text"), 
        new 
        { 
         @class = "form-control selectpicker", 
         @Value = @Model.Description, 
         onchange = "this.form.submit();", 
         data_show_subtext = "true", 
         data_live_search = "true" 
        }) 
     </td> 

     <td> 
      @Html.DropDownListFor(x => x.StockCode, 
         (IEnumerable<SelectListItem>)ViewBag.AllStockList, 
         new 
         { 
          @class = "form-control selectpicker", 
          @Value = @Model.Description, 
          onchange = "this.form.submit();", 
          data_show_subtext = "true", 
          data_live_search = "true" 
         }) 
     </td> 

     <td> 
      @Html.EditorFor(model => model.QtyOrder, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.QtyOrder } }) 
     </td> 

     <td> 
      @Html.EditorFor(model => model.UnitPrice, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.UnitPrice } }) 
     </td> 

     <td> 
      @Html.EditorFor(model => model.NetAmount, new 
      { 
       htmlAttributes = new { @class = "form-control Width", @Value = @Model.NetAmount } 
      }) 
     </td> 

     <td> 
      @Html.EditorFor(model => model.TaxAmount, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.TaxAmount } }) 
     </td> 

     <td> 
      @Html.EditorFor(model => model.FullNetAmount, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.FullNetAmount } }) 
     </td> 

     <td> 
      <a href="#" class="deleteRow btn blue">Remove</a> 
     </td> 
    } 
</div> 
+0

同じ問題に私を参照してくださいoccurred.Pleaseた中で私のために働いたソリューション答え:[link](https://stackoverflow.com/questions/35079823/row-column-alignment-when-dynamically-adding-rows-to-a-html-table-using-beginc/45720274#45720274) – Krishan

答えて

0

<table class="inventory"> 
    <thead> 
     <tr> 
      <th width="180"><span>Code</span></th> 
      <th width="265"><span>Description</span></th> 
      <th><span>Price</span></th> 
      <th><span>Quantity</span></th> 
      <th><span>Discount %</span></th> 
      <th><span>Discount Amt</span></th> 
      <th><span>Net £</span></th> 
      <th><span>Tax %</span></th> 
      <th><span>VAT Amt</span></th> 
     </tr> 
    </thead> 

    @{ 
     if (Model.OrderLines == null) 
     { 
      Model.OrderLines = new List<Accounts.Models.OrderLines>(); 
      Accounts.Models.OrderLines Line = new Accounts.Models.OrderLines(); 
      Line.CustomerID = Model.CustomerID; 
      Model.OrderLines.Add(Line); 
     } 

     foreach (var item in Model.OrderLines) 
     { 
      Html.RenderPartial("orderline", item); 
     } 
    } 

</table> 

と部分

@using HtmlHelpers.BeginCollectionItem 
@{ 
    Layout = ""; 
} 

@using (Html.BeginCollectionItem("OrderLines")) 
{ 
    <tbody> 
     <tr> 
      <td> 
       <a class="cut">-</a><span contenteditable> 
        @Html.DropDownList("StockCode", new SelectList(ViewBag.StockCodeList, "Value", "Text"), 
        new 
        { 
         @class = "form-control selectpicker", 
         @Value = @Model.Description, 
         onchange = "this.form.submit();", 
         data_show_subtext = "true", 
         data_live_search = "true" 
        }) 
       </span> 
      </td> 
      <td><span contenteditable> 
        @Html.DropDownList("StockCode", new SelectList(ViewBag.AllStockList, "Value", "Text"), 
           new 
            { 
             @class = "form-control selectpicker ", 
             onchange = "this.form.submit();", 
             data_show_subtext = "true", 
             data_live_search = "true" 
            }) 
       </span></td> 
      <td><span data-prefix>$</span><span contenteditable>150.00</span></td> 
      <td><span contenteditable>4</span></td> 
      <td><span contenteditable>0</span></td> 
      <td><span contenteditable>0.00</span></td> 
      <td><span contenteditable>0.00</span></td> 
      <td><span contenteditable>0</span></td> 
      <td><span data-prefix>$</span><span>0.00</span></td> 
     </tr> 
    </tbody> 
} 
0

は、あなたが、私は1つではなく、2つのテーブル行を意味する2 TRを使用して構築することができますあなたの口実視野では行ごとに。 1 trを使用し、その行の内側に2つのドロップダウンまたはテキストボックスを追加しました。その後、htmlが有効なhtml5であるかどうかを確認することができます。リンクhttps://validator.w3.org

また、メインビューからテーブルのマークアップを開始すると、foreach..whichだけが行を含むことになります。終了すると、テーブルのマークアップが終了します。問題は、テーブルが多すぎることです。私はそれが1つのテーブルだけに結合できると言います。

メインビュー:テーブルヘッダ 始まる... foreachの項目 .........テーブルの行と部分図のみ .... foreachのメインビューの終わり:近隣テーブル

+0

Please上記のアップデートを参照してください。いかなる考えも認められるだろう。 –

関連する問題