为什么我的回发不能用于Html.Actionlink甚至按钮JQuery

时间:2017-03-17 18:21:33

标签: jquery html asp.net-mvc postback

这是我的cshtml代码和我的jquery,我尝试了这两种不同的方式。当我点击我的按钮批准时,我希望它带有参数的Action ApprovePoints,但没有任何反应

这是我的控制器:

[HttpGet]
    public ActionResult ApprovePoints()
    {
        // Build out the Screen to Approve Points
        var model = new AdminPointsViewModel();
        var ptsToApprove = from x in db.CommunityPts
                           join y in db.CertPointTypes on x.TypeId equals y.TypeId
                           where x.Pending == true
                           select new AdminPoints
                           {
                               communityId = x.Community.CommunityId,
                               communityName = x.Community.ComunityName,
                               pointId = x.CertPoint.PointId,
                               pointDesc = x.CertPoint.PointDescription,
                               typeId = x.CertPoint.TypeId,
                               typeDesc = y.TypeName,
                               pointsExpected = x.CertPoint.Points,
                               pointsEarned = (int) x.PointsEarned,
                               dateApplied = (DateTime) x.DateApplied,


                           };
        model.adminPoints = ptsToApprove;
        return View(model);
    }

    [HttpPost]
    public ActionResult ApprovePoints(int cid, int pid)
    {
        var approvePts = db.CommunityPts.Where(x => x.CommunityId == cid && x.PointId == pid).SingleOrDefault();

        return View();

    }
}

这是标记和jquery:

<form method="post">
<table border="1" style="border-color:white; border-width:thick;">
    <thead style="font-weight:bold">
        <tr>
            <th>Community</th>
            <th>Activity</th>
            <th>Category Code</th>
            <th>Points Expected</th>
            <th>Points Earned</th>
            <th>Date Applied</th>
            <th>Approve</th>
        </tr>
    </thead>

    @if (Model.adminPoints != null)
    {
        foreach (var pts in @Model.adminPoints)
        {
            <tr>
                <td>@pts.communityName</td>
                <td>@pts.pointDesc</td>
                <td>@pts.typeDesc</td>
                <td>@pts.pointsExpected</td>
                <td>@pts.pointsEarned</td>
                <td>@Convert.ToDateTime(@pts.dateApplied).ToString("MM/dd/yyyy")</td>
                <td>@Html.ActionLink("Approve Points", "ApprovePoints", "Admin", new {cid= @pts.communityId, pid = @pts.pointId}, new {@class = "btn btn-default"})</td>
                <td><a href="#" class="btn btn-default" onclick="ApprovePoints(@pts.communityId, @pts.pointId);">Approve Points</a></td>
            </tr>
        }

    }
    else
    {
    <tr>
        <td>There are no points to approve at this time.</td>
    </tr>
    }

    <tfoot>
        <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
    </tfoot>
</table>
    </form>
<script>
    var ApprovePoints = (function (CommunityId, PointId) {


        var data = new FormData();
        data.append("id", CommunityId);
        data.append("pid", PointId);

        alert(data.get("id"));
        alert(data.get("pid"));

        $.ajax({

            type: "POST",
            url: "/Admin/ApprovePoints/",  
            data: data,
            processData: false,
            success: function () {

                window.location.href = "/Admin/ApprovePoints/" 
            },
            error: function (errorData) { alert(errorData); }


        });

    });
</script>

1 个答案:

答案 0 :(得分:1)

似乎您可能会错过对此处工作技术的一些理解。我相信你的主要误解是你可以用JavaScript调用C#函数,你不能。请记住,在渲染cshtml视图时,所有c#都通过Razor引擎呈现为HTML。你在浏览器中看到的是严格的HTML,JavaScript和CSS。您需要调用MVC路由来调用服务器端函数。

打开浏览器控制台。点击链接时是否看到错误Uncaught ReferenceError: ApprovePoints is not defined?那是因为onclick是一个javascript事件处理程序,而ApprovePoints不是一个已定义的函数。

您需要使表单元素提交(默认情况下,表单操作将POST到当前路由)。您可以通过多种方式提交提交。例如,使用元素:

<form>
   <input type="submit" value="Click to submit form"/>
   -- or --
   <button>Click to submit form</button>
</form>

或者使用javscript

<script>
function submitForm(){
   document.getElementById('formid').submit()
}
</script>

请参阅表格here

的文档

您可以从此post获得一些见解