How to return Json data to a partial view

Question

I have an index page that uses a layout page. On the index page I have a dropdown and a div section for hosting partial views. I am doing it this way because I plan to have about 4 links and the 4 links will load different partial views.

         <div class="selectOption1" id="custNum">
               <label for="ddlCustomerNumber">Customer #:</label>
               <select id="ddlCustomerNumber" name="ddlCustomerNumber">
                 <option value="1001">1001</option>
                 <option value="1002">1002</option>
                 <option value="1003">1003</option>
                 <option value="1004">1004</option>    
               </select>
        </div>


        <div id="pageContent"></div>

In the script section of the html I am making an Ajax call that will fetch jason data and then bind the fields retrieved on the controls that exist in my loaded partial view. This simple means that in my partial view I have textboxes for customerfirstname,customerlastname and address.

         $('#ddlCustomerNumber').change(function () {         
                $.ajax({
                    url: '@Url.Action("PopulateTextBoxes", "Home")',
                    type: "GET",
                    data: {
                        "customerNumber": $(this).val(),
                        "Country": $("#divcountry").text().trim()
                    },
                    success: function (data) {
                        if (data != null) {
                            for (var x = 0; x < data.length; x++) {
                                $("#Customerfirstname").val(data[x].customerfirstname);
                                $("#Customerlastname").val(data[x].Customerlastname);
                                $("#Address").val(data[x].Address);                        
                            }
                        }
                    }
                });

            });

Here is the method that gets me the json data that I plan to bind to controls in my partial view.

              public ActionResult PopulateTextBoxes(Int32 customerId, string country)
                {
                    try
                    {
                        var relatedCustomerInfo = GetOtherCustomerInfo(customerId, country, sRadSelection);
                        return Json(relatedCustomerInfo, JsonRequestBehavior.AllowGet);
                    }
                    catch (Exception ex)
                    {
                        logger.Error(ex);
                        return View("Error");
                    }

                }

Question: I know I can return a partialview from my PopulateTextBoxes method but because I am already returning json this is not possible. How can I return this json data to my partial view.

Is `relatedCustomerInfo` a collection. Your `for (var x = 0; x < data.length; x++) ` suggests it is but then your repeatedly updating and overwriting the elements value - what is the point of this? (or do you have invalid html with multiple elements with `id="Customerfirstname"` etc)? — , May 20 '16 at 12:29
Actually that was a mistake. It is not a collection. It should just return one record. The loop is not necessary. You are correct — Baba, May 20 '16 at 12:30
Its unclear what your wanting to do. Why do you need to return both json and html? — , May 20 '16 at 12:32
It is not compulsory to return json. I just want to be able to return the data back to my partial view. I thought json was recommended. It was used as an example. — Baba, May 20 '16 at 12:33
Make your ajax call.Set relatedCustomerInfo and return it as a model to a partial view - return PartialView("~/views/ABC/XXX.cshtml", relatedCustomerInfo);.Then in your success section of the ajax call just bind the returned html to one of the controls — Denys Wessels, May 20 '16 at 12:34
So what is wrong with what your currently doing (once you correct the loop issue)? — , May 20 '16 at 12:34
I want to bind the data I receive from the Ajax call to the controls on my partial view. I think what Denis suggested is a good idea. — Baba, May 20 '16 at 12:42
Either json as your doing or returning a partial view is fine. — , May 20 '16 at 12:44
Thanks Stephen and Dennis. I think I will go for the option of returning a partial view. If I go the json way, I don't think I have a way of loading the partial view. — Baba, May 20 '16 at 12:45

score 0 · Accepted Answer · answered May 20 '16 at 12:50

Have a look at this link - How to load partial views in MVC using AJAX

Here's another example:

Java script:

$.get( '@Url.Action("PopulateTextBoxes","Home", new { customerId = Model.ID } )', function(data) {
    $('#outputContainer').html(data);
});

Controller:

public ActionResult PopulateTextBoxes(Int32 customerId, string country)
{
    try
    {
        var relatedCustomerInfo = GetOtherCustomerInfo(customerId, country, sRadSelection);
        return PartialView("~/Views/Home/_Partial.cshtml",relatedCustomerInfo);
    }
    catch (Exception ex)
    {
        logger.Error(ex);
        return View("Error");
    }
}

Might have to tweak this a little to get it working exactly the way you want to but it seems like you know MVC well enough to come right

Yes and thanks. In my own situation because I have this
, It will be $('#pageContent').html(data) — Baba, May 20 '16 at 12:56

How to return Json data to a partial view

1 Answers1

Linked