Question

在Click处理程序中，我尝试使用MvcHtmlString设置div（detail_popup）的innerHTML。

MvcHtmlString Bobo = @ Html.Action（＆＃34; _TaskDetail＆＃34;，＆＃34; ProTask＆＃34;）; 注意：_TaskDetail是局部视图。

如果我使用HTML可视化工具在调试中查看Bobo，那就完美了。然后我分配innerHTML：detail_popup.innerHTML = @Bobo; 这会生成脚本错误... SCRIPT1002：语法错误我即将失去葫芦！任何帮助将非常感激。鲍勃

这是MvcHtmlString Bobo，其赋值给我脚本错误：

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        font: 12px Nautilus Pompilius;
    }

    th, td {
        padding: 3px;
        text-align: left;
    }

    table#t01 {
        width: 35%;
        background-color: #ffd800;
    }
</style>
</head>
<body>
<div>
        11/23/2016 1:08:14 PM

    <table id="t01">
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Owner</th>
        </tr>
        <tr>
            <td>Excavate Foundation</td>
            <td>Trench will be 36 inches deep by 25 inches wide</td>
            <td>Robert L. Wells</td>
        </tr>

        <tr>
            <th>Duration</th>
            <th>Completion</th>
            <th>Options</th>
        </tr>
        <tr>
            <td>12:00:00</td>
            <td>50%</td>
            <td>7</td>
        </tr>
        <tr>
            <th>Revision DT</th>
            <th>Project ID</th>
            <th>Task ID</th>
        </tr>
        <tr>
            <td>5/29/2016 12:00:00 PM</td>
            <td>15</td>
            <td>7</td>
        </tr>

        <tr>
            <th>StartDateAct</th>
            <th>StartDateSched</th>
        </tr>
        <tr>
            <td>6/9/2016 1:15:00 PM</td>
            <td>6/9/2016 1:15:00 PM</td>
        </tr>

        <tr>
            <th>FinishDateAct</th>
            <th>FinishDateSched</th>
        </tr>
        <tr>
            <td>6/12/2016 1:15:00 PM</td>
            <td>6/12/2016 1:15:00 PM</td>
        </tr>

        <tr>
            <th>EstIntCost</th>
            <th>EstExtCost</th>
            <th>EstTotCost</th>
        </tr>
        <tr>
            <td>20.00</td>
            <td>14.00</td>
            <td>34.00</td>
        </tr>
        <tr>
            <th>ActIntCost</th>
            <th>ActExtCost</th>
            <th>ActTotCost</th>
        </tr>
        <tr>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <th>BudIntCost</th>
            <th>BudExtCost</th>
            <th>BudTotCost</th>
        </tr>
        <tr>
            <td>20.00</td>
            <td>14.00</td>
            <td>34.00</td>
        </tr>
        <tr>
            <th>SurIntCost</th>
            <th>SurExtCost</th>
            <th>SurTotCost</th>
        </tr>
        <tr>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
    </table>


</div>
</body>
</html>

我把头发拉了出来

以下是我的部分视图的缩写版本：

    @model PromanV3.Models.ProTask

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        font: 12px Nautilus Pompilius;
    }

    th, td {
        padding: 3px;
        text-align: left;
    }

    table#t01 {
        width: 35%;
        background-color: #ffd800;
    }
</style>
</head>
<body>
<div>
        @System.DateTime.Now

    <table id="t01">
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Owner</th>
        </tr>
        <tr>
            <td>@Html.DisplayFor(model => model.TaskName)</td>
            <td>@Html.DisplayFor(model => model.TaskDesc)</td>
            <td>@Html.DisplayFor(model => model.TaskOwnerName)</td>
        </tr>

        <tr>
            <th>Duration</th>
            <th>Completion</th>
            <th>Options</th>
        </tr>
        <tr>
            <td>@Html.DisplayFor(model => model.Duration)</td>
            <td>@Html.DisplayFor(model => model.CompPercentage)%</td>
            <td>@Html.DisplayFor(model => model.TaskOptions)</td>
        </tr>
        <tr>
            <th>Revision DT</th>
            <th>Project ID</th>
            <th>Task ID</th>
        </tr>
        <tr>
            <td>@Html.DisplayFor(model => model.RevisionDT)</td>
            <td>@Html.DisplayFor(model => model.ProjectId)</td>
            <td>@Html.DisplayFor(model => model.TaskId)</td>
        </tr>
    </table>


</div>
</body>
</html>

这是我的div

<!-- Begin section that generates the detail popup for the task -->
<div id="DetailBox"
style="display: none;
z-index: 1000;
border: 2px solid blue;
background: yellow;
fill: white;
color: black;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
position: absolute;
font: 14px Nautilus Pompilius;
width: 150px;
height: 65px;
">
<script>
@{

ViewBag.vwbProject = 15;
if (ViewBag.vwbTask==null)
{ViewBag.vwbTask = 1;}
}
</script>
</div>

这是我的点击处理程序：

        function setMouseClickmt(xpos, ypos, width, height, message)
    {
        function inner()
        {
            var MultTxtBoxID = this.node.getAttribute("id"); // 'this' refers to the clear_rect (clear rectangle) of the SVG MultTxtBox
            var MultTxtBoxElement = document.getElementById(MultTxtBoxID); // grab the element
            var task_ID = MultTxtBoxElement.getAttribute("id"); 

            var detail_popup = document.getElementById('DetailBox');

            var task_index = getTaskPos(task_ID, arr_of_Tasks);
            detail_popup.setAttribute('data-task',task_index);
            detail_popup.setAttribute('data-project',15);
            var tt = detail_popup.getAttribute('data-task');
            var pp = detail_popup.getAttribute('data-project');

            var ldt = new Date();
            var ldts = ldt.toLocaleString();
            //detail_popup.innerHtml = ldts + '</br>' + tt ;

            @{                    
                MvcHtmlString Bobo = @Html.Action("_TaskDetail", "ProTask");
            };
            detail_popup.innerHTML = @Bobo;

       /* Make the 'DetailBox' div appear */
       detail_popup.style.display = 'block';
       detail_popup.style.top = (100) + 'px';// '400px';//works//mTop + 'px';
       detail_popup.style.left = (1200) + 'px';// //works//mLeft + 'px';
       detail_popup.style.width = 250;//width;
       detail_popup.style.height = 500;//height;
      }
        return inner;
    }

这是它窒息的脚本输出：

                detail_popup.innerHTML = 

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        font: 12px Nautilus Pompilius;
    }

    th, td {
        padding: 3px;
        text-align: left;
    }

    table#t01 {
        width: 35%;
        background-color: #ffd800;
    }
</style>
</head>
<body>
<div>
        11/23/2016 1:21:34 PM

    <table id="t01">
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Owner</th>
        </tr>
        <tr>
            <td>Excavate Foundation</td>
            <td>Trench will be 36 inches deep by 25 inches wide</td>
            <td>Robert L. Wells</td>
        </tr>

        <tr>
            <th>Duration</th>
            <th>Completion</th>
            <th>Options</th>
        </tr>
        <tr>
            <td>12:00:00</td>
            <td>50%</td>
            <td>7</td>
        </tr>
        <tr>
            <th>Revision DT</th>
            <th>Project ID</th>
            <th>Task ID</th>
        </tr>
        <tr>
            <td>5/29/2016 12:00:00 PM</td>
            <td>15</td>
            <td>7</td>
        </tr>

        <tr>
            <th>StartDateAct</th>
            <th>StartDateSched</th>
        </tr>
        <tr>
            <td>6/9/2016 1:15:00 PM</td>
            <td>6/9/2016 1:15:00 PM</td>
        </tr>

        <tr>
            <th>FinishDateAct</th>
            <th>FinishDateSched</th>
        </tr>
        <tr>
            <td>6/12/2016 1:15:00 PM</td>
            <td>6/12/2016 1:15:00 PM</td>
        </tr>

        <tr>
            <th>EstIntCost</th>
            <th>EstExtCost</th>
            <th>EstTotCost</th>
        </tr>
        <tr>
            <td>20.00</td>
            <td>14.00</td>
            <td>34.00</td>
        </tr>
        <tr>
            <th>ActIntCost</th>
            <th>ActExtCost</th>
            <th>ActTotCost</th>
        </tr>
        <tr>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <th>BudIntCost</th>
            <th>BudExtCost</th>
            <th>BudTotCost</th>
        </tr>
        <tr>
            <td>20.00</td>
            <td>14.00</td>
            <td>34.00</td>
        </tr>
        <tr>
            <th>SurIntCost</th>
            <th>SurExtCost</th>
            <th>SurTotCost</th>
        </tr>
        <tr>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
    </table>


</div>
</body>
</html>
;

Answer 1

请试试这个...
在剃刀页面中，将Model（@Bobo）的值传递给JS文件

<script> 
   var tempValue = '@Bobo'; 
   setMouseClickmt(tempValue , yourOtherValues....);
</script>

并在JS中分配点击处理程序中传递的值

detail_popup.innerHTML = tempValue ;

在剃刀页面的脚本标记中使用@Bobo时添加单引号。希望它有所帮助

无法使用Html.Action设置div的innerHTML（＆＃34; _TaskDetail＆＃34;，＆＃34; ProTask＆＃34;）

1 个答案: