Sunday, July 13, 2014

Step by step how to get data via Ajax using jQuery, an Action method and a PartialView

        By Carmel Schvartzman

In this tutorial we'll learn how to get data via Ajax using jQuery, an Action method and a PartialView in Asp.Net MVC.

The data for this application will be stored in an XML file, and on clicking a button, an Ajax request will be send from the  jQuery function $.get () , to the web server. This latter will handle the HTTP-GET request inside an Action method, which in turn will respond sending the contents of a PartialView as HTML string, which will be displayed in the View as follows :




The XML file is the following:

<?xml version="1.0" encoding="utf-8" ?><notes>  <note>    <to>Fry</to>    <from>Leela</from>    <heading>Reminder</heading>    <body>Don't forget me this weekend!</body>  </note>  <note>    <to>Leela</to>    <from>Fry</from>    <heading>Finally!!!</heading>    <body>Leela, finally you accept to have a date with me!</body>  </note>  <note>    <to>Fry</to>    <from>Leela</from>    <heading>Rejection</heading>    <body>You know what? In second thoughts, i'll go out with someone else...</body>  </note></notes>

First we'll need a Controller to handle the Ajax requests, so build it with the code:

public class NotesController : Controller    {                public ActionResult Index()        {            return View();        }
Next add a View to display just a button and a placeholder for the Ajax request results :

@{    ViewBag.Title = "Index";}
<h3>Using the jQuery $.get() requesting data from an MVC Action method</h3><div class="container">    <div id="results"></div>    <button  id="btn-action">Get data from Action method via Ajax</button>

</div><script src="~/Scripts/Notes.js"></script>

Just check - and fix it if it's necessary - that you feed this View with all the proper scripts and stylesheets coming through the _Layout page :


Then add the following CSS3 , to get the style of the web page :

.container {    width: 80%;    background: #eee;    margin: 20px auto;    padding: 30px;    border: 1px solid #ccc;    border-radius: 10px;    box-shadow: 10px 10px 1px #c0c0c0;    transition: all 3s ease-out 0.5s;    text-align: center;}.note {    width: 33%;    background: #ddd;    margin: 20px auto;    padding: 30px;    border: 1px solid #eaeaea;    border-radius: 10px;    box-shadow: 10px 10px 1px #c0c0c0;    transition: all 3s ease-out 0.5s;    text-align: center;}.note:hover {    -webkit-transform: rotate(-1deg) scale(1.1,1.1);}button {    border-radius:10px;}

That will give you the proper style for the page.
Now for the script, when the button is clicked, we send an Ajax request to the web server :

$(function () {    $("button[id$=action]")      .button()      .click(function (event) {          event.preventDefault();           $.get("/Notes/GetAllNotes", null, function (res) {
              $("#results").html(res);
         
});      });});

First we code event.preventDefault() for the button to unbind any behavior like "submit" or another onclick handler that could be defined.
Then we send an HTTP-GET request to the server. Because the web server will send an text/html response, which proceeds from a PartialView template, we just insert that HTML inside a <div> using the jQuery .html() method, which in turn calls the javascript .innerHTML property of the DOM element.
On the Controller, we add the method to handle the HTTP-GET request:


public ActionResult GetAllNotes()        {            XDocument xml = XDocument.Load(Server.MapPath("~/App_Data/Notes.xml"));            return PartialView("_NotesList", xml);        }
The PartialView returned will get the XDocument as Model, and loop over the "note" elements , displaying each one inside a <div> :

@model System.Xml.Linq.XDocument
@foreach (var note in Model.Descendants("note")){        <div class="note">
        <p><b>To : </b><span>@note.Descendants("to").First().Value </span> <br />         <b>From : </b><span>@note.Descendants("from").First().Value </span> <br />       <b>Title : </b><span>@note.Descendants("heading").First().Value</span><br />     <b>Message : </b><span>@note.Descendants("body").First().Value </span></p> 
    </div>}
We just make use of the .Descendants( "" )  and the   First().Value   properties, to get the data to be displayed. Each Note node will be displayed as shown here :



The web page will show initially just the button:


And when clicked, it will display the data:




That's all!!  In this tutorial we've learned how to get data via Ajax using jQuery, an Action method and a PartialView in Asp.Net MVC.
Happy programming.....

כתב: כרמל שוורצמן