Question

I am working on a project built in ASP.Net MVC 3.

In the index page I have displayed the data and allow the user to do inline editing using jeditable (which also uses ajax function) and delete function.

In the create page, obviously it allows the user to enter new the data but now I need to add a feature to allow the delete from the create page itself if the data already exists on the database.

Shows confirmation box if the data already exists (in my case if Extension is not available) on Extension’s textbox blur.

I was using the ajax function for this feature but was not working, after spending hours on it, I was able to figure out the what was causing the problem.

The ajax function was working only on the Index page, not the other page. I renamed the Create page as Index and the original Index to something else, well it worked this time but ajax stopped working on the original Index page which was renamed to something else.
In the url if I load the index page as “http://localhost:1234/Controller/Index“, the page loads fine but ajax functions do not work.

In a simple way:
Ajax functions works on

• localhost:1234/Controller

Ajax functions do not work on

• localhost:1234/Controller/Create
• localhost:1234/Controller/ViewPage1
• localhost:1234/Controller/Index

If someone could explain why its behaving like this, it would be great to have solution for this and whats the alternative solution for this if it can be fixed.

Thanks

Javascript code

$('#Extension').blur(function () {

$.post("CheckPeople/checkDelete",
    {
        Extension: this.value
    },
    function (data) {
        alert(data);
    });
});

Controller: VB Code

        //GET: /People/

        Function Index() As ViewResult
            ViewBag.CurrentPage = "People"
            Return View(db.Peoples.ToList())
        End Function


        //GET: /People/Create

        Function Create() As ViewResult
            Return View()
        End Function


        //POST: /People/Create

        <HttpPost()>
        Function Create(ByVal people As People) As ActionResult
            If ModelState.IsValid Then
                db.Peoples.Add(people)
                db.SaveChanges()
                Return RedirectToAction("Index")
            End If

            Return View(people)
        End Function

        Public Function checkDelete(ByVal Extension As String) As JsonResult                
             Dim result As String = "I got you "
             Return Json(result, JsonRequestBehavior.AllowGet)
        End Function

Thanks for the comments, I added the code, its straight forward.

If I rename the Create.vbhtml to Index.vbhtml and commented the original Index routing and rename both post and get Create routing to Index, ajax works fine.

Answer 1

I think its a relative url issue.

try adding a / in front of the ajax request url, like

$.post("/CheckPeople/checkDelete",
    {
        Extension: this.value
    },
    function (data) {
        alert(data);
    });
});

hope this helps.