MVC3 Partial View : Not able to see html in View Source for Partial View render using Json object

Question

This is the first time I am working with ASP.NET MVC and I am stuck.

In my code I am doing an Ajax call by using JQuery/json, passing an array of selected options on button click to the controller side and performing some operations there.

Then I return a Partial View which is containing a table so I can see the contents of the Partial View (i.e., Grid) on the page.

Now I want go through the grid but when I try to inspect it I realize that there is no HTML code created in the browser's View Source.

Am I missing any basic thing over here? Can anyone help on this?

Controller - Main action method for View :

public ActionResult AssignCalculationToSC()
{
   //Some Oprations performed
   return View();  
}

Action method called from Ajax to return Partial View :

public ActionResult AddSelectedList(string selectedList, string calculationPurpose)
{  
    List<AssignCalculationsSourceDataModel> lstAssignCalculationsSourceDataModel = new List<AssignCalculationsSourceDataModel>();
    AssignCalculationsSourceDataModel assignCalculationsSourceDataModel = new AssignCalculationsSourceDataModel();
    return PartialView("AssignCalculationToSC", lstAssignCalculationsSourceDataModel);
}

JQuery code for Ajax call :

$(function () {

    $('#btnAdd').click(function () {
        var selectedList = [];
        $("#ddlSupplementalCalculationList option:selected").each(function (i, selected) {
            var $this = $(this);
            selectedList.push({ Id: $this.val(), Value: $this.text() });
           });

        getCalculationListGrid(selectedList, calculationPurpose);
    });

    function getCalculationListGrid(selectedList, calculationPurpose) {
        $.ajax(
        {
            url: "AddSelectedList/SupplementalPricing",
            type: "POST",
            dataType: "html",
            traditional: true,
            data: { selectedList: JSON.stringify(selectedList), calculationPurpose:  calculationPurpose },
            success: function (response) 
            {
                $("#dvGrid").html(response);
            }
        });
    }
});

Main View :

@{
    ViewBag.Title = "Assign Price Values";
}

@model  IList<Bnym.Equinox.Accounting.Web.Portal.Models.Pricing.AssignCalculationsSourceDataModel> 

@{Html.RenderPartial("PartialAssignCalculationGrid", Model);}

Partial View :

@model IList<Bnym.Equinox.Accounting.Web.Portal.Models.Pricing.AssignCalculationsSourceDataModel> 

@if (Model != null)
{
    <div id="dvGrid">
    <table id="grid" style="table-layout: fixed;">
    </table>
    </div>
}

Answer 1

Q1) Now I want go through the grid but when I try to inspect it I realize that there is no HTML code created in the browser's View Source.

The HTML from your partial view will never appear in the page's source because it is not present in the initial HTTP GET. The View Source command in browsers displays the HTML received before any javascript is executed.

Download and install fiddler and inspect the Ajax call in order to see the HTML that is returned from your controller.

Q2 (implicit) Why is the partial view never displayed on screen?

Your main view needs a div#dvgrid and your partial view needs to hosts the grid's content, like this:

Main View :

@{
    ViewBag.Title = "Assign Price Values";
}

@model  IList<Bnym.Equinox.Accounting.Web.Portal.Models.Pricing.AssignCalculationsSourceDataModel> 

<div id="dvGrid">
</div>

Partial View :

@model IList<Bnym.Equinox.Accounting.Web.Portal.Models.Pricing.AssignCalculationsSourceDataModel> 

@if (Model != null)
{
    <table id="grid" style="table-layout: fixed;">
        @foreach(var item in Model){
            <tr>
                <td>
                    DATA <!-- render data here -->
                </td>
                <!-- ... -->
            </tr>
        }
    </table>
}

Edit

You need to decorate your AddSelectedList action with an [HttpPost] attribute in your controller:

[HttpPost]
public ActionResult AddSelectedList(string selectedList, string calculationPurpose)
{  
    List<AssignCalculationsSourceDataModel> lstAssignCalculationsSourceDataModel = new List<AssignCalculationsSourceDataModel>();
    AssignCalculationsSourceDataModel assignCalculationsSourceDataModel = new AssignCalculationsSourceDataModel();
    return PartialView("AssignCalculationToSC", lstAssignCalculationsSourceDataModel);
}

And you need to fix your ajax call. Note the JSON.stringify() method has to wrap your whole javascript object.

$.ajax(
        {
            url: "@Url.Action("GetData")",
            type: "POST",
            dataType: "json",
            traditional: true,
            data: JSON.stringify({ selectedList: selectedList, calculationPurpose:  calculationPurpose }),
            success: function (response) 
            {
                $("#dvGrid").html(response);
            }
        });