---

Search posts under ASP.NET MVC:

---

List records using JSON in ASP.NET MVC

How to list records from database using JSON in ASP.NET MVC?

To know more about JSON, read jQuery Tips & Tricks ebook.

In short, JSON is a light weight data format used to communicate from-to server with JavaScript, read more here. In order to list records from database using JSON in ASP.NET MVC, we can follow below approach. This is very useful as we only get the actual data from database not the data along with html formatting from the server (as in previous post). Formatting of the data and displaying it to the user will be the responsibility of the JavaScript/jQuery. This is considered faster and better than getting formatted data from the server.

Create following action methods

CONTROLLER CODE

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

        public JsonResult SearchPeopleJson(string keyword)
        {
            var data = db.PersonalDetails.Where(f =>
f.FirstName.Contains(keyword)).ToList();

            var jsonData = Json(data, JsonRequestBehavior.AllowGet);
            return jsonData;
        }

The first Action method simply returns the IndexJson view.

In the second Action method, we are filtering the data based on keyword from the database and converting it into JSON format using Json method and returning to the view. Notice that the return type of this action method JsonResult.

VIEW CODE (IndexJson view)

@{
    ViewBag.Title = "IndexJson";
    AjaxOptions options = new AjaxOptions
    {
        Confirm = "Are you sure to start search?",
        LoadingElementId = "divLoading",
        OnSuccess = "processDataMethod",
        Url = Url.Action("SearchPeopleJson")
    };
}
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script type="text/javascript">
        function processDataMethod(data) {
            var output = $("#searchResult");
            output.empty();
            for (var i = 0; i < data.length ; i++) {
                var person = data[i];
                output.append("<tr><td>" + person.AutoId + "</td><td>" +
                person.FirstName + "</td><td>" + person.LastName + "</td><td>" + person.Age +
                "</td><td>" + person.Active + "</td></tr>");
            }
        }
    </script>
    <h2>IndexJson</h2>
    <table style="width: 100%;">
        <thead>
            <tr>
                <th>AutoId</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
                <th>Active</th>
            </tr>
        </thead>
        <tbody id="searchResult">
        </tbody>
    </table>
    @using (Ajax.BeginForm(options))
{
    <div id="divLoading" style="color: red; background-color: yellow; fontsize: larger; display: none;">
        Loading ....
    </div>
    <div>
        @Html.TextBox("keyword")
        <button type="submit" id="btnSearch">Search</button>
    </div>
    }

@Scripts.Render("~/bundles/jqueryval")
    <script>
        $("#btnSearch").trigger("click");
    </script>

In the above view, first we have created the instance of AjaxOptions and set its properties

1. Confirm – used to ask a confirmation message from user before sending Ajax request
2. LoadingElementId – element to display while the Ajax processing is going on
3. OnSuccess – function to call when Ajax request is successful
4. Url – URL where to send the Ajax request