C# Knockout.js无法在mvc中从html表单调用

我刚刚开始使用Knockout.js。我读过关于在mvc中使用knockout.js从数据库访问数据的各种教程，但都不管用。以下是我的表格：-

    <form  data-bind="submit: save" method="post" style="text-align: inherit;">
        <table>
            <tr>
                <td style="text-align: right">
                    Name:
                </td>
                <td>
                    <input type="text" placeholder="Enter Your name" data-bind="value: name" required /><br />
                </td>
            </tr>
            <tr>
                <td style="text-align: right">
                    Emp#:
                </td>
                <td>
                    <input type="text" placeholder="Enter Your Code" required data-bind="value:code" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right">
                    Date of Birth:
                </td>
                <td>
                    <input type="date" placeholder="Enter Your Date Of Birth" data-bind="value:date" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right">
                    Age:
                </td>
                <td>
                    <input type="number" placeholder="AGE" min="18" max="60" data-bind="value:age" /><br />
                </td>
            </tr>
            <tr>
                <td style="text-align: right">
                    Contact Number:
                </td>
                <td>
                    <input type="text" placeholder="Enter Your Contact Number" data-bind="value:contact" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right">
                    Email:
                </td>
                <td>
                    <input type="email" placeholder="Enter Your Email" data-bind="value:email" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right">
                    Address:
                </td>
                <td>
                    <input type="text" placeholder="Enter Your Address" data-bind="value: address" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right">
                    City:
                </td>
                <td>
                    <select>
                        <option value="city" data-bind="selectedOptions:optionselect">Noida</option>
                        <option value="city" data-bind="selectedOptions:optionselect">Mumbai</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="text-align: right">
                    Marital Status:
                </td>
                <td>
                    <input type="radio" name="martialStatus" value="Married" data-bind="checked:radioselect" />Married
                    <input type="radio" name="martialStatus" value="UnMarried" data-bind="checked:radioselect" />UnMarried
                </td>
            </tr>
            <tr>
                <td style="text-align: right">
                    Any Employee Reffrence:
                </td>
                <td>
                    <input type="checkbox" name="referal" value="yes" data-bind="checked:checkboxchecked" />
                </td>
            </tr>
        </table>
        <div style="float: right; margin-right: 15px;">
        <input type="submit" name="submit" value="Save" />
        <button type="button" value="cancel" onclick="window.close(this);">
            Cancel
        </button>
        </div>
        </form>

姓名：


环境管理计划：
出生日期:
年龄：


联络电话：
电邮：
地址:
城市：
诺伊达
孟买
婚姻状况：
已婚的
未婚的
任何员工参考：
取消

我的javascript如下所示：-

     <script type = "text/javascript">
     var viewModel = {

   name: ko.observable(""),
    code: ko.observable(""),
   date: ko.observable(""),
   age: ko.observable(""),
   contact: ko.observable(""),
  email: ko.observable(""),
    address: ko.observable(""),
   optionselect: ko.observable(""),
   radioselect: ko.observable(""),
    checkboxchecked: ko.observable("")

    var save = function(){
     $.ajax("/Exercise/Exercise7", {
        ko.toJSON(viewModel),
        type: "post", 
        contentType: "application/json",
        success: function(result) { alert(result) }
    });
    <script>

var viewModel={
名称：ko.可观察（“”），
代码：ko.可观察（“”），
日期：ko.可观察（“”），
年龄：ko.可观察（“”），
联系人：ko.可观察（“”），
电子邮件：ko.observable（“”），
地址：ko.observable（“”），
选项选择：可观察的（“”），
无线电选择：ko.可观察（“”），
checkboxchecked:ko.可观察（“”）
var save=function（）{
$.ajax（“/Exercise/Exercise7”{
ko.toJSON（视图模型），
类型：“post”，
contentType:“应用程序/json”，
成功：函数（结果）{alert（结果）}
});

问题是：-
1） 当我运行此应用程序时，脚本没有从窗体调用。 2） 如何将数据从脚本传输到我的控制器操作

提前感谢！！

您可以使用以下类似操作：

型号

public class ExampleKoViewModel
{
    public string SimpleName { get; set; }

    // More properties etc here...
}

public class MyViewModel
{
    public string FirstName { get; set; }

    //other properties, etc...
}

控制器

[HttpGet]
public ActionResult ExampleKo()
{
    return View();
}

[HttpPost]
public ActionResult ExampleKo(ExampleKoViewModel viewModel)
{
    // Do something with the value passed back
    string debugMessage = "Hello there " + viewModel.SimpleName;
    return View();
}

[OutputCache(Duration=0,VaryByParam="none")]
public JsonResult KnockoutViewModelTest()
{
    // Build up our view model
    var viewModel = new ExampleKoViewModel();
    viewModel.SimpleName = "Fred Bloggs";

    // Send back as a Json result
    var result = new JsonResult();
    result.Data = viewModel;
    return Json(result, JsonRequestBehavior.AllowGet);
}

查看

@using (Html.BeginForm())
{
    <input type="text" data-bind="text: SimpleName" name="SimpleName" id="SimpleName" />
    <button type="submit" value="Save">Save</button>
}

@Ajax.KnockoutForModel(true, true, Url.Content("KnockoutViewModelTest"))

<!-- Sample Markup... -->
<form data-bind="submit: mySubmitFunction">
    <input type="text" data-bind="text: firstName" />

    <!-- Your form will have other fields here... -->

    <button type="submit"></button>
</form>

<!-- KO ViewModel ... -->
<script type="text/javascript">

    var viewModel = function() {
        var self = this;

        //View Model properties...
        self.firstName = ko.observable();

        //View Model Events...
        self.mySubmitFunction = function() {

            //build up our data...
            //as complexity increases, consider
            //using a separate object to handle 
            //data access, etc..
            var postData = {};
            postData.FirstName = self.firstName;

            $.ajax({
                url: '@Url.Action("Save", "MyController")', //Your Controller Url
                data: postData,
                type: 'POST',
                contentType: 'application/json',
                success: function(data) {
                    alert(data); // should be the firstName passed back from the server
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    //handle the error somehow...
                }

            });
        }
    };

    //wire up the viewModel
    $(document).ready(function(){
        var myViewModel = new ViewModel();
        ko.applyBindings(myViewModel);
    });

</script>

@使用（Html.BeginForm（））
{
拯救
}
@Ajax.knockoutormodel（true、true、Url.Content（“KnockoutViewModelTest”））

下面是一个使用本机KO和ASP.NET MVC的示例：

型号

public class ExampleKoViewModel
{
    public string SimpleName { get; set; }

    // More properties etc here...
}

public class MyViewModel
{
    public string FirstName { get; set; }

    //other properties, etc...
}

控制器方法

[HttpPost]
public JsonResult Save(MyViewModel viewModel)
{
    // do something with the data...
    string expectedName = viewModel.FirstName;

    return Json(expectedName);
}

查看

@using (Html.BeginForm())
{
    <input type="text" data-bind="text: SimpleName" name="SimpleName" id="SimpleName" />
    <button type="submit" value="Save">Save</button>
}

@Ajax.KnockoutForModel(true, true, Url.Content("KnockoutViewModelTest"))

<!-- Sample Markup... -->
<form data-bind="submit: mySubmitFunction">
    <input type="text" data-bind="text: firstName" />

    <!-- Your form will have other fields here... -->

    <button type="submit"></button>
</form>

<!-- KO ViewModel ... -->
<script type="text/javascript">

    var viewModel = function() {
        var self = this;

        //View Model properties...
        self.firstName = ko.observable();

        //View Model Events...
        self.mySubmitFunction = function() {

            //build up our data...
            //as complexity increases, consider
            //using a separate object to handle 
            //data access, etc..
            var postData = {};
            postData.FirstName = self.firstName;

            $.ajax({
                url: '@Url.Action("Save", "MyController")', //Your Controller Url
                data: postData,
                type: 'POST',
                contentType: 'application/json',
                success: function(data) {
                    alert(data); // should be the firstName passed back from the server
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    //handle the error somehow...
                }

            });
        }
    };

    //wire up the viewModel
    $(document).ready(function(){
        var myViewModel = new ViewModel();
        ko.applyBindings(myViewModel);
    });

</script>

var viewModel=函数（）{
var self=这个；
//查看模型属性。。。
self.firstName=ko.observable（）；
//查看模型事件。。。
self.mySubmitFunction=函数（）{
//建立我们的数据。。。
//随着复杂性的增加，考虑
//使用单独的对象来处理
//数据访问等。。
var postData={}；
postData.FirstName=self.FirstName；
$.ajax({
url:'@url.Action（“保存”，“MyController”），//您的控制器url
数据：postData，
键入：“POST”，
contentType:'应用程序/json'，
成功：功能（数据）{
警报（数据）；//应该是从服务器传回的名字
},
错误：函数（jqXHR、textStatus、errorshown）{
//以某种方式处理错误。。。
}
});
}
};
//连接viewModel
$（文档）.ready（函数（）{
var myViewModel=newviewmodel（）；
应用绑定（myViewModel）；
});

注意： 只要属性名称相同，传递到服务器的JSON将通过ASP.NET MVC框架“自动”绑定到视图模型