ASP.NET MVC 4 View ( Razor ) + AjaxHelper – ActionLink + Partial View ( Parameter ) 使用方法 II

 
ASP.NET MVC 4 View ( Razor ) + AjaxHelper – ActionLink + Partial View ( Parameter ) 使用方法 II
 

   web.config
 
   <configuration>
 
      … …
 
      <appSettings>
         … …
         <add key="UnobtrusiveJavaScriptEnabled" value="true" />
      </appSettings>
 
      … …
 
   </configuration>
 
   App_Start\BundleConfig.cs
 
   bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js", "~/Scripts/jquery.unobtrusive-ajax.js"));
 
   Controller
 
   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
 
   namespace MvcApplication.Controllers
   {
      public class HomeController : Controller
      {
 
         BITestEntities entity;
 
         public ActionResult ProductItem(int? id)
         {
 
            entity = new BITestEntities();
 
            if (id.HasValue)
            {
               var DataModel = entity.ProductEntities.Where(r => r.id == id).FirstOrDefault();
               if (DataModel == null) DataModel = this.getDefaultNullValue();
               return PartialView(DataModel);
            }
            else
            {
               var DataModel = entity.ProductEntities.Where(r => r.id == 0).FirstOrDefault();
               if (DataModel == null) DataModel = this.getDefaultNullValue();
               return PartialView(DataModel);
            }
 
         }
 
         … …
 
      }
   }
 
   View
 
   <table cellpadding="10" cellspacing="0">
 
      @foreach (var product in Model)
      {
         <tr>
 
            <td><span>
               @Ajax.ActionLink("Show Detail", "ProductItem", new { id = product.id.ToString() }, new AjaxOptions { UpdateTargetId = "Detail" })
            </span></td>
 
            … …
 
            <td><span>
               @product.cat
            </span></td>
 
            <td><span>
               @product.subcat
            </span></td>
 
            <td><span>
               @product.model
            </span></td>
 
            <td><span>
               @product.price
            </span></td>
 
         </tr>
      }
 
   </table>
 
   <div id="Detail"></div>
 
   Partial AJAX View
 
   <table width="100%" cellpadding="0" cellspacing="0">
 
      <tr>
         <td><span>ID : </span></td>
         <td><span>@Model.id</span></td>
      </tr>
 
      <tr>
         <td><span>Category : </span></td>
         <td><span>@Model.cat</span></td>
      </tr>
 
      <tr>
         <td><span>Sub Category : </span></td>
         <td><span>@Model.subcat</span></td>
      </tr>
 
      <tr>
         <td><span>Model : </span></td>
         <td><span>@Model.model</span></td>
      </tr>
 
      <tr>
         <td><span>Price : </span></td>
         <td><span>$@Model.price</span></td>
      </tr>
 
   </table>