Populate TextBox based on DropDownList selection in ASP.Net MVC

Ainguahj

SOLVED CLOSED ACTIVE ANSWERED
User: Ainguahj
Posted: on Jul 26, 2018 12:47 AM
Forum: ASP.Net MVC
Answer: 1
Views: 30627
Sample Code: Download

Dear support,

What i want to achieve is this. I have a dropdown list and a text field. When users choose from the dropdown list, the selected item should be used to spool its corresponding record from a table and then output it in a text field.

For instance

Choose branch code: Dropdown menu with branch code like 001,002

Branch Name : Automatically, the branchname for the selected branchcode shows here

The view

<label class="FieldGHN">SBU</label>
        @Html.DropDownList("Branchcode", ViewBag.sbulistname as SelectList, "--Select SBU--", new { @id = "DropDown", @class = "SelectCtrlGHN", onchange = "return get_sbu(this)" })
        <br />


        <label class="FieldGH">Group Head</label>
        <input type="text" id="GrpHead" name="GrpHead" value="AutoGenerated" readonly class="PO_GH" /><br />

I am able to populate the dropdown list but i am not able to show the branchname as explained above

The javascript

<script>

    function get_sbu()
    {
        var selected_val = $('#DropDown').find(":selected").attr('value');
        //var selected_val = $('#DropDown').val();

       $.ajax({  //ajax call
        type: "POST",      //method == POST
        url: "/Home/selectSBU", //url to be called
        data: "id=" + selected_val, //data to be send
        success: function(data){
            $('#GrpHead').val(data); // here we will set a value of text box
           }
        });
    }

</script>

The controller - not sure what to do here

 public JsonResult selectSBU(string id)
        {
            
            return Json(id, JsonRequestBehavior.AllowGet);
        }

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Jul 26, 2018 03:54 AM
Report

Hi Ainguahj,

Check this example. Now please take its reference and correct your code.

Model

public class BranchModel
{
    public string Branchcode { get; set; }
    public string BranchName { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        ViewBag.Branches = PopulateBranches();
        return View();
    }

    public JsonResult selectSBU(string id)
    {
        List<BranchModel> branches = PopulateBranches();
        return Json(branches.Where(x => x.Branchcode == id), JsonRequestBehavior.AllowGet);
    }

    // Get Branch from Database.
    private static List<BranchModel> PopulateBranches()
    {
        List<BranchModel> branches = new List<BranchModel>();
        branches.Add(new BranchModel { Branchcode = "1", BranchName = "Branch 1" });
        branches.Add(new BranchModel { Branchcode = "2", BranchName = "Branch 2" });
        branches.Add(new BranchModel { Branchcode = "3", BranchName = "Branch 3" });
        branches.Add(new BranchModel { Branchcode = "4", BranchName = "Branch 4" });
        branches.Add(new BranchModel { Branchcode = "5", BranchName = "Branch 5" });
        return branches;
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <label class="FieldGHN">SBU</label>
        @Html.DropDownList("Branchcode", new SelectList(ViewBag.Branches, "Branchcode", "Branchcode"), "Select Branch", new { @id = "ddlBranches", @class = "SelectCtrlGHN", onchange = "return get_sbu(this)" })
        <label class="FieldGH">Group Head</label>
        <input type="text" id="txtBranchName" name="GrpHead" value="" readonly class="PO_GH" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            function get_sbu() {
                var selected_val = $('#ddlBranches').find(":selected").attr('value');
                $.ajax({
                    type: "POST",
                    url: "/Home/selectSBU",
                    data: "id=" + selected_val,
                    success: function (data) {
                        if (data.length > 0) {
                            $('#txtBranchName').val(data[0].BranchName);
                        }
                        else {
                            $('#txtBranchName').val('');
                        }
                    }
                });
            }
        </script>
    </div>
</body>
</html>

Screenshot

Populate TextBox based on DropDownList selection in ASP.Net MVC

Company

Explore

Follow us

Contact Us