2014-04-10 50 views
0

該app的Javascript爲只讀: ASP.NET MVC 5應用如何設置輸入字段使用基於當月

表: [ID,僱主,ITONumber,說明,TECNumber,TECVersion,等級,積分,持續時間,部門,狀態,審批,一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月]

需求量的:

套裝使用Javascript根據當前月份編輯Months字段

例如:當前月份是[Apr],那麼只有TABLE中的所有字段應該在Edit Page /窗體上設置爲READONLY。除了[四月]


_layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    @Styles.Render("~/Content/css") 
    @*@Scripts.Render("~/bundles/modernizr")*@ 
    <script type="text/javascript" src="ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> 

</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       @Html.ActionLink("Pipeline Data", "Index", "Home", null, new { @class = "navbar-brand" }) 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li>@Html.ActionLink("Home", "Index", "Home")</li> 
        <li>@Html.ActionLink("About", "About", "Home")</li> 
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
        <li>@Html.ActionLink("Pipeline", "Index", "Pipeline")</li> 
       </ul> 
       @Html.Partial("_LoginPartial") 
      </div> 
     </div> 
    </div> 
    <div class="container body-content"> 
     @RenderBody() 
     <hr /> 
     <footer> 
      <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
     </footer> 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 
</html> 

Edit.cshtml

@model PipelineApp.Models.Pipelinedata 

@{ 
    ViewBag.Title = "Edit"; 
} 

<h2>Edit</h2> 


@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 



    <div class="form-horizontal"> 
     <h4>Pipelinedata</h4> 
     <hr /> 
     @Html.ValidationSummary(true) 
     @Html.HiddenFor(model => model.Id) 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Employer, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Employer)*@ 
       @Html.TextBoxFor(model => model.Employer, new { @readonly = "true" }) 
       @Html.ValidationMessageFor(model => model.Employer) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.ITONumber, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.ITONumber)*@ 
       @Html.TextBoxFor(model => model.ITONumber, new { @readonly = "readonly" }) 
       @Html.ValidationMessageFor(model => model.ITONumber) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Description)*@ 
       @Html.TextBoxFor(model => model.Description, new { @readonly = "readonly" }) 
       @Html.ValidationMessageFor(model => model.Description) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.TECNumber, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.TECNumber)*@ 
       @Html.TextBoxFor(model => model.TECNumber, new { @readonly = "readonly" }) 
       @Html.ValidationMessageFor(model => model.TECNumber) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.TECVersion, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.TECVersion)*@ 
       @Html.TextBoxFor(model => model.TECVersion, new { @readonly = "readonly" }) 
       @Html.ValidationMessageFor(model => model.TECVersion) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Level, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Level)*@ 
       @Html.TextBoxFor(model => model.Level, new { @readonly = "readonly" }) 
       @Html.ValidationMessageFor(model => model.Level) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Credits, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Credits)*@ 
       @Html.TextBoxFor(model => model.Credits, new { @readonly = "readonly" }) 
       @Html.ValidationMessageFor(model => model.Credits) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Duration, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Duration)*@ 
       @Html.TextBoxFor(model => model.Duration, new { @readonly = "readonly" }) 
       @Html.ValidationMessageFor(model => model.Duration) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Sector, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Sector)*@ 
       @Html.TextBoxFor(model => model.Sector) 
       @Html.ValidationMessageFor(model => model.Sector) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Status, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Status)*@ 
       @Html.TextBoxFor(model => model.Status, new { @readonly = "readonly" }) 
       @Html.ValidationMessageFor(model => model.Status) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Approval, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Approval)*@ 
       @Html.TextBoxFor(model => model.Approval, new { @readonly = "readonly" }) 
       @Html.ValidationMessageFor(model => model.Approval) 
      </div> 
     </div> 



     <script type="text/javascript"> 

      //alert("test") 

      $("document").ready(function() { 
       var today = new Date(); 
       var month = today.getMonth() + 1; 

       $('.month').each(function() { 
        if ($(this).attr('id') == month) { 
         $(this).attr("disabled", false); 
         //$(this).removeAttr('readonly'); 

        } else { 
         $(this).attr("disabled", true); 
         //$(this).attr('readonly', 'readonly'); 

        } 
       }); 
      }); 


    </script> 



     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Jan, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Jan)*@ 
       @Html.TextBoxFor(model => model.Jan, new { id = "1", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.Jan) 
      </div> 
     </div> 

     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Feb, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Feb)*@ 
       @Html.TextBoxFor(model => model.Feb, new { id = "2", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.Feb) 
      </div> 
     </div> 

     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Mar, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Mar)*@ 
       @Html.TextBoxFor(model => model.Mar, new { id = "3", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.Mar) 
      </div> 
     </div> 

     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Apr, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Apr)*@ 
       @Html.TextBoxFor(model => model.Apr, new { id = "4", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.Apr) 
      </div> 
     </div> 

     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.May, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.May)*@ 
       @Html.TextBoxFor(model => model.May, new { id = "5", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.May) 
      </div> 
     </div> 

     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Jun, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Jun)*@ 
       @Html.TextBoxFor(model => model.Jun, new { id = "6", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.Jun) 
      </div> 
     </div> 

     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Jul, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Jul)*@ 
       @Html.TextBoxFor(model => model.Jul, new { id = "7", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.Jul) 
      </div> 
     </div> 

     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Aug, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Aug)*@ 
       @Html.TextBoxFor(model => model.Aug, new { id = "8", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.Aug) 
      </div> 
     </div> 

     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Sep, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Sep)*@ 
       @Html.TextBoxFor(model => model.Sep, new { id = "9", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.Sep) 
      </div> 
     </div> 

     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Oct, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Oct)*@ 
       @Html.TextBoxFor(model => model.Oct, new { id = "10", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.Oct) 
      </div> 
     </div> 

     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Nov, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Nov)*@ 
       @Html.TextBoxFor(model => model.Nov, new { id = "11", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.Nov) 
      </div> 
     </div> 

     <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Dec, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Dec)*@ 
       @Html.TextBoxFor(model => model.Dec, new { id = "12", @class = "month" }) 
       @Html.ValidationMessageFor(model => model.Dec) 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Save" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

PipelineController.cs

using System; 
using System.Collections.Generic; 
using System.Data; 
using System.Data.Entity; 
using System.Linq; 
using System.Net; 
using System.Web; 
using System.Web.Mvc; 
using PipelineApp.Models; 

namespace PipelineApp.Controllers 
{ 
    public class PipelineController : Controller 
    { 
     private PipelineEntities db = new PipelineEntities(); 

     //CUSTOM GET: /Pipelinedata/ Sector Filtering/ Sort Order 
     public ActionResult Index(string sector, string sortOrder, int? page) 
     { 
      //Filter Secors ------------------------------ 
      ViewBag.Sector = (from r in db.Pipelinedatas 
           select r.Sector).Distinct(); 

      //--------------------------------------------- 

      var model = from r in db.Pipelinedatas 
         where r.Sector == sector || sector == null || sector == "" 
         select r; 


      //Sort Order ---------------------------------- 
      ViewBag.CurrentSort = sortOrder; //Paging 

      ViewBag.EmployerSortParm = String.IsNullOrEmpty(sortOrder) ? "emp_name" : ""; 
      ViewBag.ITOSortParm = String.IsNullOrEmpty(sortOrder) ? "ITO" : ""; 
      ViewBag.JanSortParm = String.IsNullOrEmpty(sortOrder) ? "January" : ""; 
      ViewBag.FebSortParm = String.IsNullOrEmpty(sortOrder) ? "February" : ""; 
      ViewBag.MarSortParm = String.IsNullOrEmpty(sortOrder) ? "March" : ""; 
      ViewBag.AprSortParm = String.IsNullOrEmpty(sortOrder) ? "April" : ""; 
      ViewBag.MaySortParm = String.IsNullOrEmpty(sortOrder) ? "May" : ""; 
      ViewBag.JunSortParm = String.IsNullOrEmpty(sortOrder) ? "June" : ""; 
      ViewBag.JulSortParm = String.IsNullOrEmpty(sortOrder) ? "July" : ""; 
      ViewBag.AugSortParm = String.IsNullOrEmpty(sortOrder) ? "August" : ""; 
      ViewBag.SepSortParm = String.IsNullOrEmpty(sortOrder) ? "September" : ""; 
      ViewBag.OctSortParm = String.IsNullOrEmpty(sortOrder) ? "October" : ""; 
      ViewBag.NovSortParm = String.IsNullOrEmpty(sortOrder) ? "November" : ""; 
      ViewBag.DecSortParm = String.IsNullOrEmpty(sortOrder) ? "December" : ""; 

      ViewBag.SectorSortParm = sortOrder == "sec" ? "ITO" : "sec"; 

      switch (sortOrder) 
      { 
       case "emp_name": 
        model = model.OrderByDescending(s => s.Employer); 
        break; 
       case "sec": 
        model = model.OrderBy(s => s.Sector); 
        break; 
       case "ITO": 
        model = model.OrderByDescending(s => s.ITONumber); 
        break; 
       case "January": 
        model = model.OrderByDescending(s => s.Jan); 
        break; 
       case "February": 
        model = model.OrderByDescending(s => s.Feb); 
        break; 
       case "March": 
        model = model.OrderByDescending(s => s.Mar); 
        break; 
       case "April": 
        model = model.OrderByDescending(s => s.Apr); 
        break; 
       case "May": 
        model = model.OrderByDescending(s => s.May); 
        break; 
       case "June": 
        model = model.OrderByDescending(s => s.Jun); 
        break; 
       case "July": 
        model = model.OrderByDescending(s => s.Jul); 
        break; 
       case "August": 
        model = model.OrderByDescending(s => s.Aug); 
        break; 
       case "September": 
        model = model.OrderByDescending(s => s.Sep); 
        break; 
       case "October": 
        model = model.OrderByDescending(s => s.Oct); 
        break; 
       case "November": 
        model = model.OrderByDescending(s => s.Nov); 
        break; 
       case "December": 
        model = model.OrderByDescending(s => s.Dec); 
        break; 
       default: 
        model = model.OrderBy(s => s.Id); 
        break; 
      } 
      //--------------------------------------------- 

      //Paging -------------------------------------- 
      //int pageSize = 3; 
      //int pageNumber = (page ?? 1); 
      //return View(model.ToPagedList(pageNumber, pageSize)); 
      //--------------------------------------------- 

      return View(model); 

     } 




     // GET: /Pipeline/Details/5 
     public ActionResult Details(int? id) 
     { 
      if (id == null) 
      { 
       return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
      } 
      Pipelinedata pipelinedata = db.Pipelinedatas.Find(id); 
      if (pipelinedata == null) 
      { 
       return HttpNotFound(); 
      } 
      return View(pipelinedata); 
     } 

     // GET: /Pipeline/Create 
     public ActionResult Create() 
     { 
      return View(); 
     } 

     // POST: /Pipeline/Create 
     // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
     // more details see http://go.microsoft.com/fwlink/?LinkId=317598. 
     [HttpPost] 
     [ValidateAntiForgeryToken] 
     public ActionResult Create([Bind(Include="Id,Employer,ITONumber,Description,TECNumber,TECVersion,Level,Credits,Duration,Sector,Status,Approval,Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec")] Pipelinedata pipelinedata) 
     { 
      if (ModelState.IsValid) 
      { 
       db.Pipelinedatas.Add(pipelinedata); 
       db.SaveChanges(); 
       return RedirectToAction("Index"); 
      } 

      return View(pipelinedata); 
     } 

     // GET: /Pipeline/Edit/5 
     public ActionResult Edit(int? id) 
     { 
      if (id == null) 
      { 
       return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
      } 
      Pipelinedata pipelinedata = db.Pipelinedatas.Find(id); 
      if (pipelinedata == null) 
      { 
       return HttpNotFound(); 
      } 
      return View(pipelinedata); 
     } 

     // POST: /Pipeline/Edit/5 
     // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
     // more details see http://go.microsoft.com/fwlink/?LinkId=317598. 
     [HttpPost] 
     [ValidateAntiForgeryToken] 
     public ActionResult Edit([Bind(Include="Id,Employer,ITONumber,Description,TECNumber,TECVersion,Level,Credits,Duration,Sector,Status,Approval,Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec")] Pipelinedata pipelinedata) 
     { 
      if (ModelState.IsValid) 
      { 
       db.Entry(pipelinedata).State = EntityState.Modified; 
       db.SaveChanges(); 
       return RedirectToAction("Index"); 
      } 
      return View(pipelinedata); 
     } 

     // GET: /Pipeline/Delete/5 
     public ActionResult Delete(int? id) 
     { 
      if (id == null) 
      { 
       return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
      } 
      Pipelinedata pipelinedata = db.Pipelinedatas.Find(id); 
      if (pipelinedata == null) 
      { 
       return HttpNotFound(); 
      } 
      return View(pipelinedata); 
     } 

     // POST: /Pipeline/Delete/5 
     [HttpPost, ActionName("Delete")] 
     [ValidateAntiForgeryToken] 
     public ActionResult DeleteConfirmed(int id) 
     { 
      Pipelinedata pipelinedata = db.Pipelinedatas.Find(id); 
      db.Pipelinedatas.Remove(pipelinedata); 
      db.SaveChanges(); 
      return RedirectToAction("Index"); 
     } 

     protected override void Dispose(bool disposing) 
     { 
      if (disposing) 
      { 
       db.Dispose(); 
      } 
      base.Dispose(disposing); 
     } 
    } 
} 

因爲我是新手,請查看一些關於應該做什麼的適當說明。一如往常的時間認識

+0

,如果你放在CDN然後取出@section腳本{ @ Scripts.Render(「〜/包/ jqueryval「) } –

+0

更新了代碼。 – user3295599

回答

1

這裏是小提琴CLICK 給予ID您所有的幾個月 像1月1日,2月2日... 12月12日 樣品

一月@Html.EditorFor(model => model.Jan,null,new {id="1",@class="month"})

十一月

@Html.EditorFor(model => model.Nov,null,new {id="11",@class="month"}) 

然後,在JavaScript中添加below.This是做

最簡單的方法
$(document).ready(function() { 
var today=new Date(); 
    var month=today.getMonth()+1; 
    $('.month').each(function(){ 
     if($(this).attr('id')==month) 
     { 
    $(this).attr("disabled",false); 
     } 
     else 
     {$(this).attr("disabled",true); 
     } 
    }); 
}); 

如果您使用jQuery 1.5或1.5,然後,而不是使用attr使用prop。但如果你正在使用jQuery 1.6或更高版本,那麼答案應該爲你工作。

+0

顯然,該功能在應用程序中使用時不起作用。 能夠提醒月份變量值,所以JavaScript的作品。 在頭部_layout.cshtml中包含Jquery CDN。將函數放在Edit.cshtml中,該函數在javascript輸入 – user3295599

+0

之前,但不在我的應用程序中。 Javascript似乎並沒有執行。對於爲什麼使用'null'的解釋也會感激不盡。 – user3295599

+0

script> – user3295599

0

試試這個:

查看:

 <div id="" class="form-group"> 
      @Html.LabelFor(model => model.Jan, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @*@Html.TextBoxFor(model => model.Jan)*@ 
       @Html.TextBoxFor(model => model.Jan, new { id = "1", @class = "month", @onload = "checkDate()" }) 
       @Html.ValidationMessageFor(model => model.Jan) 
      </div> 
     </div> 

的Javascript:

function checkDate(){ 
    var today=new Date(); 
    var month=today.getMonth()+1; 
    $('.month').each(function(){ 
    if($(this).attr('id')==month) 
    { 
     $(this).prop("disabled",false); 
    } 
    else 
    { 
     $(this).prop("disabled",true); 
    } 
} 
相關問題