通过ajax在mvc中使用apicontroller创建wallpostfunction

Question

我正在尝试使用 apicontroller 和 ajax 在 mvc 的用户页面上显示墙贴。我遇到的问题是我视图中的函数不传递或接收数据，我不知道为什么。

这是我的控制器：

using Microsoft.AspNet.Identity;
using System;
using System.Collections.Generic;
using System.Linq;

using System.Web.Http;
using webDate.Models;

namespace webDate.Controllers
{
    [RoutePrefix("api/wallpost")]
    public class PostApiController : ApiController
    {
        [HttpGet]
        [Route("Get")]
        public PostModel[] ListPosts(string Id)
        {
            var db = new ApplicationDbContext();
            return db.posts.Where(p => p.PostReceiver.Equals(Id)).ToArray();
        }

        [HttpPost]
        [Route("Post")]
        public void Post(PostIndexViewModel postIndex)
        {
            var db = new ApplicationDbContext();
            var poster = db.Users.FirstOrDefault(u => u.Id.Equals(User.Identity.GetUserId()));
            var receiver = db.Users.FirstOrDefault(u => u.Id.Equals(postIndex.PostReceiver));

            var post = new PostModel
            {
                PostContent = postIndex.PostContent,
                Poster = poster.Id,
                PostReceiver = receiver.Id
            };
            db.posts.Add(post);
            db.SaveChanges();

        }


    }
}

这是我的观点：

@model webDate.Models.ProfileViewModel
@{
    ViewBag.Title = "User Profile";
}



<div class="row" style="margin-top:5rem">

    <div class="col-md-12">
        <div class="card">
            <div class="row">
                <img src="@Url.Action("UserAllPhotos", "Home", new { Id = Model.Id })" class="card-img" style="width:9rem ; margin-left: 1rem ; height:9rem" alt="User Photo">
                <div class="card-body">
                    <h3 class="card-title">@Model.Username</h3>
                    <h4 class="card-title">Age: @Model.Age</h4>
                    <p class=" card-text"> @Model.Description</p>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="row" style=" margin-top : 3rem ;">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div>
                    <h3 class="card-header bg-transparent border-bottom">
                        Wall of posts
                    </h3>
                    <p class="card-text"> All them posts </p>
                    <p class="card-text"> All them posts </p>
                    <p class="card-text"> All them posts </p>
                </div>
            </div>

        </div>

    </div>
</div>
@section scripts {
    <script>
    $(document).ready(function () {
        function update() {
            $('#wall-output').text('');
                $.ajax({
                    url: "/api/wallpost/get",
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    data: { Id: @Html.Raw(Json.Encode(Model.Id))},
                    dataType: "json",
                    success: function (posts) {
                        posts.forEach(function (post) {
                            var tr = $('<tr></tr>');
                            tr.append(
                            '<div class="row">' +
                                '<div class="col-sm-6 col-md-4">' +
                                    '<div class="thumbnail">' +
                                    //'<img src= class="card-img" style="width:9rem ; margin-left: 1rem ; height:9rem" alt="User Photo">' +
                                            '<div class="caption">' +
                                                '<h3>' + 'From: ' + postModel.Poster + ' </h3>' +
                                                '<p class="message">' + postModel.PostContent + '</p>' +
                                            '</div>' +
                                    '</div>' +
                                '</div>' +
                            '</div>');
                            $('#wall-output').append(tr);
                        });
                    },
                    error: function () {
                        alert("Error please try again");
                    }
                });

        }


        $("#myButton").click(function () {
            var PostViewModel = new Object();
            PostViewModel.PostContent = $("#message").val().trim();
            PostViewModel.UserWall = @Html.Raw(Json.Encode(Model.Id));
            $.ajax({
                url: '/api/wallpost/post',
                type: 'POST',
                dataType: 'json',
                data: PostViewModel,
                success: function (d) {
                    document.getElementById("postform").reset();
                    update();
                },
                error: function () {
                    alert("Error please try again");
                }
            });
        });
        update();
    });
    </script>
    }
<div class="jumbotron">
    <h1>Wall</h1>
    <table style="width: 100%;">
        <tbody id="wall-output"></tbody>
    </table>
</div>
<div class="container">
    <form name="postform" id="postform" class="form-horizontal">
        <div class="form-group">
            <label for="PostContent">Wall Post:</label>
            <textarea class="form-control" rows="5" id="message"></textarea>
        </div>
        <input type="button" id="myButton" value="Create" />
    </form>
</div>

这是我的模型：

    namespace webDate.Models
{
    public class PostModel
    {
        [Key]
        public int Id { get; set; }
        public string Poster { get; set; }
        public string PostReceiver { get; set; }
        public string PostContent { get; set; }



    }
}

还有我的另一个模特：

    namespace webDate.Models
{
    public class PostViewModel
    {
        public string Poster { get; set; }
        public string PostReceiver { get; set; }

        [AllowHtml]
        [DataType(DataType.MultilineText)]
        [Display(Name = "Wall Post")]
        public string PostContent { get; set; }
    }
}

在 ajax 函数中它直接出错，我不知道为什么会这样。

Answer 1

你的 ajax 调用不需要 /get/：

url: "/api/wallpost/get"

这应该可以正常工作：

url: "/api/wallpost/"