使用 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 form

var token = $('input[name="__RequestVerificationToken"]', form).val();

$.ajax({

  url: "/story/new",

  type: 'POST',

  data: {

      __RequestVerificationToken: token,

      WordCount: finalWordCount

  },

  success: function (data) {

      console.log("Success")

  },

  error: function (error) {

      console.log("error is " + error);

  }

});

这应该有望修复验证错误，让您至少可以执行操作。

Answer 2

MVC 应用程序可能需要 json 格式的请求正文，因为这是 asp.net MVC 的默认配置。因此，在将数据发布到服务器之前，您需要将模型字符串化为适当的 json。

像这样试试

var data = JSON.stringify({WordCount: finalWordCount});

$.ajax({

     url: "/story/new",

     type: 'POST',

      data: data,

      success: function (data) {

          console.log("Success")

      },

      error: function (error) {

          console.log("error is " + error);

      }

    })