Javascript MVC Razor Ajax表单提交,给出“未扩展的令牌u”
这是一个MVC VB.NET Razor应用程序。我有一个局部视图,加载在父视图的底部。在这个局部视图中,我有一些按钮,当点击它时,会弹出一个对话框模式窗口,其中有一个局部视图。用户应该能够编辑表单,然后单击更新,然后将信息发布到控制器。但是,我在提交时收到以下错误消息 我跟着博客把一切都联系起来了。单击“更新”按钮时,此处出现错误: 下面是PartialView,其中包含触发弹出模式的按钮和javascriptJavascript MVC Razor Ajax表单提交,给出“未扩展的令牌u”,javascript,jquery,asp.net,asp.net-mvc,razor,Javascript,Jquery,Asp.net,Asp.net Mvc,Razor,这是一个MVC VB.NET Razor应用程序。我有一个局部视图,加载在父视图的底部。在这个局部视图中,我有一些按钮,当点击它时,会弹出一个对话框模式窗口,其中有一个局部视图。用户应该能够编辑表单,然后单击更新,然后将信息发布到控制器。但是,我在提交时收到以下错误消息 我跟着博客把一切都联系起来了。单击“更新”按钮时,此处出现错误: 下面是PartialView,其中包含触发弹出模式的按钮和javascript @ModelTYPE IEnumerable(of data_manager.at
@ModelTYPE IEnumerable(of data_manager.attendance)
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascrip</script>
<table>
<tr>
<th>Conf. Number</th>
<th>Class Title</th>
<th>Status of Class</th>
<td>Edit</td>
</tr>
@For Each x In Model
Dim currentItem = x
@<tr>
<td>@Html.DisplayFor(Function(f) currentItem.conf_number)</td>
<td>@Html.DisplayFor(Function(f) currentItem.courseTitle)</td>
@If currentItem.Completed_Class = "Completed" Then
@<td>@Html.ActionLink("Completed(Print Cert)", "Ind_Cert", "Printing", New With {.firstName = currentItem.firstName, .lastname = currentItem.lastName, .classRef = currentItem.course_ref, .cNumber = currentItem.conf_number}, Nothing)</td>
Else
@<td>@Html.DisplayFor(Function(f) currentItem.Completed_Class)</td>
End If
<td>@Html.ActionLink("Modify", "CourseHistoryEdit", New With {.id = currentItem.id}, New With {.class = "editLink"})</td>
</tr>
Next
</table>
<div id="updateDialog" title="Update Attendance"></div>
<script type="text/javascript">
var linkObj;
$(function () {
$(".editLink").button();
$('#updateDialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Update": function () {
$("#update-message").html(''); //make sure there is nothing on the message before we continue
$("#updateAttendance").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(".editLink").click(function () {
//change the title of the dialgo
linkObj = $(this);
var dialogDiv = $('#updateDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#updateAttendance");
// Unbind existing validation
$form.unbind();
$form.data("validator", null);
// Check document for changes
$.validator.unobtrusive.parse(document);
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
//open dialog
dialogDiv.dialog('open');
});
return false;
});
});
function updateSuccess(data) {
if (data.Success == true) {
//we update the table's info
var parent = linkObj.closest("tr");
parent.find(".Completed_Class").html(data.Object.completed);
parent.find(".carDescription").html(data.Object.Description);
//now we can close the dialog
$('#updateDialog').dialog('close');
//twitter type notification
$('#commonMessage').html("Update Complete");
$('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
}
else {
$("#update-message").html(data.ErrorMessage);
$("#update-message").show();
}
}
</script>
这是partialView,单击每个视图旁边的“修改”按钮时渲染
@ModelTYPE DataModels.DataModels.AjaxCourseHistoryEdit
@Using (Ajax.BeginForm("CourseHistoryEdit", "Admin", Nothing, New AjaxOptions With {.InsertionMode = InsertionMode.Replace, .HttpMethod = "POST", .OnSuccess = "updateSuccess"}, New With {.id = "updateAttendance"}))
@Html.ValidationSummary(true)
@<fieldset>
<legend>Attendance Update</legend>
@Html.HiddenFor(Function(m) Model.attendId)
<div class="editor-label">
@Html.Label("Course Title")
</div>
<div class="editor-field">
@Html.DisplayFor(Function(m) Model.courseTitle)
</div>
<div class="editor-label">
@Html.Label("Completed Status")
</div>
<div class="editor-field">
@Html.DropDownList("completed", New SelectList(ViewBag.CourseStatuses))
</div>
<div class="editor-label">
@Html.Label("Hours Completed")
</div>
<div>
@Html.EditorFor(Function(m) Model.hoursCompleted)
</div>
</fieldset>
End Using
下面是加载到项目的_布局文件中的javascript库
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
非常感谢您的帮助。我已经花了好几个小时来研究这个问题,谷歌搜索结果显示,有几条SO帖子说,意外的令牌u与无效的线路终止有关。这对我没有帮助,因为我找不到任何远程看起来像不正确html的东西,即未关闭的标记
我让一个csharper把@放到桌子上和场地上。这在vb的这些实例中是正常的。下面是呈现html的屏幕截图
莫里的一条评论为我指明了正确的方向。结果证明,我的模型使用了一个整数值作为hiddenFor值。出于我不知道的原因,AJAX帖子根本不喜欢这样。通过将attendId的类型从Integer更改为String,并进一步使用适当的editorFor/labelFor,问题已得到解决。也许这会帮助像我一样遇到这个绊脚石的人 如果我去掉@for each方法的标记,那么就无法正确地构建表列表。当您提交表单时,值被解析为Json,这就是问题所在。在窗体上调用.serializeObject时,它会尝试生成如下javascript对象:{input1:value1,input2:value2,…}我的猜测是:检查每个输入,textarea,select标记具有名称属性以及它们的值是否可序列化。请原谅我问这个问题,但有没有办法查看输出的内容?当然。从你的屏幕截图我可以看到你正在使用谷歌浏览器。如果您单击屏幕左侧parseJSON函数行的位置,就可以设置断点。这意味着当您重新加载页面时,脚本的执行将暂停,您将有机会检查数据的值。此处提供更多信息:有趣的是,您可以在调试时打开Chrome控制台,并可以输入自定义命令来尝试一些想法。这是一种用Javascript寻找解决方案的非常有效和快速的方法。当我在一个必需的输入上遗漏了@Html.ValidationMessageForm=>m.字段时,我遇到了类似的问题。一旦我为每个必填/不可空字段添加了@Html.ValidationMessageForm=>m.字段,错误就消失了。