【问题标题】:MVC Razor Ajax Form Submit giving 'unexpexted token u'MVC Razor Ajax 表单提交给出“意外的令牌 u”
【发布时间】:2013-09-11 03:10:10
【问题描述】:

这是一个 MVC VB.NET Razor 应用程序。我有一个加载在父视图底部的部分视图。在那个局部视图中,我有一些按钮,当单击时会触发一个弹出对话框模式窗口,该窗口附加了一个局部视图。用户应该能够编辑表单,然后单击更新,然后将信息发布到控制器。但是我在提交时收到以下错误消息。

我关注了博客 here 以完成所有工作。单击更新按钮时,此处出现错误:

下面是包含触发弹出模式的按钮和 javascript 的 PartialView

@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>

这是在单击每个旁边的修改按钮时呈现的部分视图。

   @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

以下是项目的 _layout 文件中加载的 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 帖子,说 Unexpected token u 与无效的线路终止有关。这对我没有任何帮助,因为我找不到任何看起来像不正确的 html 的东西,即未关闭的标签..

我让 csharper 调出表格和字段集上的 @。在 vb.net 的这些实例中这是正常的,下面是呈现的 html 的屏幕截图

【问题讨论】:

  • 如果我把@从那个标签上去掉,那么对于每种方法,那里的每个方法都无法正常工作来构建表格列表。
  • 当您提交表单时,值被解析为 Json,这就是它出错的地方。当您在表单上调用 .serializeObject() 时,它会尝试生成这样的 javascript 对象: { "input1" : "value1", "input2" : "value2", ... } 我的猜测是:检查是否每个输入、文本区域、选择标签具有“名称”属性,以及它们的值是否可序列化。
  • 请原谅我问这个问题,但有没有办法查看输出的内容?
  • 当然。从您的屏幕截图中,我可以看到您正在使用 Google Chrome。 (这很好)如果你点击屏幕左侧的 parseJSON 函数行,你可以设置一个断点。这意味着当您重新加载页面时,脚本的执行将暂停,您将有机会检查“数据”的值。更多信息在这里:developers.google.com/chrome-developer-tools/docs/…
  • 有趣的是,您可以调试时打开 Chrome 控制台,您可以输入自定义命令来尝试一些想法。这是在 Javascript 中寻找解决方案的一种非常有效且快速的方法。

标签: javascript jquery asp.net asp.net-mvc razor


【解决方案1】:

Moeri 的评论为我指明了正确的方向。事实证明,我的模型使用一个整数值作为 hiddenFor 值。由于我不知道的原因,AJAX 帖子根本不喜欢那样。通过将attendId 的类型从Integer 更改为String 并进一步使用正确的editorFor / labelFor,问题已得到解决。也许这会帮助像我一样遇到这个绊脚石的人。

【讨论】:

  • 当我在所需输入之一上遗漏了@Html.ValidationMessageFor(m =&gt; m.Field) 时,我遇到了类似的问题。 Found it here。一旦我为每个必填/不可为空的字段添加了@Html.ValidationMessageFor(m =&gt; m.Field),错误就消失了。
猜你喜欢
  • 1970-01-01
  • 2021-05-29
  • 1970-01-01
  • 2016-12-12
  • 1970-01-01
  • 2014-06-06
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多