Populating textbox with data based on dropdown list selection (onChange)

ajax asp.net-mvc-2 c# entity-framework

Question

I am building a website using ASP.NET MVC and entity framework. I have a DB table with Country info:

CountryID int;
ShortName nvarchar;
CountryCode nvarchar;

In my View I have:

<div class="editor-field"><%: Html.DropDownListFor(model => model.address.CountryID, Model.countriesList, "<--Select Country-->") %></div>
<div class="display-field"><%: Html.TextBoxFor(m => m.phone.CountryCode)%>></div>

The list I pass onto the view is:

countriesList = new SelectList(countries, "CountryID", "ShortName");

Update The javascript code:

<script src="/Scripts/jquery-1.4.1.min.js" language="javascript" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function()
{
    $("#address.CountryID").change(function()
    {
        $.get("/PersonalInfo/GetCountryCode", $(this).val(), function(data)
        {
            $("#phone.CountryCode").val(data);
        });
    });
});

And the controller method:

public ActionResult GetCountryCode(int id)
    { 
        Country c = personalInfoRepository.GetUserCountryByID(id);
        string countryCode = c.PhoneCode;
        return Content(countryCode);
    }
</script>

What I want to do is to populate the display field with the corresponding CountryCode every time the user selects a different country from the dropdown. I understand ajax can be used to achieve this but unfortunatelly I have no experience with it. I would appreciate any help with the code or some links to easy enough tutorials for beginners.

Would it be possible to do it without posting back to the server if I passed a countryCodeList along the countriesList?

1
1
8/30/2011 1:38:32 PM

Fastest Entity Framework Extensions

Bulk Insert
Bulk Delete
Bulk Update
Bulk Merge

Accepted Answer

Here is a great tutorial with 3 different methods for creating cascading dropdowns with ASP.NET MVC - http://stephenwalther.com/blog/archive/2008/09/07/asp-net-mvc-tip-41-creating-cascading-dropdown-lists-with-ajax.aspx

The concept for populating a textbox will be similar. First of all you will need a controller action that will return the correct country code for a given country:

public ActionResult GetCountryCode(int countryId)
{
    //logic to find country code goes here
    string countryCode = "1";
    return Content(countryCode);
}

Now you will need some javascript to bind to the change event of your country dropdown and call your controller action via ajax. I recommend using jquery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#address_CountryID").change(function()
        {
            $.get("/Countries/GetCountryCode", $(this).val(), function(data)
            {
                $("#phone_CountryCode").val(data);
            });
        });
    });
</script>
2
8/30/2011 2:16:05 PM

Related Questions

Problem populating dropdown boxes in an ASP.NET MVC 3 Application

I would recommend you working with view models and avoid using any ...ViewBag.... So you start by defining a view model:...public class AlbumViewModel { public string GenreId { get; set; } public IEnumerable<Genre> Genres { get; set; } public string ArtistId { get; set; } public IEnumerable<Artist> Artists { get; set; } public...
.net asp.net-mvc-3 c# drop-down-menu entity-framework
asked by Darin Dimitrov

Entity Framework options to map list of strings or list of int (List<string>)

Although I do not like to answer my own question, but here is what solved my problem:...After I found this link about ...Complex Types... I tried several implementations, and after some headache I ended up with this....The List values get stored as a string on the table directly, so it's not required to perform several joins in order to get the lis...
entity-framework list mapping orm
asked by Bernhard Kircher

Populating multiselect list with data MVC 3 .NET

Use a view model that is adapted to the requirements of your view:...public class PriceViewModel { public int[] SelectedPriceIds { get; set; } public IEnumerable<SelectListItem> Prices { get; set; } } ...A ListBoxFor requires 2 properties on your view model:...A collection property of a primitive type (...string[]..., ...id[]..., ...Guid[]....
asp.net asp.net-mvc c# entity-framework sql-server
asked by Darin Dimitrov

MVC 4 Simple Populate DropDown from database model

You could design a view model:...public class MyViewModel { public Boxer Boxer { get; set; } public IEnumerable<SelectListItem> WeightCategories { get; set; } } ...and then have your controller action populate and pass this view model to the view:...public ActionResult Edit(int id) { var model = new MyViewModel(); using (var db = ne...
asp.net-mvc-4 c# entity-framework
asked by Darin Dimitrov

ASP.NET MVC 4 Want to populate dropdown list from database

First Create a BO list for Dropdownlist in VIEW...@{ var Bolst= Model.BO.Select(cl => new SelectListItem { Value = cl.Value.ToString(), Text = cl.Text== null ? String.Empty : cl.Text }); } @(Html.DropDownList("sampleDropdown", BOlst, "-----Select-----")) ...In Controller:... return View(BOlst); // why use...
asp.net-mvc-4 entity-framework html-select linq
asked by Bhupendra Shukla

MVC/JSON Cascading Dropdown List Displays [object Object]

Replace this line ...items += "<option value=\"" + item + "\">" + item + "</option>";...By ...items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";...Regarding your code. As you can retrieve object which is good but you need to access to properties. I hope it will help you.
asp.net-mvc-5 c# entity-framework-6 jquery json
asked by user3383479

Fill textbox on dropdown selection in mvc entity framework

You may change your select list parameter from "code" to "username" and use some jQuery code on the view. I have created a simple example for you, please have a look:...In my Controller:...List<temp> tempLIst = new List<temp>(); tempLIst.Add(new temp() { Id = 1, code = "111", name = "first", username = "user first" }); tempLIst.Add(new temp() { Id ...
asp.net-mvc c# entity-framework
asked by Subhash

Pass List data along with ViewModel to view and populate list data in drop down

Since ...DropDownList... uses ...IEnumerable<SelectListItem>..., change the view model to...public class CompanyProfileModelView { public Company Company { get; set; } public SelectList CategoryList { get; set; } } ...and assuming ...Company... model contains...[Display(Name="Category")] public int? CategoryType { get; set; } ...Controller...[...
asp.net-mvc asp.net-mvc-viewmodel c# entity-framework
asked by user3559349

Update partial view from drop down list selection using MVC 5 EF 6

You could retrieve the data from the server and construct/change the DOM via JQuery, or you could use a partial view that is appropriate for each question type, attaching an event handler to the ...change... event of the drop-down via JQuery....One approach, loading partial views:...yourNamespace.yourScript.js file (include the file in your main vi...
asp.net-mvc c# entity-framework
asked by bcr

ASP.Net Select a Dropdown option (in View) based on a value returned by EF model

Since you already have ...Model.CompanyTypeId..., you can easily use ...Html.DropDownListFor.... You don't set value on the HTML attributes....Controller...public ActionResult Index() { var model = new TestModel { CompanyTypeId = 1 }; ViewBag.Types = new List<SelectListItem> { new SelectListItem { Value = "-1", ...
asp.net-mvc-5 c# entity-framework-6
asked by Tane Yoroshi

Fastest Entity Framework Extensions

Bulk Insert
Bulk Delete
Bulk Update
Bulk Merge
View more on Stack Overflow

Prime Library

Performance

Expression Evaluator

More Projects...

Related

Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow