【问题标题】:Binding a Textbox in KNockout在 Knockout 中绑定文本框
【发布时间】:2015-02-27 06:19:26
【问题描述】:

我是淘汰赛的新手。我想将一个文本框绑定到一个视图模型。我有以下代码,但它不起作用。有人能指出我正确的方向吗。

我正在尝试将数据从我的视图模型发布到控制器,但值是空的,即使我已经在文本框中输入了值

<div class="container">
    <form class="form-horizontal" id="ProviderForm" method="post">
        <div class=" form-group">
            <label for="Provider" class="control-label col-sm-2">PROVIDER :</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul id="demolist" class="dropdown-menu">
                            <li><a href="#">Doctor</a></li>
                            <li class="disabled"><a href="#">Facilities</a></li>
                        </ul>
                    </div>
                    <input type="text" id="datebox" data-bind="value: ProviderType" class="form-control" />
                </div>
            </div>
        </div>

        <div class=" form-group">
            <label for="firstName" class="col-sm-2 control-label">First Name</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="inputFirstName" data-bind="value: FirstName" placeholder="Enter the First Name">
            </div>
        </div>

        <div class="form-group">
            <label for="lastName" class="col-sm-2 control-label">Last Name</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="inputLastName" data-bind="value: Lastname" placeholder="Enter the Last Name">
            </div>
        </div>

        <div class="form-group">
            <label for="Certification" class="control-label col-sm-2">Certification :</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul id="demolist2" class="dropdown-menu">
                            <li><a href="#">M.D.</a></li>
                            <li class="disabled"><a href="#">D.O.</a></li>
                        </ul>
                    </div>
                    <input type="text" id="datebox2" data-bind="value: Certification" class="form-control" />
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="Specialization" class="control-label col-sm-2">Specialization :</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul id="demolist3" class="dropdown-menu">
                            <li><a href="#">Family Practitioner</a></li>
                            <li class="disabled"><a href="#">Dentist</a></li>
                            <li class="disabled"><a href="#">Emergency Doctor</a></li>
                        </ul>
                    </div>
                    <input type="text" id="datebox3" data-bind="value: Specialization" class="form-control" />
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="SSN" class="col-sm-2 control-label">SSN</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="inputSSN" data-bind="value: SSN" placeholder="Enter your SSN">
            </div>
        </div>

        <div class="form-group">
            <label for="FacilityName" class="col-sm-2 control-label">Facility Name</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="inputFacility" data-bind="textInput: FacilityName" placeholder="Enter your Facility">
            </div>
        </div>

        <div class="form-group">
            <label for="ContactNumber" class="col-sm-2 control-label">Contact Number</label>
            <div class="col-sm-8">
                <input type="text" maxlength="10" class="form-control" id="inputContactNum" data-bind="value: ContactNumber" placeholder="Enter your Facility">
            </div>
        </div>

        <div class="form-group">
            <label for="EmailID" class="col-sm-2 control-label">Email ID</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="inputEmail" data-bind="value: ContactEmail" placeholder="Enter your Email ID">
            </div>
        </div>
        <div class="form-actions span7 text-center">
            <button type="submit" id="Submit" class="btn btn-primary btn-md ">Save</button>
            <button type="reset" class="btn btn-primary btn-md ">Reset</button>
        </div>
    </form>
</div>

我的脚本

            $("document").ready(function () {            
                $("#Submit").on("click",function(){     
                  var Provider = 
                    {
                        ProviderType: ko.observable(""),
                        FirstName: ko.observable(""),
                        Lastname: ko.observable(""),
                        Certification: ko.observable(""),
                        Specialization: ko.observable(""),
                        SSN: ko.observable(""),
                        ContactNumber: ko.observable(""),
                        ContactEmail: ko.observable(""),
                        FacilityName : ko.observable("")
                    }

                    ko.applyBindings(Provider);

                    $.ajax({
                        type: "POST",
                        url: "/PatientRegister/Create",
                        data : Provider
                    });
                });
            });

在控制器中,我使用这个提供者作为参数。

    public ActionResult Create(Provider provider)
    {
      //.... 
    }

目前provider字段为null,我也创建了一个Provider Class,参数名称相同

public class Provider
    {
        public string ProviderType { get; set; }
        public string FirstName { get; set; }
        public string Lastname { get; set; }
        public string Certification { get; set; }
        public string Specialization { get; set; }
        public string SSN { get; set; }
        public string ContactNumber { get; set;}
        public string ContactEmail { get; set; }
        public string FacilityName { get; set; }
    }

【问题讨论】:

    标签: javascript asp.net-mvc-4 knockout.js textbox


    【解决方案1】:

    您希望这段代码如何工作?

    您需要在页面加载时使您的 provider 对象可观察,

     var Provider = 
                        {
                            ProviderType: ko.observable(""),
                            FirstName: ko.observable(""),
                            Lastname: ko.observable(""),
                            Certification: ko.observable(""),
                            Specialization: ko.observable(""),
                            SSN: ko.observable(""),
                            ContactNumber: ko.observable(""),
                            ContactEmail: ko.observable(""),
                            FacilityName : ko.observable("")
                        }
    
                        ko.applyBindings(Provider);
    

    点击提交按钮后,将此对象发布到您的控制器。

    所以淘汰循环是如何工作的,一旦你说ko.applyBindings(Provider),它就会开始观察你的控件,并且每当你改变控件中的任何值时,淘汰赛都会自动更新你的控件的关联属性。

    Check this fiddle

    【讨论】:

    • 我已经将它绑定到提供程序。我在这里缺少什么?如何使提供程序在页面加载时可观察。
    • 非常感谢,它现在可以工作了。尽管下拉菜单中动态填充的文本框仍然为空,即;提供者类型、认证和专业化。
    • 那么动态是什么意思?因此,如果它在页面加载后被一些 ajaxcalls 加载,那么请确保你说,ko.applyBindings(Provider) 一旦所有控件都呈现在你的页面中,这意味着你必须在你的 ajax 调用之后调用 ko.applybindings,如果可能的话发布你的整个 javascript代码。
    猜你喜欢
    • 1970-01-01
    • 2015-12-18
    • 2015-05-28
    • 2016-07-22
    • 2018-09-05
    • 1970-01-01
    • 2010-10-05
    • 2013-07-18
    • 2015-01-17
    相关资源
    最近更新 更多