從MVC控制器傳遞值到javascript代碼

Question

我需要通過MVC控制器中的jsonresult動態地將jQuery/Date/Date數組信息傳遞給Jquery UI Datepicker。

按照以下鏈接，我可以突出顯示datepicker控件中的選定日期。像上面硬編碼的日期 http://jquerybyexample.blogspot.com/2012/05/highlight-specific-dates-in-jquery-ui.html

< 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'); 
    //want to replace the above three lines with code to get dates dynamically 
    //from controller 

    $('#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 , '', '' ]; 
     } 
    } 
}); 

上面的代碼將突出在日曆上控制這些特定的三個日期（的UIDatePicker）。相反...我的挑戰是從控制器動態獲取這些日期並把它傳遞在JavaScript上面的var SelectedDates。

控制器jsonresult代碼：

public JsonResult GetReleasedDates(string Genre) 
{ 

    var relDates = service.GetDates(Genre)//code to get the dates here 

    return Json(relDates, JsonRequestBehavior .AllowGet); 

    //relDates will have the dates needed to pass to the datepicker control. 

} 

感謝您的幫助。

Answer 1

第一種可能性是使用將直接序列化爲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); 
} 

並在視圖：

@model IDictionary<string, DateTime> 

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

     var selectedDates = @Html.Raw(Json.Encode(Model)); 

     $('#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> 

另一種可能性是使用AJAX檢索selectedDates：

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> 

Answer 2

，從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> 

Answer 3

進行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); 

Answer 4

有交換數據庫來自控制器的JavaScript，而不需要進一步的AJAX調用或內聯的JavaScript。 如果您需要每頁上的數據，您可以在過濾器中使用它。

http://jsm.codeplex.com

有了你可以只寫在你的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 , '', '' ]; 
       } 
      } 
     }); 
    } 
}; 

注意：可能必須爲您使用this.AddJavaScriptVariable傳遞的日期創建一個與datepicker兼容的特殊模型。