Question

使用asp.net mvc，c＃，knockoutjs

我旁边有一个textarea和一个ADD按钮。用户可以在textarea中输入并按CHECK按钮，或者他们可以单击“添加”按钮添加另一个文本区域，然后单击“检查”按钮。他们可以添加的textarea没有限制。当他们按下CHECK按钮时，代码命中我的MVC控制器方法并对输入进行一些验证。如果输入正常我继续显示错误。

我的问题是突出显示并显示正确的错误。现在我只是使用一个通用错误标签来显示错误。我想向textarea显示错误，错误不是通用错误。我的代码如下所示。

<form id="form" asp-controller="Home" asp-action="FilterMaintenance" method="post">
<div class="form-horizontal" style="margin-top:50px">
<div data-bind="foreach: { data: records }">
    <div class="form-group">
        <div class="col-md-6 ">
            <textarea rows="1" class="required text-danger form-control textbox-wide" data-bind="value: $data.input, attr: { name: 'Records[' + $index() + '].Input', id: 'Records[' + $index() + '].Input'}"></textarea>
            <span class="help-block-msg field-validation-valid" data-valmsg-replace="true" data-bind="attr: { 'data-valmsg-for': 'Records[' + $index() + '].Input'}"></span>
        </div>
        <div class="col-md-2">                       
            <input type="button" value="Add Record" class="btn btn-primary" data-bind="click: $parent.addRecord, visible: function(){ return !($index() != $parent.records().length - 1) }()" />
        </div>  
    </div>
</div>
<div class="form-group">
    <div class="col-md-2">
        <input type="button" value="Check Input" class="btn btn-primary" data-bind='click: checkInput' />
    </div>
</div>
    <div class="form-group" data-bind="visible: errorFlag">
        <span data-bind="text: errorText"></span>
    </div>
</div>

淘汰赛代码：

(function () {
var viewModel = function (vmData) {

    var self = this;        
    self.errorFlag = ko.observable(false);
    self.errorText = ko.observable();        
    self.records = ko.observableArray();

    self.records([{            
        input: ""
    }]);

    self.addRecord = function () {           
        self.records.push(
            {
                input: ""
            });
    };

    self.checkInput = function () {

        var returnVal = false;
        var records = self.records();
        var input = JSON.stringify(records);
        //With abc as first and def as second texarea entry I get as below
        //"[{"input":"abc"},{"input":"def"}]"

        $.ajax({
            type: "POST",                
            async: false,
            url:"/Home/CheckRecord",
            contentType: 'application/x-www-form-urlencoded; charset=utf-8',
            data: {                
                "input": input
            },
            success: function (data) {
                self.errorFlag(true);
                if (data == '') {
                    self.errorText('Input is correct');                                                
                    returnVal = true;
                }
                else {
                    self.errorText('Input is not correct: ' + data);                                                
                    returnVal = false;
                }
            }
        });

        return returnVal;
    }
}      

    var pageVM = new viewModel();
    ko.applyBindings(pageVM, $("form")[0]);

})();

MVC控制器：

[HttpPost]
    public IActionResult CheckRecord(string input)
    {
       string parseError = string.Empty;
       bool inputCheck = false;
       string returnValue = string.Empty;

        inputCheck  = false;//doing some checks here then return true or false
        returnValue = inputCheck ? "" : "error";

        var ret = Json(returnValue);

        return ret;
    }

此外，我还为2 textarea添加了以下生成的HTML：

<div class="form-group">
                <div class="col-md-6 ">
                    <textarea rows="1" class="required text-danger form-control textbox-wide" data-bind="value: $data.input, attr: { name: 'Records[' + $index() + '].Input', id: 'Records[' + $index() + '].Input'}" name="Records[0].Input" id="Records[0].Input"></textarea>
                    <span class="help-block-msg field-validation-valid" data-valmsg-replace="true" data-bind="attr: { 'data-valmsg-for': 'Records[' + $index() + '].Input'}" data-valmsg-for="Records[0].Input"></span>
                </div>
                <div class="col-md-2">                       
                    <input type="button" value="Add Record" class="btn btn-primary" data-bind="click: $parent.addRecord, visible: function(){ return !($index() != $parent.records().length - 1) }()" style="display: none;">
                </div>              

            </div>

<div class="form-group">
                <div class="col-md-6 ">
                    <textarea rows="1" class="required text-danger form-control textbox-wide" data-bind="value: $data.input, attr: { name: 'Records[' + $index() + '].Input', id: 'Records[' + $index() + '].Input'}" name="Records[1].Input" id="Records[1].Input"></textarea>
                    <span class="help-block-msg field-validation-valid" data-valmsg-replace="true" data-bind="attr: { 'data-valmsg-for': 'Records[' + $index() + '].Input'}" data-valmsg-for="Records[1].Input"></span>
                </div>
                <div class="col-md-2">                       
                    <input type="button" value="Add Record" class="btn btn-primary" data-bind="click: $parent.addRecord, visible: function(){ return !($index() != $parent.records().length - 1) }()">
                </div>              

            </div>

对于长篇文章感到抱歉，但希望显示完整的代码以供解释。

赞赏任何意见。

更新

我在jsfiddle中添加了这个：

 https://jsfiddle.net/gmmmh873/

Answer 1

我建议查看Knockout-Validation。它可以为您处理大部分内容，并且有很好的documentation可以帮助您入门。这会在不满足规则时为每个输入字段注入错误消息。您也可以从xhr调用的响应中触发这些。

突出显示特定文本框上的错误：KnockoutJS

1 个答案: