使用 JavaScript 和 ViewModel 在 Asp.NET MVC 5

Question

基本问题是这样的。我正在使用 CKEditor 作为各种博客文章的界面。CKEditor 获取字数，但我必须使用一些客户端 JavaScript 来清理它。我想将字数传递到数据库中，这样我就知道每篇文章有多少字。

我有一个帖子的视图模型：

public class NewStoryViewModel

{

    [Required]

    public string Title { get; set; }

    [Required]

    public string Content { get; set; }

    [Required]

    public int Genre { get; set; }

    public IEnumerable<Genre> Genres { get; set; }

    [Required]

    public int StoryType { get; set; }

    public IEnumerable<StoryType> StoryTypes { get; set; }

    public int WordCount { get; set; }

    [Required]

    public int StoryAgeRange { get; set; }

    public IEnumerable<StoryAgeRange> StoryAgeRanges { get; set; }

    [Required]

    public int Visibility { get; set; }

    public IEnumerable<Visibility> Visibilities { get; set; }

}

以及帖子的控制器：

[Authorize]

[HttpPost]

[ValidateAntiForgeryToken]

[ValidateInput(false)]

public ActionResult New (NewStoryViewModel viewModel)

{

    //confirm form data is valid

    if (ModelState.IsValid)

    {

        //create new story object

        var newStory = new Story

        {

            AuthorId = User.Identity.GetUserId(),

            Title = viewModel.Title,

            Content = viewModel.Content,

            GenreId = viewModel.Genre,

            StoryTypeId = viewModel.StoryType,

            StoryAgeRangeId = viewModel.StoryAgeRange,

            VisibilityId = viewModel.Visibility,

            CreatedAt = DateTime.Now,

            WordCount = viewModel.WordCount

        };

        //add new story to db

        dbContext.Stories.Add(newStory);

        //save db

        dbContext.SaveChanges();

        return RedirectToAction("Index", "Story");

    }

    else

    {

        return View(viewModel);

    }

}

Answer 1

您在评论中提到您遇到了 500 内部服务器错误，我猜这是在您尝试了 Shyju 的修复无效 JSON 的建议之后。我的猜测是您现在甚至无法调试控制器操作，因为它期望将防伪令牌传递给它，但您没有在 POST 请求的正文中发送该令牌。要解决这个问题，试试这个：var form = // selector for your formvar token = $('input[name="__RequestVerificationToken"]', form).val();$.ajax({&nbsp; url: "/story/new",&nbsp; type: 'POST',&nbsp; data: {&nbsp; &nbsp; &nbsp; __RequestVerificationToken: token,&nbsp; &nbsp; &nbsp; WordCount: finalWordCount&nbsp; },&nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; console.log("Success")&nbsp; },&nbsp; error: function (error) {&nbsp; &nbsp; &nbsp; console.log("error is " + error);&nbsp; }});这应该有望修复验证错误，让您至少可以执行操作。

Answer 2

MVC 应用程序可能需要 json 格式的请求正文，因为这是 asp.net MVC 的默认配置。因此，在将数据发布到服务器之前，您需要将模型字符串化为适当的 json。像这样试试var data = JSON.stringify({WordCount: finalWordCount});$.ajax({&nbsp; &nbsp; &nbsp;url: "/story/new",&nbsp; &nbsp; &nbsp;type: 'POST',&nbsp; &nbsp; &nbsp; data: data,&nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("Success")&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; error: function (error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("error is " + error);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })