Tuesday, March 18, 2014

Load MVC view to jquery color box

 

You can use the following set of code to load a MVC view to a jquery color box.

You can get more details on jquery colobox here.

HTML code

  1. <table cellpadding="0" cellspacing="0" border="0" class="display" id="ClientConfigurationList" style="width: 100%" >
  2.         <thead>
  3.             <tr>
  4.                              
  5.                 <th>Work Order No</th>
  6.                 <th>Work Order Status</th>
  7.                 <th>Created On</th>
  8.                 <th>Completed On</th>
  9.                 <th>Asset Description</th>
  10.             </tr>
  11.         </thead>
  12.         <tbody>
  13.             @foreach (var item in Model)
  14.             {
  15.                 <tr class="leftAlign">
  16.                                     
  17.                     <td>
  18.                            <a href="#DIV_WorkOrderDetailsContent"  onclick="new WorkOrderManagement().ViewWorkOrderDetails(@item.Id)" class="colorbox">@Html.DisplayFor(modelItem => item.WorkOrderNo)</a>
  19.                     </td>
  20.                     <td class="leftAlign">
  21.                         @Html.DisplayFor(modelItem => item.WorkOrderStatus)
  22.                     </td>
  23.                     <td>
  24.                         @Html.DisplayFor(modelItem => item.CreatedOn)
  25.                     </td>
  26.                     <td>
  27.                         @Html.DisplayFor(modelItem => item.CompletedOn)
  28.                     </td>
  29.                     <td>
  30.                         @Html.DisplayFor(modelItem => item.AssetDescription)
  31.                     </td>
  32.                 </tr>
  33.             }
  34.         </tbody>
  35.     </table>

 

Javascript Code

  1. this.ViewWorkOrderDetails = function (workOrderId) {
  2.     debugger;
  3.     $('#DIV_WorkOrderDetailsContent').html($("#DIV_WorkOrderDetailsLoadingMessage").html());
  4.     $('#DIV_WorkOrderDetailsContent').load("/Workorder/WorkOrderDetails?workOrderId=" + workOrderId, new function () { });
  5.  
  6.     $('.colorbox').colorbox({ inline: true, height: "80%", width: "50%" });
  7.  
  8. };

Happy Coding !!!!!!!!

2 comments :

  1. Replies
    1. hey ping me on 8050986500 whtsapp i feel u can help me lot.. ur knowledge is useful for others..if u feel shy and having problm in whtsapp then contact me on gmail..nitingupta050@gmail.com

      Delete