CODEWITHSUNDEEP
jqueryasp.net-mvc
Ze Carioca Silva
Ze Carioca Silva

Reputation: 443

Loading external Html with Jquery and Asp.net MVC

In my Index view I have this:

<script type="text/javascript" src="~/Scripts/jquery-2.0.0.js"></script>
<script type="text/javascript" src="~/Scripts/Javascript1.js"></script>

<div id="dictionary">
</div>

<div class="letter" id="letter-a">
<a href="#">A</a>
</div>

In my Javascrip11.js I have this:

$(document).ready(function () {
 $('#letter-a a').click(function () {
    $('#dictionary').load('HtmlPage1.html');
     alert('Loaded!');
        return false;
    });
});

And in my HtmlPage1 I have this:

<div>Definitions for letter A</div>

I want the Javascript to load this HtmlPage1 and insert into the div dictionary of the page when I click the anchor tag.....I have HtmlPage1 both in the Scripts folder and in the ViewFolder.. Both doesnt work.... I am getting the alert but the snipet is not being inserted....

Upvotes: 0

Views: 4891

Answers (5)

Harshit Tailor
Harshit Tailor

Reputation: 3281

Try this :-

$(document).ready(function () {
 $('#letter-a a').click(function () {
     $.get('HtmlPage1.html')
     .success(function(data) {
       alert(data);
         $('#dictionary').html(data);
     });

        return false;
    });
});

Upvotes: 0

Tallmaris
Tallmaris

Reputation: 7590

When loading a static file in MVC are basically using an absolute path. Put the HtmlPage1.html file in the root of the site and everything should work

Of course you can use subfolders as well (or a controller-action, which sounds hacky though):

$('#dictionary').load('Views/HtmlPage1.html');

Upvotes: 1

David B.
David B.

Reputation: 87

try this:

$(document).ready(function () {
  $('#letter-a a').on("click", function (e) {
    e.preventDefault();
    $('#dictionary').load('HtmlPage1.html');
    alert('Loaded!');
    return false;
  });
});

Upvotes: 1

2rsvold
2rsvold

Reputation: 17

You will have to make a "Ajax Controller" (or name of your choice) so you can load the page through a URL.

Sample:

Place the "HtmlPage1" in the "View/Ajax"-folder.

Create a controller named "AjaxController" with the following action:

public class AjaxController
{
     public ActionResult HtmlPage1()
     {
         return View();
     }
}

And then call the url "Ajax/HtmlPage1" in your JavaScript:

$('#dictionary').load('/Ajax/HtmlPage1');

From here you can add more ActionResults to add different results. :)

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

I think you need to preventDefault behaviour on <a> tag:

$(document).ready(function () {
 $('#letter-a a').click(function (e) {
    e.preventDefault();
    $('#dictionary').load('HtmlPage1.html');
     alert('Loaded!');
        return false;
    });
});

Upvotes: 0

Related Questions