Question

我想将div表与Ajax.BeginForm结合使用：

它输出的内容如下：

<div class="Table">
<div class="Title">
    <p>This is a Table</p>
</div>
<div class="Heading">    
    <div class="Cell"><p>Pos</p></div>
    <div class="Cell"><p>Value</p></div>
    <div class="Cell"><p>Action</p></div>
</div>
<div class="Row" id="Row_1">
<form>
    <div class="Cell"><p>1</p></div>
    <div class="Cell"><p>Hello</p></div>
    <div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>
<div class="Row" id="Row_2">
<form>
    <div class="Cell"><p>2</p></div>
    <div class="Cell"><p>World</p></div>
    <div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>

Demo

但每行只显示在第一列中。我该如何解决这个问题？ THX

Answer 1

删除Row div并将表单提升为.Row类

<div class="Table">
<div class="Title">
    <p>This is a Table</p>
</div>
<div class="Heading">    
    <div class="Cell"><p>Pos</p></div>
    <div class="Cell"><p>Value</p></div>
    <div class="Cell"><p>Action</p></div>
</div>

<form class="Row" id="Row_1">
    <div class="Cell"><p>1</p></div>
    <div class="Cell"><p>Hello</p></div>
    <div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>

<form class="Row" id="Row_2">
    <div class="Cell"><p>2</p></div>
    <div class="Cell"><p>World</p></div>
    <div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>

</div>

Answer 2

用

替换css中的单元类

.Cell
{
   float:left;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
    width: 200px;
}

check example here

MVC4 - 将DIV表与ajax.beginform结合使用

2 个答案: