Click here to Skip to main content
13,005,973 members (64,016 online)
Click here to Skip to main content
Articles » Web Development » Ajax » General » Downloads

Stats

37.2K views
458 downloads
33 bookmarked
Posted 3 Dec 2010

Load Clean HTML Fragments using jQuery and MVC

, 3 Dec 2010
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
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170628.1 | Last Updated 3 Dec 2010
Article Copyright 2010 by Dr. Song Li
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid