ASP.Net MVC Dropdownlist List selected item values not displaying in the same View

Question

I am trying to display a dropdown list in my View and I am able to generate the list items in the dropdown list and once an item is selected, I am trying to gather the details of the selected item and display it in the same View.

In my controller, I am getting a hit for the selected item and my jquery correctly redirects the item id to the ActionMethod and populating the model and returning the View, but the data is not getting displayed in the View.

My Index View:

@model PWBMS.WebUI_1.Viewmodels.CustomerViewModel 

<div class="row">
    <h3 class="col-md-3">
        <i class="glyphicon glyphicon-user"></i>
        <strong>
            &nbsp;&nbsp;&nbsp;Customer&nbsp;
            <span id="cidd"> @Html.DropDownListFor(model => model.CustomerId, new SelectList(ViewBag.Customers, "CustomerId", "ShortName"), "Select Customers", htmlAttributes: new { @class = "form-control rtscustomtextboxmiddle", @id = "custId" })</span>
        </strong>
    </h3> 
</div>

  @if(Model != null)
  { 
     @Model.ShortName
  }

My jQuery to do the binding of the selected item in the dropdown list:

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {

            $("#cidd").change(function () {
                var y = $("#custId option:selected").val();
                $.ajax({
                    url: "@Url.Action("Index", "Customer3")",
                    method: "get",
                    async: "false",
                    data: { id: y }
                });
            });
        });
    </script> 
}

My Controller:

public ActionResult Index(int? id)
    {
        if(id is null)
        {
            ViewBag.Customers = db.Customers.OrderByDescending(o => o.CustomerId).ToList();
            return View();
        }
        var vm1 = db.Customers.SingleOrDefault(x => x.CustomerId == id);
        ViewBag.Customers = db.Customers.OrderByDescending(o => o.CustomerId).ToList();
        CustomerViewModel cvm = new CustomerViewModel
        {
            CustomerId = vm1.CustomerId,
            ShortName = vm1.ShortName
        };
        return View( cvm);
    }

The screenshot that are hitting the data: My second screenshot for model value

I hope this does not get closed for duplicate since i searched for a solution for my unique situation and I could not find.

I even tried placing the result set in a partial view, which is obtaining the correct result, but still not displaying it.

I know i am doing something wrong, but not sure what I am doing wrong. Please help me point out my error. Thanks.

You just have @Model.ShortName hanging out in that page with no container or anything. Are you sure this isn't just a layout issue? Check the source of the page, or pop it into the div with the other html, maybe stick it in that H3 somewhere — Nikki9696
– Nikki9696, Commented Jul 11, 2022 at 18:43
You are calling ajax that is returned through view but you never use ajax request response. if you watch to show it on the page, use ajax response or create a post action then submit the form returned view should have the populated model. — sairfan
– sairfan, Commented Jul 11, 2022 at 19:50
@Nikki9696, it doesnt matter if there is a container or not, it's a view page , so any elements should be rendered as HTML, even if it put as <h3>Hello World</h3>, it is not getting displayed — Ron
– Ron, Commented Jul 11, 2022 at 20:52
@sairfan I am not following you exactly with your explanation. Could you show some snippet please ? — Ron
– Ron, Commented Jul 11, 2022 at 20:53
In on change event comment ajax section in javascript and add this code, then let me know what happens document.location.href = '/controllerName/actionName/' + y; (add area name before controller name if there is any) — sairfan
– sairfan, Commented Jul 12, 2022 at 2:39

sairfan · Accepted Answer · 2022-07-12 17:04:57Z

Actually you are making an ajax request that you do not handle on view, there are two method to solve it, one simply post the form on change event or redirect to same view

document.location.href = '/controllerName/actionName/' + y;

If you really want to use ajax then update your code like below

<div class="result"></div>

$.ajax({
    url: "@Url.Action("Index", "Customer3")",
    method: "get",
    async: "false",
    data: { id: y }
})
.done(function(r) {
    $('.result').html(r.ShortName);
})

you also need to update action

    if(id.HasValue)
    {
        var vm1 = db.Customers.SingleOrDefault(x => x.CustomerId == id.Value);
        ViewBag.Customers = db.Customers.OrderByDescending(o => o.CustomerId).ToList();
        CustomerViewModel cvm = new CustomerViewModel
        {
            CustomerId = vm1.CustomerId,
            ShortName = vm1.ShortName
        };      
        
        return Json(cvm, JsonRequestBehavior.AllowGet);
    }
    else
    {
        ViewBag.Customers = db.Customers.OrderByDescending(o => o.CustomerId).ToList();
        return View();      
    }

Please note that things related to ViewBag will not work while using the Ajax request, above code is just to give you idea, if you also want to update those values just create a ViewModel accordingly and return as json.

Collectives™ on Stack Overflow

ASP.Net MVC Dropdownlist List selected item values not displaying in the same View

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related