asp.net mvc - Calling WebMethod returning IList<T> from Jquery Ajax with NHibernate And MVC

Question

I have a web method in My Controller...

    [WebMethod]
    public IList<ThemeSelectList> GetThemesForSelectedCategory(string themeCategoryId)
    {
        IList<ThemeSelectList> themeSelectList = new List<ThemeSelectList>();
        int emailLayoutThemeCategoryId = Convert.ToInt32(themeCategoryId);
        using (var trans = session.BeginTransaction())
        {
            EmailThemeBusinessLogic emailThemeBusinessLogic = new EmailThemeBusinessLogic(session, null);
            themeSelectList = emailThemeBusinessLogic.GetThemes(emailLayoutThemeCategoryId);
            trans.Commit();
        }

        return themeSelectList;            
    }

that i am trying to call from a java-script function, that is

function GetThemesForSelectedCategory(event)
{
    event = event || window.event || e.srcElement;
    event.preventDefault();
    var selectedThemeCategoryId = $('#ddlThemeCategory option:selected').val();
    var ThemeContainerDiv = $("#ThemeContenerDiv");
    ThemeContainerDiv.html('<p><img src="../../../../Images/loading.gif"></p>');
    $.ajax
    ({
        type: "POST",
        url: "GetThemesForSelectedCategory",
        data: JSON.stringify({ "themeCategoryId": selectedThemeCategoryId }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            // function is not returning to success
            var ThemeDetails = data.d;
            for (var i = 1; i <= ThemeDetails.length; i++) {
                var row = ['<div id="' + ThemeDetails[i].ThemeId + '" class="themegroup divhighlight">
                                <div class="themename">
                                    ' + ThemeDetails[i].ThemeName + '
                                </div>
                                ' + GetColourTamplate(ThemeDetails[i].ThemeTemplateColorList) + ''].join('
');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            // always error method is getting called
            var somthing = "pankajDubey";
        },
        complete: function (data) 
        {
            var ThemeDetails = data.d;
            for (var i = 1; i <= ThemeDetails.length; i++) {
                var row = ['<div id="' + ThemeDetails[i].ThemeId + '" class="themegroup divhighlight">
                                <div class="themename">
                                    ' + ThemeDetails[i].ThemeName + '
                                </div>
                                ' + GetColourTamplate(ThemeDetails[i].ThemeTemplateColorList) + ''].join('
');
            }
        }
    });
}

i am unable to understand what is going wrong. Every Thing in web method is working fine but i don't know what is missing. please help as I am new to MVC and NHibernate both...

Answer 1

I have a web method in My Controller...

In ASP.NET MVC controllers have actions, not web methods. Web methods are obsolete.

So:

public ActionResult GetThemesForSelectedCategory(string themeCategoryId)
{
    IList<ThemeSelectList> themeSelectList = new List<ThemeSelectList>();
    int emailLayoutThemeCategoryId = Convert.ToInt32(themeCategoryId);
    using (var trans = session.BeginTransaction())
    {
        EmailThemeBusinessLogic emailThemeBusinessLogic = new EmailThemeBusinessLogic(session, null);
        themeSelectList = emailThemeBusinessLogic.GetThemes(emailLayoutThemeCategoryId);
        trans.Commit();
    }

    return Json(themeSelectList);
}

and then:

$.ajax({
    type: "POST",
    url: "/SomeControllerName/GetThemesForSelectedCategory",
    data: { "themeCategoryId": selectedThemeCategoryId },
    success: function (data) {
        ...
    },
    error: function (xhr, ajaxOptions, thrownError) {
        ...
    },
    complete: function (data) {
        ...
    }
});