MVC Knockout 验证显示和答案

【问题标题】：MVC Knockout validation display andMVC Knockout 验证显示和
【发布时间】：2013-06-23 11:36:36
【问题描述】：

我是第一次使用淘汰赛，我正在努力解决一个问题。

我有一个包含多个部分的页面，并且希望能够编辑一个部分并提交给控制器，然后显示保存的详细信息。

每个部分都是包含显示信息和表单的部分视图。它们根据需要显示和隐藏。我有用于提交的代码，但问题是 ModelState 无效时。我需要返回显示验证消息的表单

服务器验证失败时如何再次显示表单？当验证失败时，它当前会返回到显示部分。

我还注意到没有显示验证消息。

我相信这一定是一个简单修复的常见问题。我知道有淘汰验证工具，但稍后需要进行更复杂的业务逻辑验证，并且需要让该技术发挥作用。

视图模型：

    [Required]
    public DateTime? InterviewDate { get; set; }

查看：

<div data-bind="if: showAdminInterviewDisplay" id="Display">
<div>
    <button data-bind="click: showInterviewForm" id="EditButton">Edit</button>
</div>
<div>
    @Html.Label("Inteview Date") :
    <label data-bind="text: interviewDate"></label>
</div>
</div>
<div data-bind="if: showAdminInterviewForm" id="Form">   
<div>
    @Html.Label("Interview Date")
    <input data-bind="value: interviewDate" id="interviewDatePicker" />
    @Html.ValidationMessageFor(m => m.InterviewDate)
</div>

<div>
    <button data-bind="click: saveInterviewDate">Submit</button> 
</div>

淘汰视图模型：

function InterviewViewModel() {
    //Data
    var self = this;
    var jsonDate = @Html.Raw(Json.Encode(@Model.InterviewDate));
    var date = new Date(parseInt(jsonDate.substr(6)));

    self.interviewDate = ko.observable(dateFormat(date, "dd/mm/yyyy"));        
    self.showAdminInterviewDisplay = ko.observable(true);
    self.showAdminInterviewForm = ko.observable();

    self.showInterviewForm = function () {
        self.showAdminInterviewDisplay(false);
        self.showAdminInterviewForm(true);
        $("#interviewDatePicker").datepicker({dateFormat: 'dd/mm/yy'});
    };

    //Operations
    self.saveInterviewDate = function() {
        $.ajax("@Url.Action("SaveInterview")", {
            data: ko.toJSON(self),
            type: "post",
            contentType: "application/json",
            success: function(data) {
                self.showAdminInterviewDisplay(true);
                self.showAdminInterviewForm(false);
            }
        });
    };
};

ko.applyBindings(new InterviewViewModel());

控制器：

      public ActionResult SaveInterview(KnockoutViewModel model)
    {
        if (ModelState.IsValid)
        {
            return Json(model);
        }
        return PartialView("_AdminInterview", model);
    }

【问题讨论】：

标签： validation jquery model-view-controller knockout.js

【解决方案1】：

不要从您的操作方法返回部分视图，而是将序列化的错误模型返回给 AJAX 调用中的成功函数。错误模型将包含 ModelState 中的所有错误。

请参阅这篇文章，了解如何从模型状态获取和使用错误： ASP.NET MVC How to convert ModelState errors to json（JK的回答）

所以你会有类似的东西：

错误模型：

public class JsonErrorModel
{
    public JsonErrorModel()
    {
        HasFailed = true;
    }

    public bool HasFailed { get; set; }
    public IEnumerable ErrorList { get; set; } 
}

控制器：

if(ModelState.IsValid)
{    
  //Do whatever here 
  return Json(new { model });
}

return Json(new JsonErrorModel {ErrorList = ModelState.Errors()});

AJAX调用成功函数：

 success: function (result) {                    
               if(result.HasFailed) {
                   self.showAdminInterviewDisplay(false);
                   self.showAdminInterviewForm(true);
                   DisplayErrors(result.ErrorList);
               }
               else {
                   self.showAdminInterviewDisplay(true);
                   self.showAdminInterviewForm(false);
               }
           }

所以现在，如果服务器端验证失败，视图将显示表单和验证错误。

【讨论】：