jQuery + Ajax w ASP.NET MVC

Obsługa Ajax w jQuery dzięki pomocniczym metodom jest niezwykle prosta.
Podstawową metodą jest $.ajax()

Załóżmy, że chcemy wyświetlić klientów, ale dopiero po kliknięciu na przycisk. Dodatkowo nie potrzebujemy aby cała strona została przeładowana, tylko nowe rekordy zostały dodane w interesujące nas miejsce na stronie.

Model:

Code:

    public class ClientModel
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int BirthYear { get; set; }

        public ClientModel(int id, string firstName, string lastName, int birthYear)
        {
            Id = id;
            FirstName = firstName;
            LastName = lastName;
            BirthYear = birthYear;
        }

        public ClientModel()
        {
        }

        public override string ToString()
        {
            return string.Format("Id: {0}, FirstName: {1}, LastName: {2}, BirthYear: {3}", Id, FirstName, LastName, BirthYear);
        }
    }

Kontroler:

Code:

    public class HomeController : Controller
    {
        public List<ClientModel> Clients
        {
            get
            {
                return new List<ClientModel>
                    {
                        new ClientModel(1, "Jacek", "Markowski", 2000),
                        new ClientModel(2, "Marek", "Polkowski", 1988),
                        new ClientModel(3, "Sebastian", "Dunkowski", 1900)
                    };
            }
        }

        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }

        public JsonResult GetPersonList()
        {
            return Json(Clients, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetPersonById(int id)
        {
            var client = Clients.Single(x => x.Id == id);
            return Json(client, JsonRequestBehavior.AllowGet);
        }
    }

HTML:

Code:

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>        
    <div id="PersonList">
    </div>

    <input type="button" value="Pobierz dane" id="przycisk1"/>    
</p>

Do wyrenderowanej strony:

Chcemy, aby po naciśnięciu przycisku Pobierz dane zostały pobrane i wyświetlone rekordy. Możemy tego dokonać za pomocą następującej funkcji:

Code:

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
    <div id="PersonList">
    </div>
    <input type="button" value="Pobierz dane" id="przycisk1" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#przycisk1").click(function () {
                $.ajax({
                    url: '@Url.Action("GetPersonList")',
                    cache: false,
                    dataType: "JSON",
                    success: function (data) {
                        $.each(data, function (i, item) {
                            $("#PersonList").append(item.Id + " " + item.FirstName + " " + item.LastName + "</br>");
                        });
                    }
                });
                return false;
            });
        });
    </script>
</p>

Efekt:

Wysyłanie danych do kontrolera jest tak samo proste jak pobieranie danych. Należy do tego wykorzystać właściwość data, np chcemy pobrać dane użytkownika o id = 2:

Kod:

Code:

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
    <div id="PersonList">
    </div>
    <form method="post" name="formularz">
        <label>Id: </label>
        <input type="text" name="id" id="id"/>
        <input type="button" value="Pobierz dane" id="przycisk1" name="przycisk1" />
    </form>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#przycisk1").click(function() {
                $.ajax({
                    url: '@Url.Action("GetPersonById")',
                    cache: false,
                    dataType: "JSON",
                    data: $("form[name=formularz]").serialize(),
                    success: function(data) {
                        $("#PersonList").append(data.Id + " " + data.FirstName + " " + data.LastName + "</br>");
                    }
                });
                return false;
            });
        });
    </script>
</p>