代码根据JsFiddle工作; http://jsfiddle.net/arame3333/PTWnq/6/
然而,在我的MVC项目中,它在页面上呈现为;
{{for BusinessUnitName}}•{“BusinessUnitName”:[“设计与建造(技术)”,“建筑设计”,“ICT”,“机械与电气”,“安全管理”,“施工前” & Bid Preparation“]} {{/ for}}
为什么会发生这种情况?
相关代码是;
<ul id="departmentList"><%: Html.DisplayFor(model => model.AdditionalDepartmentList) %></ul>
<script id="DepartmentTemplate" type="text/x-jquery-tmpl">
{{ for BusinessUnitName }}
<li>{{:#data}}</li>
{{/for }}
</script>
function RefreshDepartments(o) {
alert("Here are the results");
var url = '<%: Url.Action("GetAdditionalDepartments", "DataService")%>';
dataService.getAdditionalDepartments(
o.EmployeeId,
RenderDepartments,
url
);
}
RenderDepartments = function (data) {
$('#departmentList').empty();
$('#departmentList').html($('#DepartmentTemplate').render(data));
};
数据来自控制器;
public ActionResult GetAdditionalDepartments(int employeeId)
{
var list = AdditionalDepartment.GetBusinessNamesByEmployeeId(employeeId);
var jss = new JavaScriptSerializer();
var json = jss.Serialize(new JsonArrayFormat(list.ToList()));
return new JsonResult
{
Data = json,
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
已编辑的标记 - 我无法将其全部显示出来;
<form method="post" action="/Employee/Edit"><input name="__RequestVerificationToken" value="IM9yFknHf1HKgZbd+UYsyMs9wQKL9dPK8zcRfi5uXTRQl7JvCq/Gr6cVq1wnUnao5Y2IToCDtEb5Vz/KnnxXSEDartM7fE9mQ7Cm7ynsFVE6ST2hhcygJX1ALAP67AXVlBBSf5ozczCctqb8ok+Blw==" type="hidden">
<input id="Employee_EmployeeId" name="Employee.EmployeeId" value="258" type="hidden">
<input id="Employee_ApproverEmployeeId" name="Employee.ApproverEmployeeId" value="340" type="hidden">
<input id="CurrentCostRate_EmployeeId" name="CurrentCostRate.EmployeeId" value="258" type="hidden">
<input id="CurrentCostRate_CostRateId" name="CurrentCostRate.CostRateId" value="303" type="hidden">
<input id="Employee_UserName" name="Employee.UserName" value="aaronchampion" type="hidden">
<input id="Employee_BusinessUnit_BusinessUnitName" name="Employee.BusinessUnit.BusinessUnitName" value="Construction" type="hidden">
<fieldset>
<legend>Edit Employee</legend>
<table id="editTable" class="groupBorder">
<tr>
<td style="text-align: right;">Additional Departments</td>
<td colSpan="2">
<span style="display: inline-block;">
<script type="text/javascript">
$(function () {
$("#DialogAdditionalDepartmentsAdditionalDepartment").dialog({
show: "fade",
width: 620,
height: 850,
title: 'Additional Departments/Divisions for Aaron Champion',
modal: true,
resizable: true,
autoOpen: false,
close: function () { $("#DialogAdditionalDepartmentsAdditionalDepartment").html(""); },
buttons: {
"": function () { $(this).dialog('close'); },
"Close": function () { $("#DialogAdditionalDepartmentsAdditionalDepartment form").submit(); }
}
});
});
var lockpopupDialogAdditionalDepartmentsAdditionalDepartment = null;
function callDialogAdditionalDepartmentsAdditionalDepartment(employeeId) {
if(lockpopupDialogAdditionalDepartmentsAdditionalDepartment != null) return;
lockpopupDialogAdditionalDepartmentsAdditionalDepartment = true;
$.get('/AdditionalDepartment/AdditionalDepartments',
{ employeeId : employeeId },
updateDialogAdditionalDepartmentsAdditionalDepartment
);
}
function OnSuccessDialogAdditionalDepartmentsAdditionalDepartment(result) {
if (result == 'ok') {
$("#DialogAdditionalDepartmentsAdditionalDepartment").dialog('close');
}
else
if(typeof(result) == 'object'){
$("#DialogAdditionalDepartmentsAdditionalDepartment").dialog('close');
RefreshDepartments(result);
}
else {
updateDialogAdditionalDepartmentsAdditionalDepartment(result);
}
}
function updateDialogAdditionalDepartmentsAdditionalDepartment(data) {
lockpopupDialogAdditionalDepartmentsAdditionalDepartment = null;
$("#DialogAdditionalDepartmentsAdditionalDepartment").html(data);
$("#DialogAdditionalDepartmentsAdditionalDepartment form").ajaxForm({
beforeSubmit: function () { return $("#DialogAdditionalDepartmentsAdditionalDepartment form").validate().valid(); },
success: OnSuccessDialogAdditionalDepartmentsAdditionalDepartment
}); //ajaxForm
$("#DialogAdditionalDepartmentsAdditionalDepartment").dialog('open');
$("#DialogAdditionalDepartmentsAdditionalDepartment form input:visible:first").focus();
}
</script>
<a href="javascript:callDialogAdditionalDepartmentsAdditionalDepartment(258)">Add/Edit additional departments/divisions</a></span>
<ul id="departmentList">
<li>Architectual Design</li>
<li>ICT</li>
<li>Mechanical & Electrical </li>
<li>Safety Management</li>
<li>Estimating</li>
<li>HR and Training Development</li></ul>
</td>
</tr>
</tbody></table>
</fieldset>
</form>
<div>
<a href="/Employee/List">Back to List</a>
</div>
<script id="DepartmentTemplate" type="text/x-jquery-tmpl">
{{ for BusinessUnitName }}
<li>{{:#data}}</li>
{{/for }}
</script>
<script type="text/javascript">
function RefreshDepartments(o) {
alert("Here are the results");
var url = '/DataService/GetAdditionalDepartments';
dataService.getAdditionalDepartments(
o.EmployeeId,
RenderDepartments,
url
);
}
RenderDepartments = function (data) {
$('#departmentList').empty();
var data1 = $.parseJSON(data);
$('#departmentList').html($('#DepartmentTemplate').render(data1));
};
</script>
</div>
</div>
答案 0 :(得分:1)
<script id="DepartmentTemplate" type="text/x-jquery-tmpl">
{{ for BusinessUnitName }}
<li>{{:#data}}</li>
{{/for }}
</script>
问题在于3个空格,很难找到问题,因为 jsfiddle.net 示例工作正常。在检测到问题的所有尝试之后,我向 arame3333 询问了htmp-markup,然后我只是尝试一下,发现,模板中的问题,更正了一个:
<script id="DepartmentTemplate" type="text/x-jquery-tmpl">
{{for BusinessUnitName}}
<li>{{:#data}}</li>
{{/for}}
</script>