将值从MVC控制器传递到javascript代码

我需要通过MVC控制器中的jsonresult动态地将日期信息的list/json/array传递给jQueryUIDatePicker

通过下面的链接，我可以突出显示datepicker控件中的选定日期。

感谢您的帮助。

拨打ajax电话：

<script type ="text/javascript">
    $(document).ready( function () {

    var SelectedDates = {};
    //SelectedDates[ new Date('05/28/2012' )] = new Date( '05/28/2012' );
    //SelectedDates[ new Date('05/29/2012' )] = new Date( '05/29/2012' );
    //SelectedDates[ new Date('05/30/2012' )] = new Date( '05/30/2012' );

    $.ajax({
        url:'url'
        ,data:{}
        ,type:'get'
        ,success:function(data) {

        for(var i = 0, i < data.length; i++) {
            SelectedDates.push(new Date(data[i]));
        }

        $( '#releasedate' ).datepicker({
            dateFormat: "mm/dd/yy" ,
            numberOfMonths: 3,
            duration: "fast" ,           
            minDate: new Date(),
            maxDate: "+90" ,
            beforeShowDay: function (date) {
            var Highlight = SelectedDates[date];
                if (Highlight) {
                    return [true , "Highlighted", Highlight];
                }
                else {
                    return [true , '', '' ];
                }
            }
        });
    });
});
</script>

$（文档）.ready（函数（）{
var SelectedDates={}；
//选定日期[新日期（'05/28/2012'）]=新日期（'05/28/2012'）；
//选定日期[新日期（'05/29/2012'）]=新日期（'05/29/2012'）；
//选定日期[新日期（'05/30/2012'）]=新日期（'05/30/2012'）；
$.ajax({
url:'url'
，数据：{}
，类型：'get'
，成功：函数（数据）{
对于（变量i=0，i

进行ajax调用以获取日期。ajax请求成功后，使用结果配置数据采集器

var configureDatePickers = function(dates){
    //setup datepicker in here...
};
$.get('url to get dates', {Genre: smoething}).success(configureDatePickers);

另一个建议。默认的json序列化程序不能很好地处理datetime对象。因此，我建议在序列化之前将日期作为字符串返回。示例：

var dates = Data.GetDates(genre).Select(x=>x.ToString("MM-dd-yyyy")).ToArray();
return Json(dates);

---

第一种可能是使用将直接序列化为JSON的模型：

public ActionResult Index()
{
    // TODO: obviously those will come from your service layer
    var selectedDates = new Dictionary<string, DateTime> 
    { 
        { new DateTime(2012, 5, 28).ToString("yyyy-M-dd"), new DateTime(2012, 5, 28) },
        { new DateTime(2012, 5, 29).ToString("yyyy-M-dd"), new DateTime(2012, 5, 29) },
        { new DateTime(2012, 5, 30).ToString("yyyy-M-dd"), new DateTime(2012, 5, 30) },
    };
    return View(selectedDates);
}

然后：

<script type ="text/javascript">
    $(document).ready(function () {
        $.getJSON('@Url.Action("GetSelectedDates")', function(selectedDates) {
            // Only inside the success callback of the AJAX request you have
            // the selected dates returned by the server, so it is only here
            // that you could wire up your date picker:
            $('#releasedate').datepicker({
                dateFormat: "mm/dd/yy",
                numberOfMonths: 3,
                duration: "fast",
                minDate: new Date(),
                maxDate: "+90",
                beforeShowDay: function (date) {
                    var key = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                    var highlight = selectedDates[key];
                    if (highlight) {
                        return [true, "Highlighted", highlight];
                    }
                    else {
                        return [true, '', ''];
                    }
                }
            });
        });
    });
</script>

$（文档）.ready（函数（）{
$.getJSON（'@Url.Action（“GetSelectedDates”）、函数（selectedDates）{
//仅在AJAX请求的成功回调内
//服务器返回的选定日期，因此仅在此处
//你可以把你的约会挑选器连接起来：
$（“#releasedate”）.datepicker({
日期格式：“mm/dd/yy”，
月数：3，
持续时间：“快”，
minDate:新日期（），
maxDate:“+90”，
beforeShowDay:功能（日期）{
var key=date.getFullYear（）+'-'+（date.getMonth（）+1）+'-'+date.getDate（）；
var highlight=所选日期[键]；
如果（突出显示）{
返回[真，“突出显示”，突出显示]；
}
否则{
返回[真]，''；
}
}
});
});
});

有一个库，可以将数据从控制器交换到javascript，而无需进一步的ajax调用或内联javascript。 如果您需要每个页面上的数据，您可以在过滤器中使用它

使用该库，您可以在MVC控制器操作中编写以下代码：

// Add the dates as objects to javascript - The object should only contain data
// which should be exposed to the public.
this.AddJavaScriptVariable("DatePickerController.Dates", service.GetDates(Genre));
// Execute the initialization function when the DOM has been loaded
// The function can be in a javascript file
this.AddJavaScriptFunction("DatePickerController.Ready");

您的javascript文件可能如下所示：

var DatePickerController = {
    Dates: null,
    Ready: function() {
        $("#releasedate").datepicker({
            dateFormat: "mm/dd/yy" ,
            numberOfMonths: 3,
            duration: "fast" ,           
            minDate: new Date(),
            maxDate: "+90" ,
            beforeShowDay: function (date) {
                var Highlight = DatePickerController.Dates[date];
                if (Highlight) {
                    return [true , "Highlighted", Highlight];
                }
                else {
                    return [true , '', '' ];
                }
            }
        });
    }
};

---

注意：您可能需要为使用此.AddJavaScriptVariable传递的日期创建一个特殊的模型，该变量与日期选择器兼容。

我还没有做任何事情..但是。我知道我有来自控制器的日期，我有uidatepicker代码…我以前做过ajax调用，将值从ui传递给控制器..现在我想要从控制器到ui的另一种方式ui将始终必须拉动控制器。这就是http今天的工作方式。进行这些更改后（ajax方法）…我再也无法在单击时弹出日历控件…uidatepicker没有显示代码对我有效，我已经测试了这两种情况。您的代码的其他部分肯定存在其他问题。是否出现javascript错误？是否发送了AJAX请求？是否在检查AJAX时命中了控制器操作FireBug中的请求您看到了什么？在控制台中我有一个网络错误500..localhost/../../..@url.Action（%22GetSelectedDates%22）当您展开请求时，您可以看到有关发送的确切请求、响应以及错误的更多详细信息。为什么在最终Url中有

@Url.Action

？您不是在使用Razor吗？这是在单独的javascript文件中吗？如果是在单独的javascript文件中，您显然无法使用服务器端帮助程序。

public ActionResult Index()
{
    return View();
}

public ActionResult GetSelectedDates()
{
    // TODO: obviously those will come from your service layer
    var selectedDates = new Dictionary<string, DateTime> 
    { 
        { new DateTime(2012, 5, 28).ToString("yyyy-M-dd"), new DateTime(2012, 5, 28) },
        { new DateTime(2012, 5, 29).ToString("yyyy-M-dd"), new DateTime(2012, 5, 29) },
        { new DateTime(2012, 5, 30).ToString("yyyy-M-dd"), new DateTime(2012, 5, 30) },
    };
    return Json(selectedDates, JsonRequestBehavior.AllowGet);
}

<script type ="text/javascript">
    $(document).ready(function () {
        $.getJSON('@Url.Action("GetSelectedDates")', function(selectedDates) {
            // Only inside the success callback of the AJAX request you have
            // the selected dates returned by the server, so it is only here
            // that you could wire up your date picker:
            $('#releasedate').datepicker({
                dateFormat: "mm/dd/yy",
                numberOfMonths: 3,
                duration: "fast",
                minDate: new Date(),
                maxDate: "+90",
                beforeShowDay: function (date) {
                    var key = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                    var highlight = selectedDates[key];
                    if (highlight) {
                        return [true, "Highlighted", highlight];
                    }
                    else {
                        return [true, '', ''];
                    }
                }
            });
        });
    });
</script>

// Add the dates as objects to javascript - The object should only contain data
// which should be exposed to the public.
this.AddJavaScriptVariable("DatePickerController.Dates", service.GetDates(Genre));
// Execute the initialization function when the DOM has been loaded
// The function can be in a javascript file
this.AddJavaScriptFunction("DatePickerController.Ready");

var DatePickerController = {
    Dates: null,
    Ready: function() {
        $("#releasedate").datepicker({
            dateFormat: "mm/dd/yy" ,
            numberOfMonths: 3,
            duration: "fast" ,           
            minDate: new Date(),
            maxDate: "+90" ,
            beforeShowDay: function (date) {
                var Highlight = DatePickerController.Dates[date];
                if (Highlight) {
                    return [true , "Highlighted", Highlight];
                }
                else {
                    return [true , '', '' ];
                }
            }
        });
    }
};