jQuery对话框中的MVC3数据未回发到服务器

时间:2012-11-01 14:52:44

标签: c# jquery asp.net asp.net-mvc-3

我是MVC3的新手,但我正在编写一个MVC3应用程序需要在jQuery对话框中加载一个DateTime列表,但是当我回发到服务器时,没有发送日期时间列表。

我累了为列表中的每个日期添加隐藏元素,如此

@for (int i = 0; i < Model.ListOfDates.Count; i++)
{
    @Html.HiddenFor(x => x.ListOfDates[i])
}

但是在尝试更改jQuery datepicker中的日期时出现以下错误:

  

Microsoft JScript运行时错误:无法设置属性的值   'currentDay':对象为null或未定义

有人可以告诉我我做错了什么吗?我创建了一个测试应用程序来演示:

模型

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Stupid_Dates_Test.Models
{
    public class Model
    {
        public string StringProperty { get; set; }
        public int IntProperty { get; set; }
        public List<DateTime> ListOfDates { get; set; }
    }
}

控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Stupid_Dates_Test.Models;

namespace Stupid_Dates_Test.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            Model m = new Model();
            m.StringProperty = "This is a string property";
            m.IntProperty = 100;
            m.ListOfDates = new List<DateTime>();
            m.ListOfDates.Add(new DateTime(2012, 11, 1));
            m.ListOfDates.Add(new DateTime(2012, 11, 2));
            m.ListOfDates.Add(new DateTime(2012, 11, 3));
            m.ListOfDates.Add(new DateTime(2012, 11, 4));
            m.ListOfDates.Add(new DateTime(2012, 11, 5));
            return View(m);
        }

        public void Save(Model m)
        {
            // Save Code
        }
    }
}

查看

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

@model Stupid_Dates_Test.Models.Model
<form id="frmMain" action="">
@Html.EditorFor(x => x.StringProperty)
@Html.EditorFor(x => x.IntProperty)

@*@for (int i = 0; i < Model.ListOfDates.Count; i++)
{
    @Html.HiddenFor(x => x.ListOfDates[i])
}*@

<a href="javascript:ShowDates()">Edit List of Dates</a>
<div id="dlgDates" style="display: none;">
    @for (int i = 0; i < Model.ListOfDates.Count; i++)
    {
        @Html.EditorFor(x => x.ListOfDates[i])
    }
</div>
</form>
<script type="text/javascript">
    $(document).ready(function () {
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1;
        var yyyy = today.getFullYear();
        if (dd < 10) { dd = '0' + dd }
        if (mm < 10) { mm = '0' + mm }
        today = mm + '/' + dd + '/' + yyyy;
        $(":input[data-datepicker]").datepicker({ defaultDate: today });
    });

    function ShowDates() {
        $("#dlgDates").dialog({
            autoOpen: true,
            closeOnEscape: false,
            width: 500,
            height: 400,
            resizable: false,
            title: "Dates",
            modal: true,
            draggable: false,
            open: function () {
                $("#dlgDates").show();
            },
            buttons: {
                "Save": function () {
                    $.ajax({
                        type: "POST",
                        url: '/Home/Save/',
                        data: $("#frmMain").serialize(),
                        success: function () {
                            // Save Code
                            alert('Saved successfully!');
                            $('#dlgDates').dialog('destroy');
                        },
                        error: function () {
                            alert('Error');
                        }
                    });
                }
            }
        });
    }
</script>

日期时间编辑器模板

@model System.DateTime
@Html.TextBox("", (Model == null ? "" : Convert.ToDateTime(ViewData.TemplateInfo.FormattedModelValue).ToShortDateString()), new { data_datepicker = true })

1 个答案:

答案 0 :(得分:0)

有几个问题相关: 1)选择器错误。 :input [data-datepicker]选择type =&#34; date-datepicker&#34;作为我的理解。 Html.TextBoxFor呈现类型为&#34; text&#34;的输入,尝试在输入字段中添加一个类,以便您可以使用input.datepck之类的东西来选择它们。

2)当您使用jQuery对话框插件时,日期字段不会被发送到服务器(它们不会显示在http请求中