locked
Update Partial View on Dropdown Selection RRS feed

  • 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

    Thursday, November 12, 2015 5:24 AM

Answers

  • 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() },

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 12, 2015 7:19 AM

All replies

  • 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() },

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 12, 2015 7:19 AM
  • 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.

    Thursday, November 12, 2015 8:06 AM
  • 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.

    Thursday, November 12, 2015 8:41 AM
  • 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.

    Thursday, November 12, 2015 9:34 AM