行和使用jQuery在ASP.NET MVC 3中使用BeginCollectionItem将行动态添加到html表中时的列对齐 [英] Row & column alignment when dynamically adding rows to a html table using BeginCollectionItem in ASP.NET MVC 3 using jQuery
问题描述
我的主视图中具有以下html表定义
I have the following html table definition in my main view
<table id="myDynamicTable" cellpadding="0" cellspacing="0" class="burTable" width="964px">
<thead>
<tr>
<th style="white-space: nowrap;display: inline;width: 40px" >
ColOne
</th>
<th style="white-space: nowrap;display: inline;width: 90px">
ColTow
</th>
<th style="white-space: nowrap;display: inline;width: 54px">
ColThree
</th>
<th style="white-space: nowrap;display: inline;width: 60px">
ColFour
</th>
<th style="white-space: nowrap;display: inline;width: 399px">
ColFive
</th>
<th style="white-space: nowrap;display: inline;width: 474px">
ColSix
</th>
</tr>
</thead>
<tbody>
@if (Model.myViewModel.Count() > 0)
{
int i = 1;
foreach (var item in Model.myViewModel)
{
<tr >
<td class="tdBorder">
@Html.DisplayFor(x => item.AutoNumber, new { @readonly = "readonly" })
@Html.HiddenFor(x => item.Code, new { id = "Code" + @i })
</td>
<td>
@Html.TextBoxFor(x => item.SerialNumber, new { id = "SerialNumber" + @i, @Class = "numberOnly", maxlength = 15 })
</td>
<td>
@Html.DropDownList("ddlItemType" + @i, new SelectList(ViewBag.ddlItemTypeList as System.Collections.IEnumerable, "Value", "Text", item.ItemTypeId))
</td>
<td>
@Html.TextBoxFor(x => item.Date, new { id = "Date" + @i })
</td>
<td>
@Html.DropDownList("ddlUnit" + @i, new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text", item.UnitId))
</td>
<td>
@Html.TextBoxFor(x => item.Comment, new { id = "Comment" + @i, @class = "Comment RestrictCharacters", maxlength = 1000 })
</td>
</tr>
i += 1;
}
}
else
{
<tr id="FirstRow" class="tdBorder">
<td class="tdBorder">
@Html.TextBox("AutoNumber", null, new { @width = 60, id = "AutoNumber" })
</td>
<td>
@Html.TextBox("SerialNumber", null, new { @width = 150, id = "SerialNumber" })
</td>
<td>
@Html.DropDownList("ddlItemType", new SelectList(ViewBag.ddlItemTypeList as System.Collections.IEnumerable, "Value", "Text"), new { @width = 60, id = "ddlItemType" })
</td>
<td>
@Html.TextBox("Date", null, new { @width = 60, id = "Date" })
</td>
<td>
@Html.DropDownList("ddlUnit", new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto", id = "ddlUnit" })
</td>
<td>
@Html.TextBox("Comment", null, new { @width = 700, id = "Comment" })
</td>
</tr>
}
</tbody>
</table>
我希望能够使用在此处在其中添加行带有jquery whic的表与mvc中的模型连接
I want to be able to add new rows using the BeginCollectionItem concept explained in here http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ and Add row in table with jquery whic connected with model in mvc
下面是我要用作添加新行的模板的局部视图的定义. @using MyProject.Utilities @model MyProject.ViewModel.ReportDetailsViewModel
Below is the definition of my partial view which i want to use as a template to add new rows. @using MyProject.Utilities @model MyProject.ViewModel.ReportDetailsViewModel
@using (Html.BeginCollectionItem("NewRow"))
{
<tr id="NewRow" class="tdBorder">
<td class="tdBorder">
@Html.TextBox("AutoNumber", null, new { @width = 60, id = "AutoNumber" })
</td>
<td>
@Html.TextBox("SerialNumber", null, new { @width = 150, id = "SerialNumber" })
</td>
<td>
@Html.DropDownListFor(model => model.ItemTypeId, Model.ItemTypeList, new { @id = "ddlItemType" })
</td>
<td>
@Html.TextBox("Date", null, new { @width = 60, id = "Date" })
</td>
<td>
@Html.DropDownList("ddlUnit", new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto", id = "ddlUnit" })
@Html.DropDownListFor(model => model.UnitId, Model.UnitList)
</td>
<td>
@Html.TextBox("Comment", null, new { @width = 700, id = "Comment" })
</td>
</tr>
}
在我的主视图中，我正在尝试添加如下所示的新行
In my main view, i'm trying to add new rows like below
var tableBody = $('#myDynamicTable tbody');
var url = '@Url.Action("Add", "Report")';
$('#btnAddRow').click(function () {
$.get(url, function (response) {
tableBody.append(response);
});
});
问题是，它看起来像是在表主体之后添加行，而不是在最后一行之后在主体内部添加行.
The problem is, it appears like the rows are being added after the table body but not inside the body after the last row.
我遇到的另一个问题是新行列与现有的第一行不对齐，也没有选择应用于现有第一行中的控件的样式表.
The other issue i'm having is the new row columns not aligning with the existing first row as well as also not picking the style sheets applied to the controls in the existing first row.
下面是我到目前为止所获得的屏幕截图，我正在努力用现有的第一行来显示这些新行.
Below is the screenshot of what i'm so far getting and i'm struggling to alight these new rows with the existing first row.
推荐答案
var tableBody = $('#myDynamicTable tbody');
var url = '@Url.Action("Add", "Report")';
$('#btnAddRow').click(function () {
$.get(url, function (response) {
$('#myDynamicTable tbody <tr />').html(response).appendTo(tableBody);
});
});
如上所述更改您的jquery代码.然后从局部视图中删除tr包装器
change your jquery code as above. Then remove tr wrapper from partial view
@using MyProject.Utilities
@model MyProject.ViewModel.ReportDetailsViewModel
@using (Html.BeginCollectionItem("NewRow"))
{
<td class="tdBorder">
@Html.TextBox("AutoNumber", null, new { @width = 60, id = "AutoNumber" })
</td>
<td>
@Html.TextBox("SerialNumber", null, new { @width = 150, id = "SerialNumber" })
</td>
<td>
@Html.DropDownListFor(model => model.ItemTypeId, Model.ItemTypeList, new { @id = "ddlItemType" })
</td>
<td>
@Html.TextBox("Date", null, new { @width = 60, id = "Date" })
</td>
<td>
@Html.DropDownList("ddlUnit", new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto", id = "ddlUnit" })
@Html.DropDownListFor(model => model.UnitId, Model.UnitList)
</td>
<td>
@Html.TextBox("Comment", null, new { @width = 700, id = "Comment" })
</td>
}
这篇关于行和使用jQuery在ASP.NET MVC 3中使用BeginCollectionItem将行动态添加到html表中时的列对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
