Rendering a partial view with ajax

Currently I have a main view called getRolesByYear.cshtml . In this view I have three buttons, each for an year. When I click a button(or on page load) I invoke a method, which takes an int 'year' for a parameter and calls an ajax with the year parameter. This ajax calls an action method (getRolesByYear, the one for the main view). The Action method makes a query to a database, a result of which is a list of ViewModel objects. In the return statement I return a PartialView like this : return PartialView("_yearlyRoles",list); . Sadly, after all this, instead of getting a list of the desired objects in my frontend, all i get is an error from the error part of the ajax call. I am generally a novice and I am very stuck with this.

Here is the main view getRolesByYear.cshtml :

    @{
    ViewBag.Title = "getRolesByYear";
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">


    getRolesForYear(parseInt(@DateTime.Now.Year));

    $(function () {
        $('#years a').click(function () {
            var year = $(this).text();
            console.log(year);
            getRolesForYear(parseInt(year));
        });
    })
    //console.log(year);


    function getRolesForYear(year) {
        console.log(year);
        $.ajax({
            type: "POST",
            url: '@Url.Action("getRolesByYear", "WorkRoles")',
            dataType: "json",
            data: {
                year: year
            },
            success: successFunc,
            error: errorFunc
        });

        function successFunc(data, status) {



                $("#partial").html(data);


        }

        function errorFunc() {
            alert('error');
        }
    }



</script>

<div id = "years" class="btn-group btn-group-justified timeline">
    <a  href="#@DateTime.Now.Year" class="btn btn-primary">@DateTime.Now.Year</a>
    <a  href="#@DateTime.Now.AddYears(-1).Year" class="btn btn-primary">@DateTime.Now.AddYears(-1).Year</a>
    <a  href="#@DateTime.Now.AddYears(-2).Year" class="btn btn-primary">@DateTime.Now.AddYears(-2).Year</a>
</div>

<div id = "partial"></div>

The partial view :

@model IEnumerable<eksp.Models.RoleViewModel>


@foreach (var item in Model)
{
    <div class="jumbotron">
        <h2>item.Role.RoleName</h2>

        <h1> item.Role.RoleDescription</h1>
        <p class="lead">Focus start : item.Role.FocusStart</p>
        <p>Focus end : item.Role.FocusStart </p>

    </div>
}

The Action Method :

[HttpPost]
    public ActionResult getRolesByYear(int year)
    {
        string currentUserId = User.Identity.GetUserId();


        var list = db.WorkRoles.
            Join(db.WorkRolesUsersDetails,
            o => o.WorkRoleId, od => od.WorkRoleId,
            (o, od) => new
            {
                WorkRoleId = o.WorkRoleId,
                RoleName = o.RoleName,
                RoleDescription = o.RoleDescription,
                CompanyId = o.CompanyId,
                WRUDId = od.WRUDId,
                UserDetailsId = od.UserDetailsId,
                FocusStart = od.FocusStart,
                FocusEnd = od.FocusEnd
            }).ToList()
            .Select(item => new RoleViewModel(
               item.WorkRoleId,
                item.RoleName,
                item.RoleDescription,
                item.CompanyId,
                item.WRUDId,
                item.UserDetailsId,
                item.FocusStart,
                item.FocusEnd)).ToList();


        //RoleViewModel rv = list;

        if (Request.IsAjaxRequest())
        {
            return PartialView("_yearlyRoles", list);
        }
        else
        {
            return View(list);
        }
    }

---

Given the reported error message, you need to alter your ajax call. By setting "data" parameter to "json" you're telling ajax to expect JSON-formatted data back in the response, but a partial view is HTML, so change your ajax call to reflect this:

$.ajax({
    type: "POST",
    url: '@Url.Action("getRolesByYear", "WorkRoles")/' + year,
    dataType: "html", //set the correct data type for the response
    success: successFunc,
    error: errorFunc
});

As an aside, you can improve your error handling on the client side quite straightforwardly by changing errorFunc to something like this, using the parameters that are provided to the callback by $.ajax:

function errorFunc(jQXHR, textStatus, errorThrown) {
    alert("An error occurred while trying to contact the server: " + jQXHR.status + " " + textStatus + " " + errorThrown);
}

For less instrusive reporting and/or easier debugging, you could change the alert to console.log . To get more detail you could also log the entire jQXHR object:

console.log(JSON.stringify(jQXHR));

链接地址: http://www.djcxy.com/p/50952.html

上一篇: Android设置内容类型HttpPost

下一篇: 用ajax渲染局部视图