Populate TextBox based on DropDownList selection in AngularJS

Last Reply one month ago By dharmendr

Posted one month ago

how to bind  the textbox based on dropdownlist in MVC5 ?

$scope.GetAllMatress = function () {
       alert("matress");
 
       $http({
           method: "get",
           url: "http://localhost:53010/ViewInvoice/Get_AllMatress"
       }).then(function (response) {
 
           $scope.toughEntities1 = response.data;
         
       }, function () {
           alert("Error Occur");
       })
   };

 

       public JsonResult Get_AllMatress()
       {
           using (stronglass_toughEntities1 Obj = new toughEntities1())
           {
                Console.WriteLine("sdsd");
               List<matress_master> mat = Obj.matress_master.ToList();
               return Json(mat, JsonRequestBehavior.AllowGet);
 
 
           }
       }

 

Posted one month ago Modified on one month ago

Hi SUJAYS,

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

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public JsonResult GetCustomerDetails(string name)
    {
        using (TestEntities entities = new TestEntities())
        {
            Customer customer = entities.Customers.Where(x => x.Name == name).FirstOrDefault();
            return Json(customer, JsonRequestBehavior.AllowGet);
        }
    }
}

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
</head>
<body>
    <div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('MyApp', [])
            app.controller('MyController', function ($scope, $http, $window) {
                $scope.SetTextBox = function () {
                    var name = $('#ddlCustomers').find('option:selected').val();
                    var data = { "name": name };
                    var config = {
                        params: data,
                        headers: { 'Accept': 'application/json' }
                    };
                    $http.get("/Home/GetCustomerDetails", config).then(function (response) {
                        $scope.Id = response.data.CustomerId;
                        $scope.Country = response.data.Country;
                    }, function (response) {
                        alert(response.responseText);
                    });
                }
            });
        </script>
        <div ng-app="MyApp" ng-controller="MyController">
            <select id="ddlCustomers">
                <option value="">Select</option>
                <option value="John Hammond">John Hammond</option>
                <option value="Mudassar Khan">Mudassar Khan</option>
                <option value="Suzanne Mathews">Suzanne Mathews</option>
                <option value="Robert Schidner">Robert Schidner</option>
            </select>
            <input type="button" value="Get Details" ng-click="SetTextBox()" />
            <br />
            <br />
            Id :
            <input type="text" ng-model="Id" />
            <br />
            Country :
            <input type="text" ng-model="Country" />
        </div>
    </div>
</body>
</html>

Screenshot