单击按钮时显示文本

时间:2013-04-18 12:59:31

标签: asp.net asp.net-mvc-3 knockout.js orchardcms-1.6 knockout-mvc

创建我的第一个ASP.NET MVC Knockout MVC。

我添加了一个模型设置3个日期。控制器分配3个日期。然后使用视图在屏幕上显示它们:

<p>First Date: @ko.Html.TextBox(m => m.FirstDate)</p>
<p>Second Date: @ko.Html.TextBox(m => m.SecondDate)</p>
<p>Third Date: @ko.Html.TextBox(m => m.ThirdDate)</p>

@ko.Apply(Model)

@ ko.Apply(Model)是显示3个日期的主要部分。 我试图仅显示单击按钮时的3个日期,因此iv将代码放在表单中并使用按钮:

<form id="displaydates" method="post" >
<p>First Date: @ko.Html.TextBox(m => m.FirstDate)</p>
<p>Second Date: @ko.Html.TextBox(m => m.SecondDate)</p>
<p>Third Date: @ko.Html.TextBox(m => m.ThirdDate)</p>

<input id="btn" type="button" value="click" @ko.Apply(Model) />
</form>

如果问题不再在文本框中显示日期,它们会在按钮旁边显示。 recpa:我希望每个日期在单击按钮时出现在文本框内(而不是在页面加载时按钮旁边 - 这就是atm发生的事情)。

有什么想法吗? enter image description here

更新尝试添加按钮,但现在日期根本不显示,即使单击按钮也是如此。

查看:

@using PerpetuumSoft.Knockout
@model KnockOutMVC3Dates.Models.DatesModel       
@{
  var ko = Html.CreateKnockoutContext();
}

<p>First Date: @ko.Html.TextBox(m => m.FirstDate)</p>
<p>Second Date: @ko.Html.TextBox(m => m.SecondDate)</p>
<p>Third Date: @ko.Html.TextBox(m => m.ThirdDate)</p>

@ko.Html.Button("Display","Index","Dates",null,null)

日期控制器:

   public ActionResult Index()
        {
            return View
                (   new DatesModel
                    {
                        FirstDate = DateTime.Now,

                        SecondDate = DateTime.Now.AddYears(1).AddMonths(1),
                        ThirdDate = DateTime.Now.AddYears(2).AddMonths(2)
                    }
                );

        }

型号:

  public class DatesModel
{
    public DateTime FirstDate { get; set; }
    public DateTime SecondDate { get; set; }
    public DateTime ThirdDate { get; set; }
}

欢迎任何帮助或想法?

2 个答案:

答案 0 :(得分:0)

也许你想要这样的东西?

<input id="btn" type="button" value="click" onclick="@(ko.Apply(Model))" />

我对Knockout JS并不是特别熟悉,但似乎ko.Apply(Model)的返回值是一堆JS来填充你的字段。如果你想点击你的按钮运行它,你会想要上面的。现在,你正在向你的输入标签写出一大堆JS,这只是破坏。

答案 1 :(得分:0)

输入标签可以在这里使用 的 在onclick事件上你也可以给出模型的名称 试试这个......