1

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.

9
  • 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)?
    – user3559349
    May 20, 2016 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, 2016 at 12:30
  • Its unclear what your wanting to do. Why do you need to return both json and html?
    – user3559349
    May 20, 2016 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, 2016 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 May 20, 2016 at 12:34

1 Answer 1

0

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

1
  • Yes and thanks. In my own situation because I have this <div id="pageContent"></div>, It will be $('#pageContent').html(data)
    – Baba
    May 20, 2016 at 12:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.