Update Partial View on Dropdown Selection

Question

User-173651909 posted

I'm using MVC5 and EF6 and I have this feature working in another page. Using the same code and making the required changes results in an error. I need to update a partial view based on the selection in a dropdownlist. Here's what I've got in my main view.

@model myproject.Infrastructure.projects

@{
    ViewBag.Title = "Create";
}
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>

<h2>Create</h2>
<div>
    @Html.DropDownList("CustomerID", "Select a customer")
</div>
<br />

<div id="target">
    @* Update form *@

</div>


@section Scripts {
    <script>
    $(document).ready(function () {
        $("#CustomerID").change(function (e) {

            var customer = { "CustomerID": $(this).val() };
            $.ajax({
                type: 'get',
                url: '@Url.Action("CreateProjectPartial")',
                contentType: 'application/json; charset=utf-8',
                dataType: 'html',
                data: { "CustomerID": $(this).val() },
                success: function (result) {
                    $("#target").html(result);
                },
                error: function (ex) {
                    alert("Error");
                }
            });

        });

    });
    </script>
}

The above runs the AJAX code based on the selection. The controller contains the following:

 [HttpGet]
        public PartialViewResult CreateProjectPartial(int id)
        {
       //     ViewBag.DateTime = System.DateTime.Now.ToString();
       var DateTime = System.DateTime.Now.ToString();
            var user = db.customers.Where(u => u.ID == id).Select(u => u.user);
            System.Diagnostics.Debug.WriteLine("ID Passed is: " + id);
            System.Diagnostics.Debug.WriteLine("DateTime is: " + DateTime);
            System.Diagnostics.Debug.WriteLine("useris: " + user);



            return PartialView("CreateProjectPartial", db.customers.Where(u => u.ID == id).Select(u => u.user));
        }

The code isn't hitting the controller method so I get no debugging information. If I specify "Index" as the actionurl then the partialview loads, so I'm not sure what's going on. Any ideas?

Thanks in advance
Adam

Answer 1

User475983607 posted

Let's start with the basics.  What is the error?  Have you tried using Developer Tools to debug?

I believe the following should match the ActionMethod parameter...

data: { "CustomerID": $(this).val() },

...and should be 

data: { "id": $(this).val() },

Answer 2

User-1596463 posted

Hi Adam-M,

You can use ajax.beginform in mvc to get result from a partial view. You can follow the link http://www.niceonecode.com/Q-A/DotNet/MVC/how-ajax_beginform-works-in-mvc-/20198

Take dropdown in Ajax.Beginform submit form through javascript onchange event of dropdownlist.

Answer 3

User-173651909 posted

Thanks for the response. It's hitting the controller and passing the correct value now but I still get an error. Using the Chrome Developer Tools (F12) I see the following error each time I make a request:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Also, on each selection the error function in the AJAX code is executed:

error: function (ex) {
                    alert("Error");
                }

This now works in part but I think the issue is with the values coming back from the controller. I think that's a different issue though. Thanks.

Answer 4

User475983607 posted

Thanks for the response. It's hitting the controller and passing the correct value now but I still get an error. Using the Chrome Developer Tools (F12) I see the following error each time I make a request:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Also, on each selection the error function in the AJAX code is executed:

This error commonly means the parameter name does not match the action method name, there is a problem with the route, or an error in the action method.  

Are you absolutely positive the action method is being invoked?  Have you placed a break point in the action method and verified?

I just noticed this... The content type is json but the data type is html.

 contentType: 'application/json; charset=utf-8',
 dataType: 'html',

Please take a few minutes to debug your code.