Question

我试图通过调用AngularJS中的WebApi来获取数据。我已验证服务工作正在获取正确的数据。

问题是所选项目没有出现，并且结果模型的绑定似乎不起作用。

就AngularJS而言，我是一个相对新手。有人可以告诉我我做错了什么以及如何纠正这些问题？

提前致谢！

这是角度代码：

var app = angular.module("GreatWestSoftware", [])

app.controller("ContactMeByController",
    function ($scope, $http ,$window) {


        function GetContactByMethods($http) {
            //$scope.Message = 'NULL';
            //$scope.employees = {};
            $http.get('http://localhost:53350/api/ContactBy').then(function (response) {
                $scope.ContactByMethods = response.data;
                $scope.Message = 'OK';
                $scope.gotdata = true;
            },
            function (err) {
                $scope.Message = 'Call failed' + err.status + '  ' + err.statusText;
                $scope.ContactByMethods = {};
                $scope.gotdata = false;
            }
            );

            //window.setTimeout(function () {
            //    $scope.gotdata = true;
            //}, 1000);
        };



        function ShowAlert(msg)
        {
            $window.alert(msg);
        }
    }

);

以下是MVC的模型：

    public class SurveyAnswersHeaderViewModel

{
    public int ProductID { get; set; }

    [Required]
    [Display(Name = "Name:")]
    public string Name { get; set; }


    [EmailAddress]
    [Display(Name = "Your Email Address:")]
    public string Email { get; set; }

    [Phone]
    [Display(Name = "Phone Number:")]
    [DataType(DataType.PhoneNumber,ErrorMessage ="Invalid Phone Number")]
    public string Phone { get; set; }

    [Required]
    [Display(Description ="How should you be contacted",Name ="Contact Me By:",Prompt ="Select contact method")]
    public int ContactBy { get; set; }
}

以下是我尝试加载的页面：

@model GreatWestSoftware.Models.SurveyAnswersHeaderViewModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Great West Software Site Survey";
}

@using (Html.BeginForm("Create", "SurveyAnswersHeader", FormMethod.Post))
{
    @Html.AntiForgeryToken()

      <div class="form-horizontal">
            <h4>@ViewBag.SurveyName</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.HiddenFor(m => m.ProductID)
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div ng-app="GreatWestSoftware" ng-controller="ContactMeByController" ng-show="DisplayContactBy">
                    @Html.LabelFor(model => model.ContactBy, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10" >
                        <select id="ContactByDropdown" ng-model="ContactBy" class="form-inline">
                            <option ng-repeat="ContactByoption in ContactByMethods" ng-selected="{{ContactByoption.IsSelected==true}}" value="{{ContactByoption.ContactByID}}">{{ContactByoption.ContactMeBy}}</option>
                        </select>
                        @*@Html.EditorFor(model => model.ContactBy, new { htmlAttributes = new { @class = "form-control" } })*@
                        @Html.ValidationMessageFor(model => model.ContactBy, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
           <div>
               <h4 class="text-danger">@ViewBag.ErrorMessages</h4>
           </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Start Survey" class="btn btn-default" />
                </div>
            </div>
        </div>
}

<div>
    @Html.ActionLink("Skip", "Index","Home")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/GreatWestSoftware.js"></script>
}

我确实得到了下拉列表的值。但奇怪的是，在生成的代码中有一个。我猜这是显示为列表中的空白条目。即使html看起来正确，下拉列表也没有显示所选的初始值。

第二个问题是，在提交表单时，所选值不会绑定到MVC模型。

Here is what appears in the dropdown. The correct data...

Here is the generated html code

Answer 1

下拉列表未显示初始值，因为在创建选择后初始化值。要解决此问题，您需要在路线解析时加载值。例如：

$routeProvider
    .when("/state-name", {
        templateUrl: "your-template.html",
        controller: "ContactMeByController",
        resolve: {
            contactByMethodsPromise: function($http){
                return $http.get('http://localhost:53350/api/ContactBy');
        }
    }
})

在你的控制器中：

app.controller("ContactMeByController",
function ($scope, $http , $window, contactByMethodsPromise) {
    $scope.ContactByMethods = contactByMethodsPromise;
}

这应该修复选择的初始值。

关于它不绑定，我不确定Angular是否将它绑定到MVC模型。它绑定到变量$ scope.ContactBy，然后您可以将其提交给您的API。

此外，您应该考虑仅使用Angular来呈现您的页面，这不是必需的，并且可能会导致将其与ASP.NET混合的奇怪行为，如您所见here。

Angularjs - 下拉列表未正确绑定且未显示初始值

1 个答案: