Click here to Skip to main content
12,447,961 members (79,530 online)
Click here to Skip to main content
Articles » Web Development » Ajax » General » Downloads

Stats

33.6K views
439 downloads
32 bookmarked
Posted

Load Clean HTML Fragments using jQuery and MVC

, 3 Dec 2010 CPOL
This article presents a simple method to load clean HTML fragments from the web servers using jQuery and MVC.
jQueryPartialView
jQueryPartialView
jQueryPartialView.suo
bin
Content
Images
ajax-load.gif
arrow.png
Scripts
Styles
Controllers
Global.asax
jQueryPartialView.csproj.user
Models
Properties
Views
Home
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Load clean html fragment</title>
    <link rel="stylesheet"
        href="<%: Url.Content("~/Content/Styles/Site.css") %>"
        type="text/css" />
    <link rel="stylesheet"
        href="<%: Url.Content("~/Content/Styles/TableStyle.css") %>"
        type="text/css" />

    <script src='<%: Url.Content("~/Content/Scripts/jquery-1.4.4.min.js") %>'
        type="text/javascript">
    </script>
</head>
<body>
    <div id="MainContainer">
        <div id="InputTrigger">
            <span>Please select the number of the students to retrieve</span>
            <span>
                <select id="selNoOfStudents">
                    <option>***</option>
                    <option>1</option>
                    <option>5</option>
                    <option>10</option>
                    <option>20</option>
                    <option>100</option>
                </select>
            </span>
            <img id="imgGetStudents"
                src="<%: Url.Content("~/Content/Images/arrow.png") %>"
                    alt="" />
        </div>
        <div id="HTMLContent"></div>
    </div>
</body>
</html>

<script type="text/javascript">
    var aquireStudentsURL = '<%: Url.Action("LoadStudents", "Home") %>';
    var ajaxLoadImgURL = '<%: Url.Content("~/Content/Images/ajax-load.gif") %>';
    $(document).ready(function () {
        var $MainContent = $("#HTMLContent");
        var $selNumberOfStudents = $("#selNoOfStudents");
        var ajaxLoadImg = "<img src='" + ajaxLoadImgURL + "' alt='Loading ...'/>";

        $("#imgGetStudents").click(function (e) {
            e.preventDefault();
            var numberOfStudents = $selNumberOfStudents.val();
            if (numberOfStudents == "***") {
                alert("Please select the number of the students to retrieve");
                return;
            }

            var resourceURL = aquireStudentsURL + "?NoOfStudents=" + numberOfStudents;
            $MainContent.html(ajaxLoadImg);
            $.ajax({
                cache: false,
                type: "GET",
                async: false,
                url: resourceURL,
                dataType: "text/html",
                success: function (htmlFragment) {
                    $MainContent.html(htmlFragment);
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        });

        $selNumberOfStudents.change(function () {
            $MainContent.html("");
        });
    });
</script>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dr. Song Li
United States United States
I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I want to be your friend.

You may also be interested in...

Pro
Pro
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160811.3 | Last Updated 3 Dec 2010
Article Copyright 2010 by Dr. Song Li
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid