asp.net mvc 3 - MVC3 Partial View : Not able to see html in View Source for Partial View render using Json object -

this first time working asp.net mvc , stuck.

in code doing ajax call using jquery/json, passing array of selected options on button click controller side , performing operations there.

then return partial view containing table can see contents of partial view (i.e., grid) on page.

now want go through grid when try inspect realize there no html code created in browser's view source.

am missing basic thing on here? can on this?

controller - main action method view :

public actionresult assigncalculationtosc() {    //some oprations performed    return view();   } 

action method called ajax 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 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> } 

q1) want go through grid when try inspect realize there no html code created in browser's view source.

the html partial view never appear in page's source because not present in initial http get. view source command in browsers displays html received before javascript executed.

download , install fiddler , inspect ajax call in order see html returned controller.

q2 (implicit) why partial view never displayed on screen?

your main view needs div#dvgrid , partial view needs hosts grid's content, 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 decorate addselectedlist action [httppost] attribute in controller:

[httppost] public actionresult addselectedlist(string selectedlist, string calculationpurpose) {       list<assigncalculationssourcedatamodel> lstassigncalculationssourcedatamodel = new list<assigncalculationssourcedatamodel>();     assigncalculationssourcedatamodel assigncalculationssourcedatamodel = new assigncalculationssourcedatamodel();     return partialview("assigncalculationtosc", lstassigncalculationssourcedatamodel); } 

and need fix ajax call. note json.stringify() method has wrap 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);             }         });