Partial View vs Json In MVC3

Question

I am using MVC3 Razor I am new to this I am stuck Below Point.

In My code I am giving Ajax call by using Jquery Json Passing Array of Selected List On

Button Click on Controller Side and Performing some Opration there and Trying to

Call "Partial View" I can not see the contents of Partial View on the Page(Not got Render).

Can anyone help on this.

Jquery Code:

        $(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)

       });
     });

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

            }
          });
         }

Controller Code:

        public ActionResult AddSelectedList(string selectedList)
          {
        var js = new JavaScriptSerializer();
        var deserializedSelectedList = (object[])js.DeserializeObject(selectedList);
        var selectedCalculationList = new List<SelectedCalculationListModel>();

        if (deserializedSelectedList != null)
        {
            foreach (Dictionary<string, object> calcList in deserializedSelectedList)
            {
             selectedCalculationList.Add(new SelectedCalculationListModel(calcList));
            }
        }

        List<AssignCalculationsSourceDataModel> lstAssignCalculationsSourceDataModel =

          new List<AssignCalculationsSourceDataModel>();
        AssignCalculationsSourceDataModel assignCalculationsSourceDataModel = new 

        AssignCalculationsSourceDataModel();

          assignCalculationsSourceDataModel.SelectedCalculationNamesCollection = 

         selectedCalculationList;

        lstAssignCalculationsSourceDataModel.Add(assignCalculationsSourceDataModel);



        return PartialView("PartialAssignCalculationGrid", 
                                      lstAssignCalculationsSourceDataModel);

    }

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;">

            <tr class="gridHeaders">
                <td colspan="13" align="center">
                    Assigned Calculations
                </td>
            </tr>
            <tr class="gridHeaders">
                <td colspan="4" style="width:212px">
                    Assigned Calculations Usage
                </td>
                <td colspan="9" style="width:190px">
                    Hirarchical Pricing
                </td>
            </tr>

        <tr class="gridHeaders">
            <td class="CheckBox" style="width:20px">
                <input type="checkbox" name="SelectAll" id="SelectAll" 
            onclick="CheckAll(this);"
                    title="Select All" />
            </td>
            <td style="width:220px">
                Calculation Name
            </td>
            <td class ="lblCalculationPurpose">
                Calculation Purpose
            </td>
            <td class ="ddlRoundingRules">
                Pricing Calculation Level
            </td>
            <td  class ="ddlRoundingRules">
                Rounding Rule
            </td>
            <td class ="ddlRoundingRules">
                Rounding Type
            </td>
            <td  class = "ddlRoundingPrecision">
                Precision
            </td>
            <td class = "txtAssignCalculation">
                InvestOne Security Identifier
            </td>
            <td class = "txtAssignCalculation">
                HP Rate Source Current
            </td>
            <td class = "txtAssignCalculation">
                HP Rate Source Forward
            </td>
            <td class = "ddlUserBank">
                UserBank
            </td>
            <td class = "txtAssignCalculation">
                HP Rate Time
            </td>
            <td class = "txtAssignCalculation">
                HP Rate Type
            </td>
        </tr>
         <tbody id="dvBody">
            @for (var items = 0; items < Model.Count; items++)
            {
                for (var item = 0; item < Model 
               [items].SelectedCalculationNamesCollection.Count; item++)
                {
                    for (var index = 0; index < 3; index++)
                    {
                        var CalculationPurpose = string.Empty;

                        <tr>
                        <td style="width: 20px">
                        @Html.CheckBox("check", new { @id = "1", @class = "sel", 
                      @onclick = "uncheckHeaderCB(this);" })
                        </td>
                        <td style="width: 220px">
                        @Model[items].SelectedCalculationNamesCollection[item].Value
                    </td>
                        <td class="lblCalculationPurpose">
                        @if (Model[items].SelectedCalculationPurpose.ToLower().Equals
                      ("hp"))
                        {
                            if (index == 0)
                            {
                                CalculationPurpose = "HP – Trading NAV";
                                @Html.Label(CalculationPurpose) 
                            }
                            else if (index == 1)
                            {
                                CalculationPurpose = "HP - Performance NAV";
                                @Html.Label(CalculationPurpose) 
                            }
                        }
                        else if (Model[items].SelectedCalculationPurpose.ToLower
                   ().Equals("dissemination"))
                        {
                            CalculationPurpose = "Dissemination";
                            @Model[items].SelectedCalculationPurpose
                        }
                        else if (Model[items].SelectedCalculationPurpose.ToLower
                     ().Equals("both"))
                        {
                            if (index == 0)
                            {
                                CalculationPurpose = "HP – Trading NAV";
                                @Html.Label(CalculationPurpose) 
                            }
                            else if (index == 1)
                            {
                                CalculationPurpose = "HP - Performance NAV";
                                @Html.Label(CalculationPurpose) 
                            }
                            else if (index == 2)
                            {
                                CalculationPurpose = "Dissemination";
                                @Html.Label(CalculationPurpose) 
                            }
                        }
                    </td>
                        <td class="ddlRoundingRules">
                        @if ((Model[items].SelectedCalculationPurpose.ToLower().Equals
                             ("both") && CalculationPurpose.ToLower().Equals
                     ("dissemination")) || Model
                 [items].SelectedCalculationPurpose.ToLower().Equals("dissemination"))
                        {
                            if (Model[items].PricingCalculationLevelsCollection != 
                         null)
                            {
                                @Html.DropDownList("ddlCalculationLevel", new 
                  SelectList((System.Collections.IEnumerable)Model
                    [items].PricingCalculationLevelsCollection, "id", "value"), new { 
                       @class 
                      = "ddlRoundingRules" })
                            }
                        }
                        </td>
                    @if ((Model[items].SelectedCalculationPurpose.ToLower().Equals
               ("both") && !CalculationPurpose.ToLower().Equals("dissemination")) || 
               Model[items].SelectedCalculationPurpose.ToLower().Equals("hp"))
                    {
                        <td class="ddlRoundingRules">
                        @if (Model[items].RoundingRulesCollection != null)
                        {
                            @Html.DropDownList("ddlRoundingRule", new SelectList
            ((System.Collections.IEnumerable)Model
             [items].RoundingRulesCollection, "id", "value"), new { @class 
            = "ddlRoundingRules" })
                        }
                       </td>
                    }
                    else
                    {
                        <td class="tdBackground"></td>
                    }

                    @if ((Model[items].SelectedCalculationPurpose.ToLower().Equals
              ("both") && !CalculationPurpose.ToLower().Equals("dissemination")) ||
               Model[items].SelectedCalculationPurpose.ToLower().Equals("hp"))
                    {
                        <td class="ddlRoundingRules">
                        @if (Model[items].RoundingTypesCollection != null)
                        {
                            @Html.DropDownList("ddlRoundingTypes", new SelectList
                ((System.Collections.IEnumerable)Model
         [items].RoundingTypesCollection, "id", "value"), new { @class 
        = "ddlRoundingRules" })
                        }
                        </td>
                    }
                    else
                    {
                        <td class="tdBackground"></td>
                    }

                    @if ((Model[items].SelectedCalculationPurpose.ToLower().Equals
         ("both") && !CalculationPurpose.ToLower().Equals("dissemination")) || Model
        [items].SelectedCalculationPurpose.ToLower().Equals("hp"))
                    {
                        <td class="ddlRoundingPrecision">
                        @if (Model[items].RoundingPrecisionsCollection != null)
                        {

                            @Html.DropDownList("ddlRoundingPrecision", new SelectList
           ((System.Collections.IEnumerable)Model
           [items].RoundingPrecisionsCollection, "id", "value"), new { @class 
           = "ddlRoundingPrecision" })
                        }
                        </td>
                    }
                    else
                    {
                        <td class="tdBackground"></td>
                    }

                    @if ((Model[items].SelectedCalculationPurpose.ToLower().Equals
             ("both") && !CalculationPurpose.ToLower().Equals("dissemination")) || 
             Model[items].SelectedCalculationPurpose.ToLower().Equals("hp"))
                    {
                        <td class="txtAssignCalculation">
                        @Html.TextBox("txtInvestOneSecurityIdentifier", "", new { 
                  @Class = "txtAssignCalculation" })
                        </td>
                    }
                    else
                    {
                        <td class="tdBackground"></td>
                    }

                    @if ((Model[items].SelectedCalculationPurpose.ToLower().Equals
               ("both") && !CalculationPurpose.ToLower().Equals("dissemination")) || 
               Model[items].SelectedCalculationPurpose.ToLower().Equals("hp"))
                    {
                        <td class="txtAssignCalculation">
                        @Html.TextBox("txtHPRateSourceCurrent", "", new { @Class 
                   = "txtAssignCalculation" })
                        </td>
                    }
                    else
                    {
                        <td class="tdBackground"></td>
                    }
                    @if (Model[items].SelectedCalculationPurpose.ToLower().Equals
                   ("hp"))
                    {
                        <td class="txtAssignCalculation">
                        @Html.TextBox("txtHPRateSourceForward", "", new { @Class 
                = "txtAssignCalculation" })
                        </td>
                    }
                    else
                    {
                        <td class="tdBackground"></td>
                    }


                    @if ((Model[items].SelectedCalculationPurpose.ToLower().Equals
                 ("both") && !CalculationPurpose.ToLower().Equals("dissemination")) ||
               Model[items].SelectedCalculationPurpose.ToLower().Equals("hp"))
                    {
                        <td class="ddlUserBank">
                        @if (Model[items].UserBanksCollection != null)
                        {
                            @Html.DropDownList("ddlUserBank", new SelectList
                ((System.Collections.IEnumerable)Model
              [items].UserBanksCollection, "id", "value"), new { 
                  @class = "ddlUserBank" })
                        }
                        </td>
                    }
                    else
                    {
                        <td class="tdBackground"></td>
                    }

                    @if ((Model[items].SelectedCalculationPurpose.ToLower().Equals
                ("both") || Model[items].SelectedCalculationPurpose.ToLower().Equals
                ("hp")) && CalculationPurpose.Equals("HP - Performance NAV"))
                    {
                        <td class="ddlUserBank">
                        @if (Model[items].HpRateTimeCollection != null)
                        {
                            @Html.DropDownList("ddlHPRateTime", new SelectList
                  ((System.Collections.IEnumerable)Model
                 [items].HpRateTimeCollection, "id", "value"), new { @class 
                  = "ddlUserBank" })
                        }
                        </td>
                    }
                    else
                    {
                        <td class="tdBackground"></td>
                    }


                                           }
                }
            }
                </tbody>
             </table>
               </div>

Thanks in advance for help

Answer 1

In you success callback you need to handle the response and insert the recieved html into the page.

success: function (response) {
    $("#id_of_element_to_paste_response").html(response)
}

and change the type of request.

dataType: "html",

answer on comment. First you need check that the response returned from server. Use Fiddler or Firebug or something else.

If all work fine and partial view returns on client successfuly, you just need to edit your jQuery code.

 $(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)

       });
     });

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