2013-02-07 49 views
0

案例:我的應用程序包含以下幾個模塊Asp.net MVC AJAX - 如何使用AJAX訪問數據?

  • 客戶
  • 項目
  • 業務聯繫等

客戶端模塊代碼

using System; 
using System.Collections.Generic; 
using System.ComponentModel.DataAnnotations; 
using System.ComponentModel.DataAnnotations.Schema; 
using System.Linq; 
using System.Web; 
namespace eCms.Models 
{ 
public class Client 
{ 
    public int ClientId { get; set; } 
    public int? AddressId { get; set; } 
    public int? ImageFileId { get; set; } 

    [StringLength(1000)] 
    [Required(ErrorMessage = "Company Name is required")] 
    [Display(Name = "Company Name")] 
    public string CompanyName { get; set; } 

    [Display(Name = "Contact Number")] 
    [StringLength(20)] 
    public string ContactNumber { get; set; } 

    [Display(Name = "Email")] 
    [StringLength(100)] 
    [DataType(DataType.EmailAddress)] 
    [Email] 
    public string Email { get; set; } 

    [StringLength(260)] 
    [DataType(DataType.Url)] 
    [Display(Name = "Website")]  public string Website { get; set; } 

    [Display(Name = "Show this client on website")] 
    public bool IsPublic { get; set; } 

    #region <<relations>> 

    [ForeignKey("AddressId")] 
    public virtual Address Address { get; set; } 

    [ForeignKey("ImageFileId")] 
    public virtual ImageFile ImageFile { get; set; } 

    #endregion 
} 

public class EmailAttribute : RegularExpressionAttribute 
{ 
    public EmailAttribute() 
     : base(@"[a-zA-Z0-9._%+-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,}") 
    { 
     this.ErrorMessage = "Provide a valid email address"; 
    } 
}} 

查看/共享/客戶/ Index.cshtml包含以下...

@model IEnumerable<eCms.Models.Client> 
@using eCms.Models; 
@{ 
ViewBag.Title = "Index"; 
eCmsContext db = new eCmsContext();} 
<script type="text/javascript" lang="javascript"> 
function togglesDiv() { 
    var catdiv = document.getElementById("addNewCat"); 
    catdiv.style.display = "none"; 
    if (catdiv.style.display == "") { 
     catdiv.style.display = "none"; 
    } 
    else { 
     catdiv.style.display = ""; 
    } 
} 
</script> 
<script type="text/javascript" lang="javascript"> 
function togglesDivClose() { 
    var catdiv = document.getElementById("addNewCat"); 
     catdiv.style.display = "none"; 
}</script> 
<section class="featured"> 
<div id="addNewCat" style="display: none; height: 800px; background: #777cdc; padding: 110px"> 
<div style="float: right"> 
<a href="#CLIENTS"><span onclick="togglesDivClose();" style="background: #777cdc;"> 
<img width="30" height="30" src="~/back.png" /></span></a> 
</div> 
<div style="float: left"> 
@foreach (var item in db.Clients.ToList()){ 
<a href="#ClientD"><span onclick="togglesDiv()"> 
@* HERe -i want to display projects of selected client in div[named clints] */ 
</a>}  
</div> 
</div> 
<a name="ClientD"></a> 
</section> 
<div id="clients" style="padding: 5px; border: solid 1px #ff6a00; height: 800px; width: 970px; margin: 10px"> 
@foreach (var item in db.Clients.ToList()) 
{ 
<a href="#ClientD"><span onclick="togglesDiv()&GetID()" > 
<img src="http://xyz.com/uploads/images/small/@Html.DisplayFor(clientItem => item.ImageFile.FileName)" width="150" height="150" /></span></a> 
} 

- togglediv()是創建新的div [命名addNewCat]裏面的div

的代碼圖像的點擊客戶控制...

using System; 
using System.Collections.Generic; 
using System.Data; 
using System.Data.Entity; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using eCms.Models; 
namespace MidasNext.Controllers 
{ 
public class ClientsController : Controller 
{ 
    private eCmsContext db = new eCmsContext(); 

    // 
    // GET: /Clients/ 

    public ActionResult Index() 
    { 
     var clients = db.Clients.Include(c => c.Address).Include(c => c.ImageFile); 
     return View(clients.ToList()); 
    }}} 

你好 frnds我請大家幫忙米乘MVC AJAX問題的

詳細解釋

* V有一個div(ID =客戶端),顯示客戶端列表(圖像或標誌的)來解決這個問題。 如果網頁用戶點擊圖片,那麼它應該創建一個新的div(id = addNewcat)........(這個工作很完美)

BUt now ???在這個新創建的div(id = addNewcat)我想顯示選定客戶端的項目。

Thanx提前.... :)

回答

0

創建AJAX方法,該方法前進到控制器的方法返回的局部視圖。在AJAX回調函數中,您將div的內容設置爲結果,如下所示:

$.get('/controller/method', { ID: ID }, 
      function (result) {     
       $('#yourDiv').html(result); 
      });