Asp.net MVC AJAX - How to access data by using AJAX?

问题

Case: My application contains following modules

• Clients
• projects
• Business Contact etc

Code of Clients Module

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._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}")
    {
        this.ErrorMessage = "Provide a valid email address";
    }
}}

Views/Shared/clients/Index.cshtml contains following...

@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() is to create new div[named addNewCat] on click of image inside div

Code of Clients Control...

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());
    }}}

Hello frnds please help m to solve this problem by MVC AJAX

Detail explanation of Question

*v have a div (id=clients) which displays clients list(images or logo's). if web user click on image then it should create a new div(id=addNewcat)........(This much is working perfectly)

BUt now ??? on this newly created div(id=addNewcat) i want to display projects of selected client.

Thanx in advance....:)

回答1:

Create an AJAX method which goes to a controller method returning a partial view. In the AJAX callback function you set the content of your div to the result, something along the lines of:

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

来源：https://stackoverflow.com/questions/14752185/asp-net-mvc-ajax-how-to-access-data-by-using-ajax