Question

我目前正在开发一个ASP.NET MVC项目。 Web应用程序的站点使用Bootstrap创建。后来我添加了一些AngularJS脚本，以便能够将页面翻译成不同的语言。这适用于所有页面，但如果从页面加载局部视图则不行。因此，例如，我有一个页面来按名称或主机名搜索转出对象。在页面上，花括号中的所有角度表达式都被正确计算，并使用翻译脚本替换为多种语言的字符串。现在，如果我按三个属性之一过滤对象，则会加载该页面的部分视图，显示搜索结果，但这里是未评估的角度表达式，它只显示表达式本身。

以下是正常运作的页面：

＆＃13;

@{
    ViewBag.Title = "{{ 'ROLLOUT-OBJECT_MANAGEMENT.TITLE' | translate }}";
}

<!-- html -->
<div style="font-size: 20px; margin-top: 20px;  margin-bottom: 20px;">
    <div class="gray-background list-group-item" translate="{{'ROLLOUT-OBJECT_MANAGEMENT.TITLE'}}"></div>
</div>
<div class="list-group">

    <div class="gray-background list-group-item">
        <div class="row margin-bottom">
            <div class="col-md-3">
                <h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.FIRST_NAME'}}"></h6>
            </div>
            <div class="col-md-3">
                <h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.SURNAME'}}"></h6>
            </div>
            <div class="col-md-3">
                <h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.HOST_NAME'}}"></h6>
            </div>
        </div>
        <div class="row margin-bottom">
            <div class="col-md-3">
                <!-- referenced in getPartial() -->
                <input type="text" class="form-control" id="iFirstName" name="iFirstName" placeholder="">
            </div>
            <div class="col-md-3">
                <!-- referenced in getPartial() -->
                <input type="text" class="form-control" id="iSurName" name="iSurName" placeholder="">
            </div>
            <div class="col-md-3">
                <!-- referenced in getPartial() -->
                <input type="text" class="form-control" id="iHostName" name="iHostName" placeholder="">
            </div>
            <div class="col-md-3">
                <!-- getPartial() added to click through javascript-->
                <button type="submit" class="btn btn-primary btn-block" id="iButton"><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.BUTTON_SEARCH'}}"></span><span class="white-color glyphicon glyphicon-search"></span></button>
            </div>
        </div>
    </div>
</div>
<div class="list-group">
    <div class="gray-background list-group-item">
        <h5><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.RESULTS'}}"></span><span class="purple-color glyphicon glyphicon-globe"></span></h5>
    </div>
    <!-- referenced in getPartial() -->
    <div class="gray-background list-group-item">

        <div class="row">
            <div class="col-md-12" id="partialViewContainer">
                @{Html.RenderPartial("_RolloutObjectManagementResultsPartial");}
            </div>
        </div>
    </div>
</div>


<!-- layout -->
@Styles.Render(
  "~/content/chosen/chosen.css",
  "~/content/chosen/prism.css",
  "~/content/chosen/style.css",
  "~/content/bootstrap.css",
  "~/content/Site.css")

<!-- javascript -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
    var config = {
        '.chosen-select': {},
        '.chosen-select-deselect': { allow_single_deselect: true },
        '.chosen-select-no-single': { disable_search_threshold: 10 },
        '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
        '.chosen-select-width': { width: "95%" }
    }
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }
</script>
<script>
    //add functionality to button
    $('#iButton').click(function () {
        getPartial('0');
    });
</script>
<script>
    function previous() {
        var temp = document.getElementById("hPage").value;
        //alert(temp);//debug
        if (temp > 0) {
            temp = --temp;
        }
        getPartial(temp);
    }
    function next() {
        var temp = document.getElementById("hPage").value;
        //alert(temp);//debug
        temp = ++temp;
        getPartial(temp);
    }
</script>
<script>
    function getPartial(newPage) {
        //get search values
        var tempFirst = document.getElementById("iFirstName");
        var tempSur = document.getElementById("iSurName");
        var tempHost = document.getElementById("iHostName");
        var firstResult = tempFirst.value;
        var surResult = tempSur.value;
        var hostResult = tempHost.value;
        //ajax call
        $.ajax({
            url: "_RolloutObjectManagementResultsPartial",
            type: "POST",
            data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 },
            dataType: "html",
            error: function (xhr) {
                //alert(xhr.responseText);//debug
            },
            success: function (result) {
                $("#partialViewContainer").html(result).find("select").each(function () {
                    $(this).chosen({});
                })
            },
            complete: function () {
                //alert("everything worked");//debug
            }
        });
    }
</script>

＆＃13;

这是部分视图，它不起作用（重要的是{{...}}中的表达式：

＆＃13;

<!-- Import needed namespaces -->
@using RolloutTool.BusinessLayer.Foundation
@using RolloutTool.Utility

<!-- Initializing needed variables -->
@{
    List<RolloutObject> RolloutObjects = ViewContext.Controller.ViewBag.RolloutObjects;
    List<Cluster> Clusters = ViewContext.Controller.ViewBag.Clusters;
    string name = "";
    int count = 0;
    string rowID = "";
    int page = 0;
    if (ViewContext.Controller.ViewBag.Page != null)
    {
        page = ViewContext.Controller.ViewBag.Page;
    } 
}

<!-- html elements -->
<div class="row">
    <div class="col-md-12">
        <table class="table">
            <thead>
                <tr>
                    <th style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EMPLOYEE'}}"></h6></th>
                    <th style="width:20%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.WORK_STATION'}}"></h6></th>
                    <th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EDIT'}}"></h6></th>
                    <th class="text-center" style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.CLUSTER'}}"></h6></th>
                    <th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.ASSIGN'}}"></h6></th>
                </tr>
            </thead>
            <tbody>
                <!-- creating all RolloutObject Table rows -->
                @foreach (RolloutObject ro in RolloutObjects)
                {
                        <!-- generating rowID -->
                    rowID = "row" + Convert.ToString(count);
                    count++;
                        <!-- generating the full employee name -->
                    name = Functions.TryGetValue(ro.Employee.FirstName) + " " + Functions.TryGetValue(ro.Employee.SecondName) + " " + Functions.TryGetValue(ro.Employee.Name);
                    <tr id="@rowID">
                        <td>@name</td>
                        <td id="@Convert.ToString(rowID + "_hn")">@Convert.ToString(Functions.TryGetValue(ro.Hostname))</td>
                        <!-- generate link to right rolloutobjectedit -->
                        <td class="text-center"><a href="#"><span class="btn-pencil glyphicon glyphicon-pencil blue-color glyph-hov" onclick="location.href='@Url.Action("RolloutObjectEdit", "RolloutObject", new {hostName = ro.Hostname })'"></span></a></td>
                        <!-- generating the link for cluster addition and populating cluster dropdown -->
                        <td class="text-center">
                            <div class="row">
                                <div class="col-sm-12">
                                    <select class="chosen-select no-margin" style="width:100%" id="@Convert.ToString(rowID + "_cl")" name="iCluster" data-placeholder="Cluster">
                                        @if (ro.Cluster != null)
                                        {
                                            <option selected>@Convert.ToString(Functions.TryGetValue(ro.Cluster.Name))</option>
                                        }
                                        else
                                        {
                                            <option></option>
                                        }
                                        @foreach (Cluster cluster in Clusters)
                                        {
                                            <option>@Convert.ToString(Functions.TryGetValue(cluster.Name))</option>
                                        }
                                    </select>
                                </div>
                            </div>
                        </td>
                        <td class="text-center"><span class="btn-ok glyphicon glyphicon-ok green-color glyph-hov" onclick="callAjax('@rowID')" /></td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <input class="hidden" id="hPage" value="@Convert.ToString(page)" />
        <nav>
            <ul class="pager">
                <li class="pull-left"><a class="btn-paging glyphicon glyphicon-arrow-left" onclick="previous()"></a></li>
                <li class="pull-right"><a class="btn-paging glyphicon glyphicon-arrow-right" onclick="next()"></a></li>
            </ul>
        </nav>
    </div>
</div>

<!-- javascript -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
<script>
    function callAjax(idRow) {
        //get row values
        var tempTD = document.getElementById(idRow + "_hn");
        var tempSelect = document.getElementById(idRow + "_cl");

        var tempHostName = tempTD.textContent;
        var tempCluster = tempSelect.options[tempSelect.selectedIndex].text;

        //ajax call
        $.ajax({
            url: "AddToCluster",
            type: "POST",
            data: { clusterName: tempCluster, hostName: tempHostName },
            dataType: "html",
            error: function (xhr) {
                alert(xhr.responseText);
            },
            success: function (result) {
               
            },
            complete: function () {
                //alert("everything worked");//debug
            }
        });
    }
</script>
<script>
    function previous() {
        var temp = document.getElementById("hPage").value;
        //alert(temp);//debug
        if (temp > 0) {
            temp = --temp;
        }
        getPartial(temp);
    }
    function next() {
        var temp = document.getElementById("hPage").value;
        //alert(temp);//debug
        temp = ++temp;
        getPartial(temp);
    }
</script>
<script>
    function getPartial(newPage) {
        //get search values
        var tempFirst = document.getElementById("iFirstName");
        var tempSur = document.getElementById("iSurName");
        var tempHost = document.getElementById("iHostName");
        var firstResult = tempFirst.value;
        var surResult = tempSur.value;
        var hostResult = tempHost.value;
        //ajax call
        $.ajax({
            url: "_RolloutObjectManagementResultsPartial",
            type: "POST",
            data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 },
            dataType: "html",
            error: function (xhr) {
                alert(xhr.responseText);
            },
            success: function (result) {
                $("#partialViewContainer").html(result).find("select").each(function () {
                    $(this).chosen({});
                })
            },
            complete: function () {
                //alert("everything worked");//debug
            }
        });
    }
</script>

＆＃13;

这是包含和加载脚本的_Layout.cshtml：

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - {{ 'TITLE.PROGRAM' | translate }}</title>
    @Styles.Render(
    "~/Content/css",
    "~/Content/flag-icon-css-master/assets/docs.css",
    "~/Content/flag-icon-css-master/css/flag-icon.min.css",
    "~/Content/Site.css")
    <script src="~/Scripts/angular/angular.js"></script>
    <script src="~/Scripts/angular/angular-translate.js"></script>
    <script src="~/Scripts/angular/angular-cookies.min.js"></script>
    <script src="~/Scripts/angular/translate.js"></script>
    <script src="~/Scripts/angular/angular-route.min.js"></script>
    <script src="~/Scripts/angular/angular-translate-storage-cookie.min.js"></script>
    <script src="~/Scripts/angular/angular-translate-storage-local.min.js"></script>    
</head>

<body ng-controller="Ctrl">
  
  <!-- Here is the html for the navigation bar etc. -->
  
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

＆＃13;

我真的不是AngularJS的专家，因为我只想提供一些很酷的翻译功能，但我希望你们知道为什么它在部分视图中不起作用。

Answer 1

只需要使用ng-include（“'controller / action'”）调用局部视图。在写url时，撇号（'）很重要。

实施例

x.getQueue().take();

并在角度控制器内部

 <div id="TestDiv" ng-include="templateUrl"></div>

重新实现它可能一点也不困难，但是使用ng-include你也不需要进行ajax调用。它完成所有这一切，包括ajax调用，编译和显示。但像ng-click和其他事件这样的函数不能像一次编译过程一样工作。

AngularJS在MVC部分视图中不起作用

1 个答案: