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.

Please, debug it with your browser developer's tools (press F12) and try to find where is failing. Is changed callback executed? Is ajax succes callback executed? If we don't know where is failing is harder to discover the problem. — JotaBe, Jan 20 '14 at 11:58
changed callback is being executed and I am entering the action method. The trouble is I'm not sure returning a partial view from that action is the answer. — user3041439, Jan 20 '14 at 13:20

JotaBe · Accepted Answer · 2014-01-22T11:12:19.330

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.

edited Jan 22 '14 at 11:12

answered Jan 21 '14 at 10:04

JotaBe

38,030
8
98
117

You're welcome. If this worked for you, please, accept as answer, so that other people can see it. – JotaBe Jan 21 '14 at 14:04
It has gotten me further but not there yet. At least I now see some activity. BTW, did you mean $('#gridContent') instead of $("#results")? – user3041439 Jan 21 '14 at 14:05
I have amended the PopulateEmailAddressUI action method so that it returns my Index view. Since the EmailAddressesOfChosenClient property of Model is now populated, I expect to see a WebGrid. If I didn't amend the action method, I don't see anything after selecting a ClientID. But now I have the whole Index view showing up (again) at an offset inside the Index view, but with the WebGrid (not quite I was hoping for). I was hoping for just the WebGrid inside the one Index view. – user3041439 Jan 21 '14 at 14:29
To the first comment: yes, #gridContent (edited answer). To the second: why don't you open a new question, with the actions, views, and ajax, as they're and what you expect to get, and what you get. I can't figure it out from this comment. If you do, add a comment with a link to the question. I think taht's probably your answer. Delete it and create a new question, please. – JotaBe Jan 22 '14 at 11:16

score 0 · Answer 2 · answered Jan 21 '14 at 15:18

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.

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

2 Answers2