jQuery .append(html)命令附加不正确
Nea*_*alR 5 ajax asp.net-mvc jquery asp.net-mvc-3
我正在使用jQuery/Ajax调用将部分视图附加到表.页面加载时,将正确创建局部视图.但是,一旦使用尝试将另一个项目附加到表格,尽管使用了完全相同的局部视图,但格式化仍然不正确.
这是表格.加载时,项目将正确加载到页面上,如下图所示:
<table id="fixedRows">
<thead>
<tr>
<th>State Code</th>
<th>Agent ID</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.BankListAgentId)
{
if (!String.IsNullOrWhiteSpace(item.AgentId) && item.FixedOrVariable.Equals("F"))
{
@Html.EditorFor(model => item, "FixedPartialView")
}
}
</tbody>
</table>
<br />
<a href="#" class="addFixed">Add Another</a>
单击该Add another链接后,将激活此jQuery/Ajax调用
<script type="text/javascript">
$(document).ready(function () {
$(".addFixed").click(function () {
//alert('test');
event.preventDefault();
$.ajax({
url: '@Url.Action("BlankFixedRow", "BankListMaster")',
cache: false,
success: function (html) { $("#fixedRows").append(html); }
});
});
$("#addVariable").click(function () {
event.preventDefault();
$.ajax({
url: '@Url.Action("BlankFixedRow", "BankListMaster")',
cache: false,
success: function (html) { $("#variableRows").append(html); }
});
});
});
</script>
那个jQuery从控制器调用这个方法
public ViewResult BlankFixedRow()
{
SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" });
ViewBag.StateCodeList = tmpList;
return View("FixedPartialView", new BankListAgentId());
}
哪个调用这个局部视图编辑(有几个人注意到id标签丢失了<tr>,这只是这个帖子的复制/粘贴错误,实际代码有id标签)
@model Monet.Models.BankListAgentId
@{
Layout = null;
}
@using (Html.BeginCollectionItem("BankListAgentId"))
{
<tr id="item-@Model.AgentId">
<td>
@Html.DropDownListFor(model => model.StateCode,
(SelectList)ViewBag.StateCodeList, Model.StateCode)
</td>
<td>
@Html.EditorFor(model => model.AgentId)
@Html.ValidationMessageFor(model => model.AgentId)
</td>
<td>
<a href="#" class="deleteRow">delete</a>
</td>
@*<td><a href="#" onclick="$('#item-@Model.AgentId').parent().remove();" style="float:right;">Delete</a></td>*@
</tr>
}
这是与页面首次加载时调用的局部视图相同,这部分原因让我感到困惑的是,点击Add another链接后的最终结果看起来像这样
编辑
如果你点击Add another链接两次,这就是结果
编辑
我试过以下jQuery sucess命令没有运气
success: function (html) { $("#fixedRows > tbody:last").append(html); }
success: function (html) { $("#fixedRows tr:last").after(html); }
success: function (html) { $("#fixedRows > tbody").append(html); }
这Add another是单击链接后呈现的HTML .我在<form>其下面的表单中包含了开头标记,以显示新行无处可寻.
<form action="/BankListMaster/Edit/11" method="post">
<fieldset>
<legend>Stat(s) Fixed</legend>
<table id="fixedRows">
<tr>
<th>State Code</th>
<th>Agent ID</th>
<th></th>
<th></th>
</tr>
<tr id="item-1164998320">
<td>
<select id="item_StateCode" name="item.StateCode"><option value="">HI</option>
<option>AL</option>
..
<option>WY</option>
</select>
</td>
<td>
<input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998320" />
<span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
</td>
<td>
<a href="#" class="deleteRow">delete</a>
</td>
</tr>
<tr id="item-1164998219">
<td>
<select id="item_StateCode" name="item.StateCode">
<option value="">HI</option>
<option>AL</option>
..
<option>WY</option>
</select>
</td>
<td>
<input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998219" />
<span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
</td>
<td>
<a href="#" class="deleteRow">delete</a>
</td>
</tr>
<tr id="item-0352926603">
<td>
<select id="item_StateCode" name="item.StateCode">
<option value="">GA</option>
<option>AL</option>
..
<option>WY</option>
</select>
</td>
<td>
<input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="0352926603" />
<span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
</td>
<td>
<a href="#" class="deleteRow">delete</a>
</td>
</tr>
</table>
<br />
<a href="#" class="addFixed">Add Another</a>
</fieldset>
</form>
<a href="#" class="addFixed">Add Another</a>
<form action="/BankListMaster/Edit/11" method="post">
编辑
以下Add Another是点击链接后Chrome调试器中表格的屏幕截图.如您所见,从表中提取的数据在相应的<tr>标记中正确加载,但空行(通过与其余部分相同的部分视图发送)不具有任何相同的表元素.下面的屏幕截图显示了响应,但它确实包含了<tr>标签
编辑
我console.log(html)在successAjax函数中放了一行,现在它就读了
success: function (html) {
console.log(html);
$("#fixedRows > tbody").append(html);
}
这是控制台输出(为便于阅读而编辑的状态)
<input type="hidden" name="BankListAgentId.index" autocomplete="off" value="3f7e0a92-8f20-4350-a188-0725919f9558" />
<tr>
<td>
<select id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__StateCode" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].StateCode">
<option>AL</option>
..
<option>WY</option>
</select>
</td>
<td>
<input class="text-box single-line" id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__AgentId" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].AgentId" type="text" value="" />
</td>
<td>
<a href="javascript:void(0)" class="deleteRow">delete</a>
</td>
</tr>
真是一场彻头彻尾的噩梦……
首先，在 Chrome 调试器中返回的可查看的 HTML 很好，但是当我单击页面的“查看源代码”时，除了最初加载的内容之外，我看不到任何内容。找到这个帖子后，我发现这是正常的。然后我使用这个 Chrome 插件终于看到<tr>和<td>标签被删除了。通过简单地向追加语句添加开始和结束标记，我就将返回的项目追加到表中。
$(".addFixed").click(function () {
$.ajax({
url: '@Url.Action("BlankFixedRow", "BankListMaster")',
dataType: 'html',
cache: false,
success: function (html) {
$("#fixedRows > tbody").append('<tr>' + html + '</tr>');
}
});
});