如何在 ASP.NET MVC ViewModels 中使用knockout.js? [英] How to use knockout.js with ASP.NET MVC ViewModels?

查看：30
本文介绍了如何在 ASP.NET MVC ViewModels 中使用knockout.js?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

赏金

已经有一段时间了，我还有几个悬而未决的问题.我希望通过增加赏金，也许这些问题会得到解答.

  1. 如何将 html helper 与 Knockout.js 结合使用

  2. 为什么需要准备好文档才能使其工作(有关更多信息，请参阅第一次编辑)

  3. 如果我在视图模型中使用敲除映射，我该怎么做?由于映射，我没有功能.

    function AppViewModel() {//... 此处保留 firstName、lastName 和 fullName 不变 ...this.capitalizeLastName = function() {var currentVal = this.lastName();//读取当前值this.lastName(currentVal.toUpperCase());//写回修改后的值};

  4. 我想使用插件，例如我希望能够回滚可观察对象，就好像用户取消了一个请求我希望能够返回到最后一个值.从我的研究来看，这似乎是通过人们制作像

  5. jQuery
  6. knockoutjs
  7. Knockout.Mapping

    8. 外部脚本.

    控制器代码

     [HttpGet]公共 ActionResult 索引(){var m = new CourseVM { CourseId = 12, CourseName = ".Net";};m.StudentViewModels.Add(new StudentVm { ID = 545, Name = "Name from server", Lastname = "last name from server" });返回视图(m);}[HttpPost]公共 ActionResult 索引(CourseVM 模型){if (!string.IsNullOrWhiteSpace(model.StudentsSerialized)){model.StudentViewModels = JsonConvert.DeserializeObject>(model.StudentsSerialized);模型.StudentsSerialized = string.Empty;}if (!string.IsNullOrWhiteSpace(model.SelectedStudentsSerialized)){model.SelectedStudents = JsonConvert.DeserializeObject>(model.SelectedStudentsSerialized);模型.SelectedStudentsSerialized = string.Empty;}返回视图(模型)；}

    型号

    公开课 CourseVM{公共课程VM(){this.StudentViewModels = new List();this.SelectedStudents = new List();}公共 int CourseId { 获取；放;}[必需(ErrorMessage =课程名称是必需的")][StringLength(100, ErrorMessage = "课程名称不能这么长.")]公共字符串课程名称 { 获取；放;}公共列表<StudentVm>StudentViewModels { 获取；放;}公共列表<StudentVm>SelectedStudents { 得到;放;}公共字符串 StudentsSerialized { get;放;}公共字符串 SelectedStudentsSerialized { 获取；放;}}公开课 StudentVm{公共 int ID { 获取；放;}公共字符串名称 { 获取；放;}公共字符串姓氏 { 获取；放;}}

    CSHTML 页面

    @using (Html.BeginForm()){@Html.ValidationSummary(true)<字段集><legend>CourseVM</legend><div><div class="editor-label">@Html.LabelFor(model => model.CourseId)

<div class="editor-field">@Html.TextBoxFor(model => model.CourseId, new { data_bind = "enable: isInEditMode, value: CourseId" })@Html.ValidationMessageFor(model =>model.CourseId)

<div class="editor-label">@Html.LabelFor(model => model.CourseName)

<div class="editor-field">@Html.TextBoxFor(model => model.CourseName, new { data_bind = "enable: isInEditMode, value: CourseName" })@Html.ValidationMessageFor(model => model.CourseName)

<div class="editor-label">@Html.LabelFor(model => model.StudentViewModels);

<div class="editor-field">@Html.ListBoxFor(模型 =>模型.StudentViewModels，new SelectList(this.Model.StudentViewModels, "ID", "Name"),新的{样式 = "宽度:37%;",data_bind = "启用: isInEditMode, 选项: StudentViewModels, optionsText: 'Name', value: leftStudentSelected, event: { dblclick: moveFromLeftToRight }";})@Html.ListBoxFor(模型 =>模型.SelectedStudents，new SelectList(this.Model.SelectedStudents, "ID", "Name"),新的{样式 = "宽度:37%;",data_bind = "启用: isInEditMode, 选项: SelectedStudents, optionsText: 'Name', value: rightStudentSelected, event: { dblclick: moveFromRightToLeft }";})

@Html.HiddenFor(model => model.CourseId, new { data_bind=value: CourseId" })@Html.HiddenFor(model => model.CourseName, new { data_bind=value: CourseName"})@Html.HiddenFor(model => model.StudentsSerialized, new { data_bind = "value: StudentsSerialized" })@Html.HiddenFor(model => model.SelectedStudentsSerialized, new { data_bind = "value: SelectedStudentsSerialized" })

<p><输入类型=提交"值=保存"数据绑定=启用:!isInEditMode()"；/><button data-bind="enable: !isInEditMode(), click: editMode">编辑模式</button><br/><div><button data-bind="enable: isInEditMode, click: addStudent">Add Student</button><button data-bind="enable: hasChanges, click: executeCommit">Commit</button><button data-bind="enable: isInEditMode, click: executeRollback">Cancel</button>

</p></fieldset>}

脚本





        
        

            
相关文章

            
        

        

            



        

    
    

        

            
其他开发最新文章

            
        

        

            

                热门教程
            

            
        

        

            

                热门工具
            

            
        

        
    



    


    

        

            登录
            关闭
        

        

            

                扫码关注1秒登录
            

            

                
            

            

                
                
            

            

                发送“验证码”获取
                |
                15天全站免登陆