jquery - 未捕获的语法错误 : Unexpected token ILLEGAL. Html.Partial()

Question

当我尝试使用 @Html.Partial() MVC 方法来渲染部分 View 时，出现 javascript 异常。下面是我的功能

function DisplayDynamicData(actionMethod) {
        var string = '';
        if (actionMethod == 'Edit') {
            string ='@Html.Partial("Edit", Model)'
            $('#divdisplay').html(string);
        }
        if (actionMethod == 'Create')
             string ='@Html.Partial("Create", Model)'
              $('#divdisplay').html(string);

    }

执行输出

function DisplayDynamicData(actionMethod) {
        var string = '';
        if (actionMethod == 'Edit') {
            string ='<form action="/" id="formEdit" method="get"><input name="__RequestVerificationToken" type="hidden" value="KxJHl9hBr1WSIQhpp7aNmw8bAVbixn8-XV3n5c--_z9azhHYqSlAMkmS-LKY7uDM0Qdj07SNrdT5JrtACZvPKO6Y7F2Quoj9Bei4RCUZfbHga51Ad0aNN9RDPEziTMTd8vkzS6I2-2Xtl8vAlMFkzyn7wXnqYkRhUvieTYPMxrM1" /><input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="" />      <h2>Edit Product</h2>
    <div class="editor-label">
        <label for="Category">Category</label>
    </div>
    <div class="editor-field">
   ......'
       }
   }

我认为，由于字符串在新行中呈现，因此发生了此错误。如何处理这个字符串。请在此提供帮助

Answer 1

不要使用字符串注入(inject)来创建复杂的元素。这是维护的噩梦(即使没有当前的错误)。

1 - 将部分 View 注入(inject)到页面上的模板中(假脚本 block )

<script id="edittemplate" type="text/template">
      @Html.Partial("Edit", Model)
</script>

2 - 使用 id 访问它

var edittemplate = $('#edittemplate').html();

3 - 随心所欲地使用它

$('#divdisplay').html(edittemplate);

根据需要重复此操作，每个模板都有自己的脚本 block 。

注意:我建议您对要在 jQuery 中创建的任何动态元素采用类似的方法，因为内联 HTML(包含文本替换标记)更具可读性且易于修改。

更新(基于下面的评论)

目的是通过不为每个部分 View 隐藏 div 来节省空间。将 HTML 放入代码中不会减少页面加载大小，因为添加到页面的代码与 HTML 一样大。

您真正想要的(保持页面大小较小)是在需要时通过 Ajax 加载部分 View 。

问题是每个部分 View 都需要自己的模型数据，因此您必须将参数传递回服务器。通过仅将 URL 注入(inject)您的 jquery 来做到这一点:

例如类似的东西

function DisplayDynamicData(actionMethod) {
    var url;
    switch (actionMethod)
    {
        case 'Edit':
            url ='@Url.Action("Edit")';
            break;
        case 'Create':
            url ='@Url.Action("Create")';
            break;
    }
    $.ajax({ 
          url: url, 
          success: function(data){
                $('#divdisplay').html(data);
          }
    });
}

或者代替 ajax 调用，甚至更简单:

    $("#divdisplay").load(url);

我将其留给您填写插入的 Url.Actions 参数可能需要的具体信息