How could I pull data from several db tables to automate data entry for user in ASP.NET MVC 5 application?

Question

I have a form in my ASP.NET MVC 5 application that is made up of several different entities that are stored in my database. I am trying to set it up so that, when a user types in the name of a particular entity (let's say a Shipper ), the fields in the form that pertain to that entity (eg the fields in the Shipper section) are automatically populated with that Shipper's data. Here is what I have tried:

I wrote a class to connect to the database that returns a dataset of Shipper data.

public class DbConnection
    {
        private string _connectionString = "the connection string";

        public DbConnection()
        {

        }

        public DataSet GetShipperData()
        {
            DataSet shipperData = new DataSet();
            try
            { 
                //TODO: replace command with stored procedure name
                using(SqlConnection dbConn = new SqlConnection(_connectionString))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter("select * from dbo.shipper", dbConn))
                    {
                        sda.Fill(shipperData);
                    }
                }

                return shipperData;

            }
            catch
            {
                return null;
            }

        }
    }
}

Here is the method I've written to get the shipper dataset in the controller for the form:

public string[] GetShipperData()
        {
            DbConnection conn = new DbConnection();
            var shipperData = conn.GetShipperData();
            List<Shipper> listOfShipperData = shipperData.Tables[0].AsEnumerable().Select(datarow => new Shipper { Name = datarow.Field<string>("Name") }).ToList();
            return listOfShipperData;
        }

Finally, here is the javascript code in the view where the form is located. I'm using jQuery to call the GetShipperData method in the controller. I have omitted the markup for brevity:

 $("#theShipperField").blur(function () {
        $.get('@Url.Action("GetShipperData")', function (data) {
            var shipperFields = document.getElementsByClassName('form-control shipper');
            $(shipperFields).attr("value", data);
        });
    });

The first error I'm getting is this: In the Shipper fields, I am getting this instead of the data I want: System.Collections.Generic.List1[appname.Models.Shipper] . I think it's because javascript obviously can't work with shipper data, so I need this to be in the form of strings. I'm unsure of how to do this. I would be open to doing this a completely different way, so any help is greatly appreciated. Please let me know if I can provide any additional information.

Answer 1

First: try use Entity Framework Having your db model in Entity framework I should create web api

    [System.Web.Http.Route("api/GetShippers")]
    [System.Web.Http.HttpGet]
    public IEnumerable<Shipper> GetShippers()
    {
        var shippers= unitOfWork.GetShippers();
        return shippers;
    }

After that in your js code

dataservice.js

var dataService = new function () {    
getShippers = function (callback) {
    $.getJSON(window.applicationBaseUrl + 'api/GetShippers', function (data) 
    {
        callback(data);
    });
    };
}

index.cshtml

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

      function DoSomething(shippersData) {console.log(shippersData);}

 </script>
}