使用angular grid和asp.mvc提交页面时返回404错误

时间:2016-04-11 13:35:16

标签: asp.net angularjs asp.net-mvc

当我点击提交按钮时,我收到404错误,无法找到页面。

我正在使用带有ASP.MVC的angular-ui-grid来从Sql Server数据库返回pdf列表。在页面的初始加载中,网格将填充所有pdf并进行分页。我在页面中添加了一些输入字段,以便在初始加载后,您可以按名称和日期范围进行搜索。单击该按钮时,页面返回404错误,无法找到。

查看

@model WSCWebsite.Models.SC_Opinions_Search_Result

@using (Html.BeginForm("Opinions", "Home", FormMethod.Post, new {@class = "form-horizontal", @id = "searchForm"}))
{
<p>Enter search information into one or more of the fields below.</p>

<p>Using more than one field will result in a more narrow search.</p>

<p>Opinions and orders published prior to 2006 are not available in this search.</p>
<div class="well" ng-controller="OpinionDefaultData">
    <div class="form-group">
        <label class="control-label col-sm-3">Start Date</label>
        <div class="col-sm-5">
            <input type="text" ng-model="StartDate" class="datefield" />
            <span style="padding: 0 0 0 3px">example: 2/27/2006</span>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-3">End Date</label>
        <div class="col-sm-5">

            <input type="text" ng-model="EndDate" class="datefield" />
            <span style="padding: 0 0 0 3px">example: 12/27/2014</span>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-3">Appellant</label>
        <div class="col-sm-5">
            <input type="text" ng-model="Appellant" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-3">Appellee</label>
        <div class="col-sm-5">
            <input type="text" ng-model="Appellee" />
        </div>
    </div>

    @*<div class="form-group">
            <label class="control-label col-sm-3">Docket Number</label>
            <div class="col-sm-5">
            <div>
                @Html.TextBoxFor(m => m.DocketNumber, new { @class = "form-control", @style="display:inline-block; width:220px" })
                <span style="padding: 0 0 0 3px">example: 12/27/2014</span>
            </div>
            </div>
        </div>*@

    <div class="form-group">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">
            <input type="button" value="Clear Form" onclick="history.go(0)" class="btn btn-primary" />
        </div>
        <div class="col-sm-2">
            <button ng-click="SearchOpinions()" class="btn btn-primary">Search</button>
        </div>

    </div>
</div>

MVC控制器

    [HttpGet]
    public JsonResult GetOpinions(DateTime? StartDate, DateTime? EndDate, string Appellant, string Appellee, string DocketNumber)
    {
        if (EndDate != null)
        {
            EndDate = EndDate.Value.AddHours(23);
        }
        OpinionEntities dbContext = new WSCWebsite.Models.OpinionEntities();
        var lst = dbContext.SC_Opinions_Search(DocketNumber,Appellant, Appellee, StartDate, EndDate, 200).ToList();

        return Json(lst, JsonRequestBehavior.AllowGet);
    }

角度控制器

var app = angular.module('WSCWebSite', ['angularUtils.directives.dirPagination']);

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

$scope.StartDate = "";
$scope.EndDate = "";
$scope.Appellant = "";
$scope.Appellee = "";
$scope.DocketNumber = "";

$scope.SearchOpinions = function () {
    $scope.Opinions = []; //declare an empty array
    $http.get("/Home/GetOpinions", {
        params: {
            StartDate: $scope.StartDate,
            EndDate: $scope.EndDate,
            Appellant: $scope.Appellant,
            Appellee: $scope.Appellee,
            DocketNumber: $scope.DocketNumber
        }
    }).success(function (response) {
        $scope.Opinions = response;
    });
    }
});

app.controller('OpinionData', function ($scope, $http) {
    $scope.Opinions = []; //declare an empty array
    $http.get("/Home/GetOpinions", {
        params: {
            StartDate: $scope.StartDate
            , EndDate: $scope.EndDate
            , Appellant: $scope.Appellant
            , Appellee: $scope.Appellee
            , DocketNumber: $scope.DocketNumber
        }
    }).success(function (response) {
        $scope.Opinions = response;  //ajax request to fetch data into $scope.data
    });
});

1 个答案:

答案 0 :(得分:2)

您的表单已在此处发布,

@using (Html.BeginForm("Opinions", "Home", FormMethod.Post, new {@class = "form-horizontal", @id = "searchForm"}))
{
}

看这里你已经通过了Opinions,作为动作,但你的动作名称是GetOpinions()

看看它,也许它会对你有帮助..