我正在使用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>
单击“添加另一个链接”后,将激活此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",success: function (html) { $("#variableRows").append(html); }
});
});
});
</script>
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());
}
这称之为局部视图
编辑(有几个人注意到< tr>中缺少id标记,这只是这篇文章的复制/粘贴错误,实际代码有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>
}
这是与页面首次加载时调用的局部视图相同,这部分原因让我感到困惑的是,在点击添加另一个链接后最终结果看起来像这样
编辑
编辑
我已经尝试了以下jQuery成功命令,没有运气
success: function (html) { $("#fixedRows > tbody:last").append(html); }
success: function (html) { $("#fixedRows tr:last").after(html); }
success: function (html) { $("#fixedRows > tbody").append(html); }
这是在单击添加另一个链接后呈现的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>标签
编辑
我在成功的Ajax函数中放了一个console.log(html)行,现在它就读了
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是可以的,但是当我点击页面的“查看源代码”时,除了最初加载的内容之外,我看不到任何内容.找到this post后,我发现这是正常的.然后我用this Chrome add-on最终看到< tr>和< td>标签被剥离了.只需在append语句中添加一个开始和结束标记,我就会将返回的项目附加到表中.
$(".addFixed").click(function () {
$.ajax({
url: '@Url.Action("BlankFixedRow",dataType: 'html',success: function (html) {
$("#fixedRows > tbody").append('<tr>' + html + '</tr>');
}
});
});
