问题淘汰js与日期绑定 [英] problem knockout js with date binding

查看:48
本文介绍了问题淘汰js与日期绑定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

嗨伙计们

i有问题淘汰js与日期绑定不工作



这是家庭控制器



hi guys
i have problem knockout js with date binding dosn't work

this is home controller

namespace TestMVC.Controllers
{
    public class Model
    {
        public string Name { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
    }
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            List<Model> modelList = new List<Model>(){
            new Model{Name="Ahmed",StartDate = DateTime.Parse("10/10/2010") , EndDate=DateTime.Parse("20/10/2010")},
            new Model{Name="MMMM",StartDate = DateTime.Parse("10/10/2012") , EndDate=DateTime.Parse("20/10/2013")}
            };
            Session["Model"] = modelList;
            return View();
        }

        public JsonResult LoadModel()
        {
            if (Session["Model"] != null)
            {
                List<Model> modelList = (List<Model>)Session["Model"];
               return Json(modelList, JsonRequestBehavior.AllowGet);
            }
            return Json(null, JsonRequestBehavior.AllowGet);
        }
        public void AddModel(Model model)
        {
            if (Session["Model"] != null)
            {
                List<Model> modelList = (List<Model>)Session["Model"];
                modelList.Add(model);
                Session["Model"] = modelList;
            }
        }

    }
}





这是索引.html



this is index.html

@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/knockout-2.2.0.js"></script>
<script src="~/Scripts/moment.js"></script>
for add<br />
<input type="text" data-bind="value: Name" />
<input type="text" data-bind="value: StartDate" />
<input type="text" data-bind="value: EndDate" />
<input type="button" data-bind="click: addModel" value="Add" />
<br />
for edit<br />
<div data-bind="if: model">
    <input type="text" data-bind="value: model().Name" />
    <input  id="startDate" type="text" data-bind="Date: model().StartDate" />
    <input id="endDate" type="text" data-bind="Date: model().EndDate" />
    <input type="button" value="edit" data-bind="click: editModel" />
</div>
<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Start Date</td>
            <td>End Date</td>
            <td></td>
        </tr>
    </thead>
    <tbody data-bind="foreach: modelList">
        <tr>
            <td data-bind="text: Name"></td>
            <td data-bind="Date: StartDate"></td>
            <td data-bind="Date: EndDate"></td>
            <td>
                <input type="button" data-bind="click: $root.edit" value="Select" />
            </td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
    var vm = function () {
        var self = this;
        self.Name = ko.observable("");
        self.StartDate = ko.observable("");
        self.EndDate = ko.observable("");
        var model = {
            Name: self.Name,
            StartDate: self.StartDate,
            EndDate: self.EndDate
        }
        self.model = ko.observable();
        self.modelList = ko.observableArray();

        self.loadModel = function () {
            $.getJSON('/Home/LoadModel').done(function (data) {
                self.modelList(data);
            }).fail(function () {
            });
        }
        self.addModel = function () {
            $.ajax({
                url: "/Home/AddModel",
                data: ko.toJSON(model),
                type: 'POST',
                contentType: 'application/json; charset=utf-8'
            }).done(function () {
                self.loadModel();
            });
        }
        self.edit = function (model) {
            self.model(model)
        }
        self.editModel = function () {
            data = self.model;
            $.ajax({
                url: "/Home/AddModel",
                data: ko.toJSON(data),
                type: 'POST',
                contentType: 'application/json; charset=utf-8'
            }).done(function () {
                self.loadModel();
            });
        }
        self.loadModel();
       
    }
   
    ko.applyBindings(new vm);
    ko.bindingHandlers.Date = {
        update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var value = valueAccessor();
            var date = moment(value);
            var strDate = date.format('DD-MM-YYYY');
            if ($(element).is(':input'))
                $(element).val(strDate);
            else
                $(element).text(strDate);
        }
    };
</script>





当我点击选择然后点击编辑开始日期和endDate = 01-01-0001



< img src =http://www.gulfup.com/?nul7ou/>



< img src =http://www.gulfup.com/?rvdEAR/>



怎么样我可以解决这个问题

有人帮我请

i等待答案



when i click on select then click edit start date and endDate = 01-01-0001

<img src="http://www.gulfup.com/?nul7ou" />

<img src="http://www.gulfup.com/?rvdEAR" />

how i can fix this problem
anyone help me please
i am waiting answers

推荐答案

root.edit value = 选择 / >
< / td >
< / tr >
< / tbody >
< / table >

< script 类型 = text / javascript >
var vm = function (){
var self = this ;
self.Name = ko.observable( );
self.StartDate = ko.observable( );
self.EndDate = ko.observable( );
var model = {
名称:self.Name,
StartDate:self.StartDate,
EndDate:self。 EndDate
}
self.model = ko.observable();
self.modelList = ko.observableArray();

self.loadModel = function (){
root.edit" value="Select" /> </td> </tr> </tbody> </table> <script type="text/javascript"> var vm = function () { var self = this; self.Name = ko.observable(""); self.StartDate = ko.observable(""); self.EndDate = ko.observable(""); var model = { Name: self.Name, StartDate: self.StartDate, EndDate: self.EndDate } self.model = ko.observable(); self.modelList = ko.observableArray(); self.loadModel = function () {


.getJSON(' / Home / LoadModel')。done( function (data) {
self.modelList(data);
})。失败( function (){
});
}
self.addModel = function (){
.getJSON('/Home/LoadModel').done(function (data) { self.modelList(data); }).fail(function () { }); } self.addModel = function () {


.ajax({
url: / Home / AddModel
data:ko.toJSON(model),
类型:' POST'
contentType:' application / json; charset = utf-8'
})。done( function (){
self.loadModel();
});
}
self.edit = function (model){
self.model(model)
}
self.editModel = function (){
data = self.model;
.ajax({ url: "/Home/AddModel", data: ko.toJSON(model), type: 'POST', contentType: 'application/json; charset=utf-8' }).done(function () { self.loadModel(); }); } self.edit = function (model) { self.model(model) } self.editModel = function () { data = self.model;


这篇关于问题淘汰js与日期绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆