Using AJAX in MVC

Question

I am trying to use AJAX to allow a user to input an ID number in order to populate another area on my page. I want to use AJAX to accomplish this. I haven't used AJAX that much, especially while using MVC. My AJAX should execute when my checkIdBtn is clicked but every time I click it, it says "The resource cannot be found. Requested URL: /Events/Search". I can't figure out what is wrong with my URL (im guessing it can't find my controller/action method?). My controller is my HomeController and the action method is getEmpInfo. Below is the code for my AJAX:

<script type="text/javascript">
$(document).ready(function () {
    $('#CheckIdBtn').click(function () {
        var empId = $('#empId').val();
        $.ajax({
            url: '/Home/getEmpInfo',
            contentType: 'application/html; charset=utf-8',
            data: { id: empId },
            type: 'GET',
            dataType: 'html'
        })
        .success(function (result) {
            $('#EmpInfoDiv').html(result);
        })
        .error(function (xhr, status) {
            alert(status);
        })
    });
});
</script>

what is the result when you type http://yourserver/Home/getEmpInfo in browser? — asdf_enel_hak
– asdf_enel_hak, Commented Sep 23, 2014 at 12:53
it finds it... tells me I have a null value for my parameter for the controller. — Stc5097
– Stc5097, Commented Sep 23, 2014 at 12:55
Is the button's click event firing? (ie does the page reload) if so you need to add 'preventDefault()` — markpsmith
– markpsmith, Commented Sep 23, 2014 at 12:57
The resource cannot be found. Requested URL: /Events/Search: somehow you are calling http://yourserver/Events/Search — asdf_enel_hak
– asdf_enel_hak, Commented Sep 23, 2014 at 12:58
I know..In my address bar is puts /Events/Search instead of /home/getEmpInfo but i am not calling events/search anywhere. — Stc5097
– Stc5097, Commented Sep 23, 2014 at 13:00

Subha · Accepted Answer · 2014-09-23 12:56:56Z

2

Few points -

You are posting some data to the server, so, use type: 'POST' instead of 'GET'.
Remove dataType and contentType.
Make sure the action named "getEmpInfo" receives a parameter named id.

answered Sep 23, 2014 at 12:56

Subha

1,0511 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stc5097 Over a year ago

I updated it according to your points but still the same results.

Mrchief · Accepted Answer · 2014-09-23 16:03:20Z

I suspect you're posting to your page again when you click. Try adding e.preventDefault(); to your click handler (I also fixed your ajax call anomalies):

$('#CheckIdBtn').click(function (e) {
    e.preventDefault();
    var empId = $('#empId').val();
    $.ajax({
        url: '/Home/getEmpInfo',
        data: { id: empId },
        type: 'POST'
    })
    .success(function (result) {
        $('#EmpInfoDiv').html(result);
    })
    .error(function (xhr, status) {
        alert(status);
    })
});

adil khan · Accepted Answer · 2017-02-27 06:02:57Z

0

When I have this error I run project from index file then this error is not appear. You can try open Index or html file then click on run button. I think your error is ... You are mixing views and partial views make sure your views and partial views are not mixed up.

answered Feb 27, 2017 at 6:02

adil khan

13 bronze badges

Collectives™ on Stack Overflow

Using AJAX in MVC

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related