Trying to Display Dynamic WebGrids Based On DropDownList Selection - ASP.Net MVC4

Question

My Index view has a populated DropDownList of ClientIDs. My intention is to dynamically display a WebGrid of email addresses when one of the ClientIDs is chosen. Using the following jQuery code, I am successfully going to a controller action called PopulateEmailAddressUI.

jQuery(document).ready(function () {
    $("#MeditechDropDown").change(function () {
        var id = $(this).find(":selected").val()
        var clientID = { "clientID": id }
        $.ajax({
            url: "/Home/PopulateEmailAddressUI",
            data: JSON.stringify(clientID), // Send value of the drop down change of option
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function (response) {
                $('#gridContent').load()
            }
        });
    });
});

My controller action looks like:

[HttpPost]
public ActionResult PopulateEmailAddressUI(string clientID)
{
    _clientModel = InitialiseBarClientsModel();

    _clientModel.FindEmailAddresses(from client in eFormsDB.BAR_Clients where client.ClientId == clientID select client);

    return PartialView("_EmailAddressGrid", _clientModel);
}

My _EmailAddressGrid partial view looks like:

@model BarClients.Models.BarClientsViewModel

@{
    var grid = new WebGrid(Model.EmailAddressesOfChosenClient, ajaxUpdateContainerId: "gridContent");
}

    div id="gridContent"
    @grid.GetHtml()  
    /div (arrows omitted).

The trouble I am having with this approach is no WebGrid ever shows up. If I look at page source, all I see is the Index view with ClientIDs but no element with div id of gridContent.

What change do I need to make my approach so that I can have different WebGrids dynamically display every time a ClientID is selected from the DropDownList?

Many thanks.

Answer 1

Your code is right, but you've forgotten to use the response. Check this code:

 success: function (response) {
   $('#gridContent').load()
 }

The line inside the function is doing nothing... and you're not using the response.

Replace it with this:

 success: function(html) {
   $("#gridContent").html(html);
 }

You can use this code, or any of the DOM Replacement or DOM Insertion, Inside or whatever.

It's also advisable to include the parameter dataType:'html' to the jquery ajax call, to indicate that you're expecting html as response. (NOTE: I've called the function parameter html to indicate the raw response is html, but you can give it the name you like).

You should also add an error handler to your ajax invocation. You can do it globally with $.ajaxSetup(). In this way, if something goes wrong with the communications or the server, you'll get some feedback.

Answer 2

Hi here is my complete working solution.

Index view looks like the following:

@model BarClients.Models.BarClientsViewModel

@{
    ViewBag.Title = "Index";
}

(many of the items for the Index view deleted here but Partial shown below).

@{Html.RenderAction("EmailAddressGrid", "Home");}

My Partial view _EmailAddressGrid.cshtml looks like the below:

@model BarClients.Models.BarClientsViewModel

@{
    WebGrid grid = null;
    if (Model.EmailAddressesOfChosenClient.Count<string>() != 0)
    {
        grid = new WebGrid(Model.EmailAddressesOfChosenClient, ajaxUpdateContainerId: "gridContent");
    }
}

div id="gridContent" (arrows omitted)
@{ if (grid != null)
   {
      @grid.GetHtml()  //work to be done here
   }
}
div (arrows ommitted)

My two controller actions are as follows:

[HttpPost]
public ActionResult PopulateEmailAddressUI(string clientID)
{
    _clientModel = InitialiseBarClientsModel();

    _clientModel.FindEmailAddresses(from client in eFormsDB.BAR_Clients where client.ClientId == clientID select client);

    return PartialView("~/Views/Shared/_EmailAddressGrid.cshtml", _clientModel);
}

public ActionResult EmailAddressGrid()
{
   _clientModel = InitialiseBarClientsModel();
   return PartialView("~/Views/Shared/_EmailAddressGrid.cshtml", _clientModel);
}

My jQuery function (working thanks to Jotabe) is as follows:

jQuery(document).ready(function () {
    $("#MeditechDropDown").change(function () {
        var id = $(this).find(":selected").val()
        var clientID = { "clientID": id }
        $.ajax({
            url: "/Home/PopulateEmailAddressUI",
            data: JSON.stringify(clientID), // Send value of the drop down change of option
            type: 'POST',
            datatype: 'html',
            contentType: 'application/json; charset=utf-8',
            success: function (response) {
                $('#gridContent').html(response)
            }
        });
    });
});

JotaBe's hints and some other web research got me here. I now get dynamically changing WebGrids on the Index view based on ClientIDs selected or reselected from my DropDownList in the Index view.