Asp.netMVC如何實現(xiàn)scheduler-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“Asp.net MVC如何實現(xiàn)scheduler”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Asp.net MVC如何實現(xiàn)scheduler”這篇文章吧。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比武平網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式武平網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋武平地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

Asp.net MVC scheduler的實現(xiàn)方法詳解

本例使用了fullcalendar js ： https://fullcalendar.io/

1. view ：


@{ 
  ViewBag.Title = "Index"; 
  Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
 
 
 
 
@section PageContent{ 
  <style> 
    .modal-backdrop { 
      z-index: 9; 
    } 
  </style> 
  <div class="container"> 
 
 
    <div id='calendar'> 
 
 
    </div> 
  </div> 
 
 
 
 
  <!--Select Staff--> 
  <div class="container"> 
    <!-- Trigger the modal with a button --> 
    <button type="button" id="btnSelectStaff" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" ></button> 
 
 
    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog" > 
      <div class="modal-dialog modal-lg"> 
        <br /><br /><br /> 
        <!-- Modal content--> 
        <div class="modal-content"> 
         @using (Html.BeginForm("AssignTask", "PMPlan", FormMethod.Post, new { @class="form-horizontal", role="form"} )) 
        { 
 
 
            <div class="modal-header"> 
              <button type="button" class="close" data-dismiss="modal">×</button> 
              <h5 class="modal-title">Create PM Task</h5> 
            </div> 
            <div class="modal-body"> 
              <div class="row"> 
                <label class="col-md-2 control-label">your field1</label> 
                <div class="col-md-4"> 
                  field1 
                </div> 
                <label class="col-md-2 control-label">field2</label> 
                <div class="col-md-4"> 
                  <div class="input-icon left"> 
field2 
                  </div> 
                </div> 
              </div> 
              <br/> 
              <div class="row"> 
               ... more rows of fields 
              </div> 
               
              
 
 
            </div> 
            <div class="modal-footer"> 
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
              <button type="submit" class="btn btn-primary">Submit</button> 
            </div> 
          } 
        </div> 
 
 
      </div> 
    </div> 
 
 
  </div> 
 
 
} 
 
 
@section scripts{ 
  <link href="~/assets3/global/plugins/fullcalendar/fullcalendar.css" rel="external nofollow" rel="stylesheet" /> 
  <script src="~/assets3/global/plugins/fullcalendar/fullcalendar.js"></script> 
 
 
 
 
  <script> 
 
 
    $.get("JsonURL", function (data) { 
 
 
      console.log(JSON.stringify(data)); 
      $('#calendar').fullCalendar({ 
        header: { 
          left: 'prev,next today', 
          center: 'title', 
          right: 'month,basicWeek,basicDay' 
        }, 
        navLinks: false, // can click day/week names to navigate views 
        editable: false, 
        eventLimit: false, // allow "more" link when too many events 
        events: data, 
        dayClick: function () { 
          var dt = $(this).attr("data-date"); 
          $("#hdnAssignedDate").val(dt); 
          //// pop up modal  
          $("#btnSelectStaff").click(); 
        } 
      }); 
    }); 
 
 
 
 
  </script> 
}

2. Web api controller :


... 
 
 
 public ActionResult GetJsonData() 
    { 
      ... 
      var tasks = //...logic of getting tasks 
    ... 
 
 
      var jsonObjs = tasks.Select(x => new FullCalendaRecord() 
      { 
        title = x.Subject, 
        url = "the url", 
        start = ..., 
        end = x.TargetDate.Value.ToString("yyyy-MM-dd"), 
      }).ToList(); 
 
 
      return Json(jsonObjs, JsonRequestBehavior.AllowGet); 
    } 
 
 
    public class FullCalendaRecord 
    { 
      // sample data: 
      //[ 
      //{ 
      //  title: 'Click for Google', 
      //  url: 'http://google.com/', 
      //  start: '2017-09-28', 
      //  end:'2017-09-28' 
      //} 
      //] 
 
 
      public string title { get; set; } 
      public string url { get; set; } 
      public string start { get; set; } 
      public string end { get; set; } 
    } 
 
 
...

以上是“Asp.net MVC如何實現(xiàn)scheduler”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：Asp.netMVC如何實現(xiàn)scheduler-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://muchs.cn/article18/cosggp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站制作、品牌網(wǎng)站制作、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)