Not able to call controller method using Ajax call

Question

Controller:

[HttpPost]
    public void DeleteState(string id)
    {
        int id1=Convert.ToInt32(id);
        var _db = new clubDataContext();
        var state = from m in _db.StateInfos where m.S_ID == id1 select m;
        foreach (var m in state)
        {
            _db.StateInfos.DeleteOnSubmit(m);
        }
        try
        {
            _db.SubmitChanges();
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
        }


    }

View:

<input id="state-id" type="text" value=@item.S_ID  style="display:none"/>
<td>
<a id="delete-link" href="" >Delete</a>
</td>

$("#delete-link").click(function(){
    $.ajax({
    url: '@Url.Action("DeleteState", "ManageSystem")',
    data: {'id':$("#state-id").val(); } ,
        success: function(result) {
        $('#edit-state').html("State Deleted Successfully");
    }
    });

    }     
  });

I don't know what is the reason but controller method is not called when i click on Delete. Is there Ajax problem? I have included Ajax Library.

Main thing I forgot to mention that My view is partial view and I am calling controller method from this partial view. So I think jQuery is not loaded

What *does* happen when you click the element? Is the JavaScript code invoked? Is there an error in the JavaScript console? Is the network request sent? What is the server's response? When you debug this, at what point does it fail? — David, Mar 19 '14 at 12:46
No, javascript code is not invoked.. I have simply added alert function but it is not invoked. What is the reason behind it? — Saurabh Gadariya, Mar 19 '14 at 12:53
Is there an error in the JavaScript console? If it's not invoked at all then I suspect jQuery isn't loaded. Another possibility is if you're re-using the same `id` elsewhere on the page then the handler might not be applied correctly, since that would be invalid markup. — David, Mar 19 '14 at 12:55
It looks like you're going to have to do some debugging. The code as presented demonstrably works: http://jsfiddle.net/5MdMb/ — David, Mar 19 '14 at 13:00
I know this code should work, actually similar type of code is working in same project but don't know what is the issue in this. — Saurabh Gadariya, Mar 19 '14 at 13:08
Main thing I forgot to mention that My view is partial view and I am calling controller method from this partial view. So is this the reason for not loading JQuery — Saurabh Gadariya, Mar 19 '14 at 13:28

score 0 · Answer 1 · answered Mar 19 '14 at 14:23

0

I think the problem is : Your controller is of type HttpPost. make sure Ajax call is of type Post. Use type: "POST" for more info visit jQuery ajax Documentation.

answered Mar 19 '14 at 14:23

Amirhossein Mehrvarzi

18,024
7
45
70

simple javascript is not working here, ajax call is another thing. My question is can we make Ajax call in partial view if yes then what are the prerequisites that should be taken care of? – Saurabh Gadariya Mar 19 '14 at 20:17
@SaurabhGadariya It's possible! load jquery in parent view and use functions in partial view. Nothing to take care of! – Amirhossein Mehrvarzi Mar 19 '14 at 21:00

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

Finally got the solution. This question is already asked before. Sorry for that!

Is it OK to put JavaScript in Partial Views

Here I got similar type of question in stackoverflow itself.

1)MVC4 partial view javascript bundling Issue

2)javascript-not-working-in-partial-view

3)document-ready-is-not-working-correctly-in-partial-view

4)How to execute JavaScript function on PartialView load in MVC 3

So in my project, i made separate .js file for making javascript excecutable and then i simply call this js file like this.

Partial-View:

<script src="~/Scripts/stategrid.js" type="text/javascript"></script>

edited May 23 '17 at 12:20

Community

1
1

answered Mar 19 '14 at 21:58

Saurabh Gadariya

191
6
20

The statement you make "we cannot use script code in partial view is not correct". It is a **good practice** to not use script in partial view.For your case i think what you should do is do the event binding for $("#delete-link") in $(document).ready(); – Prerak K Mar 20 '14 at 05:12

Not able to call controller method using Ajax call

2 Answers2