ASP.NET MVC Colorbox簡單一實例示範

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

第一，在ResumeController中添加兩個Action，如下面的代碼：

   
  
   
     代碼如下
    複製代碼 
    
   
    //// GET: /Resume/Edit/5public ActionResult Edit(int id){    Resume.Models.Resume resume = context.Resumes.Find(id);    ViewBag.NationId = new SelectList(context.Nations, "NationId", "Name", resume.NationId);    return View(resume);}//// POST: /Resume/Edit/5[HttpPost]public ActionResult Edit(Resume.Models.Resume resume){    if (ModelState.IsValid)    {        context.Entry(resume).State = EntityState.Modified;        context.SaveChanges();        return RedirectToAction("Index");    }    return View(resume);} 
   
  
 
第二，建立Edit.cshtml，跟建立Create.cshtml一樣，選擇Empty。

第三，在Index.cshtml中添加如下代碼：

   
  
   
     代碼如下
    複製代碼 
    
   
    $("a[rel='editResume']").click(function () {    $(this).colorbox({        width: 1000,        heigth: 500,        overlayClose: false,        close: "",        onComplete: function () {            $("#btnCancel").click(function () {                $.colorbox.close();            });        },        onClosed: function () {            $.colorbox.remove();        }    });}); 
   
  
 
第四，運行效果：

簡曆的詳細資料

第一，添加Action。

   
  
   
     代碼如下
    複製代碼 
    
   
    //// GET: /Resume/Details/5public ActionResult Details(int id){    Resume.Models.Resume resume = context.Resumes.Find(id);    return View(resume);} 
   
  
 
第二，建立Details.cshtml，同上。

第三，運行效果：

簡曆的刪除

第一，添加Action。

   
  
   
     代碼如下
    複製代碼 
    
   
    public ActionResult Delete(int id){    Resume.Models.Resume resume = context.Resumes.Find(id);    context.Resumes.Remove(resume);    context.SaveChanges();    return RedirectToAction("Index");} 
   
  
 
建立Action就可以了。

第二，運行效果：

添加工作經曆

上面幾個功能都很簡單，這個功能也不困難，

首先，還是從添加Action開始。

   
  
   
     代碼如下
    複製代碼 
    
   
    public ViewResult AddExper(int id){    ViewBag.ExpersById = context.Experiences.Where(e => e.ResumeId == id);    return View();}[HttpPost]public ActionResult AddExper(Resume.Models.Experience exper){    if (ModelState.IsValid)    {        exper.ResumeId = Convert.ToInt32(RouteData.Values["id"]);        context.Experiences.Add(exper);        context.SaveChanges();        return RedirectToAction("Index");    }    return View(exper);} 
   
  
 
第二，建立AddExper.cshtml，代碼如下：

   
  
   
     代碼如下
    複製代碼 
    
   
    <body>    @using (Html.BeginForm())    {            <table>            <tr>                <th>                    開始時間                </th>                <th>                    結束時間                </th>                <th>                    工作單位                </th>                <th>                    證明人                </th>            </tr>            @foreach (var item in ViewBag.ExpersById)            {                <tr>                    <td>                        @item.StartTime.ToString("yyyy-MM-dd")                    </td>                    <td>                        @item.EndTime.ToString("yyyy-MM-dd")                    </td>                    <td>                        @item.WorkUnit                    </td>                    <td>                        @item.Voucher                    </td>                </tr>            }            <tr>                <td>                    @Html.EditorFor(e => e.StartTime)                    @Html.ValidationMessageFor(e => e.StartTime)                </td>                <td>                    @Html.EditorFor(e => e.EndTime)                    @Html.ValidationMessageFor(e => e.EndTime)                </td>                <td>                    @Html.EditorFor(e => e.WorkUnit)                    @Html.ValidationMessageFor(e => e.WorkUnit)                </td>                <td>                    @Html.EditorFor(e => e.Voucher)                    @Html.ValidationMessageFor(e => e.Voucher)                </td>            </tr>        </table>        <p style="text-align: center;">            <input type="submit" value="添加" /><input type="button" id="btnCancel" value="取消" /></p>}</body> 
   
  
 
第三，在Index.cshtml中添加如下代碼：

   
  
   
     代碼如下
    複製代碼 
    
   
    $("a[rel='addExper']").click(function () { $(this).colorbox({ width: 950, overlayClose: false, close: "", onComplete: function () {
$("#StartTime,#EndTime").datepicker({
changeMonth: true, changeYear: true,
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
dateFormat: 'yy-mm-dd', yearRange: 'c-50:c+50', showMonthAfterYear: true });
$("#btnCancel").click(function () { $.colorbox.close(); }); }, onClosed: function ()
{ $.colorbox.remove(); } }); });

第四，看一下啟動並執行效果吧：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

代碼如下	複製代碼
//// GET: /Resume/Details/5public ActionResult Details(int id){ Resume.Models.Resume resume = context.Resumes.Find(id); return View(resume);}

代碼如下	複製代碼
public ActionResult Delete(int id){ Resume.Models.Resume resume = context.Resumes.Find(id); context.Resumes.Remove(resume); context.SaveChanges(); return RedirectToAction("Index");}

ASP.NET MVC Colorbox簡單一實例示範

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support