Load Partial View on ajax success method in MVC 4

Question

Problem Statement :View not able to load on ajax success method.

Description : I'm having couple of dropdowns as cascaded(second binding based on the value of first). On change of the first dropdown I'm binding second dropdown and again on change of the second dropdown,now on right side I want to display a list of record based on the two dropdown values.

For this,I'm using the following JS code in onchange event for the dropdown 2:

function ShowDocsList() {
        var teamId = $('#TeamID').val();
        var projectId = $("#ProjectID").val();
        var Url = "@Url.Content("~/DocsHome/DocsList")";
        $.ajax({
            url: Url,
            type:'POST',
            dataType: 'html',
            data: { TeamID: teamId ,ProjectID : projectId},
            success: function (data) {
            return data;
              $('.docs-detail').html(data);
            }
        });

Here,in DocsHome Controller,DocsList method is getting hit on change of second dropdown which is project dropdown.But the view is not getting rendered .Following is my Controller Code:

 public ActionResult DocsList(int teamId, int projectId)
        {
            List<CustomerViewModel> customerViewsModels = SmartAdminHelper.GetCustomers(db1);
            if (Request.IsAjaxRequest())
                return PartialView("DocsList");
            else
                return View("DocsList");

        }

Again ,I'm getting record in List but while debugging it does not pass to the DocsList view which according to me is correct.

Here DocsList is the view I want to render as a partial view on change of the second dropdown. According to my knowledge,while debugging it comes to the point return PartialView("DocsList") but then again it goes back to the ajax success method and finally I find that there I'm doing something wrong.

Earlier I have Json to get data but here I'm calling actionmethod from ajax. So, not sure that also might be a problem as I'm new to this.

What and where exactly I'm doing wrong?

Answer 1

Saroj, I see that this is an old question and that you needed to get it done quickly, but if you happend to come back to this, I'll add my two cents. You need to remove the return statement that David and Ehsan mention above. The rest of the callback function does what it should. In your action method it doesn't look like you're doing anything with the parameters you pass in. I'm assuming that you are going to figure that out after you get the view down to the client. So, lets get that view down to the client.

I like to pass the rendered partial view back to the client as a string of HTML. I do this using a method that I keep in a controller base class that each of my controllers inherit from. To use the method you will need to reference System.Web.Mvc and System.IO namespaces.

The method looks like this:

private string RenderViewToString( string viewName, object model ) {
            ViewData.Model = model;
            using ( var sw = new StringWriter() ) {
                var viewResult = ViewEngines.Engines.FindPartialView( ControllerContext, viewName );
                var viewContext = new ViewContext( ControllerContext, viewResult.View, ViewData, TempData, sw );
                viewResult.View.Render( viewContext, sw );
                viewResult.ViewEngine.ReleaseView( ControllerContext, viewResult.View );
                return sw.GetStringBuilder().ToString();
            }
        }

You pass your model and the name of the view to the method and it returns the rendered view HTML as a string which you can return to the client as a ContentResult.

Update your action method like so:

 public ActionResult DocsList(int teamId, int projectId)
            {
                List<CustomerViewModel> customerViewsModels = SmartAdminHelper.GetCustomers(db1);
                if (Request.IsAjaxRequest())
                    var viewContents = RenderViewToString("DocsList", customerViewsModels);
                    return Content(viewContents);
                else
                    return View("DocsList");

            }

Assuming that the element that you want the rendered view to appear in has the css class '.docs-detail' on it you'll be in business. Hope this helps!