I have a requirement which I need to display price based on drop down selection

Question

I have a requirement which I need to display price based on drop down selection. and that price comes from same db, when I click one Test from dropdown then respected price of that test should display in textbox.The value is binding in textbox after selecting option from dropdown also it is displaying after taking span but not displaying on textbox, please tell me solution because i want to display it only on textbox . here is Error Image

Model class

 public partial class TwoDDiagnostic
{
    public int TwoD_ID { get; set; }
    public string TwoDDiagnostic_Name { get; set; }
    public string TwoD_Price { get; set; }
    public Nullable<System.DateTime> TwoD_Date { get; set; }
    public Nullable<int> centr_Id { get; set; }
}

Controller

 IEnumerable<SelectListItem> selectList2D = from twod in db.TwoDDiagnostics
                                                   where twod.centr_Id == Id
                                                   select new SelectListItem()
                                                   {
                                                       Text = twod.TwoDDiagnostic_Name,
                                                       Value = twod.TwoDDiagnostic_Name
                                                   };
        var lasttwoD = db.TwoDDiagnostics.Where(x => x.centr_Id == Id).OrderByDescending(c => c.TwoD_ID).Take(1).FirstOrDefault();
        if (lasttwoD == null)
        {
            ViewBag.twoDID = new SelectList(selectList2D, "Value", "Text");

            model.ViewModel_TwoDDiagnostic = null;
            return View(model);
        }
        string twodname = (from sub in db.TwoDDiagnostics where sub.TwoD_ID == lasttwoD.TwoD_ID select sub.TwoDDiagnostic_Name).First();
        ViewBag.twoDID = new SelectList(selectList2D, "Value", "Text", twodname);

View

 <div class="form-inline">
                                            <label for="inputEmail1" class=" col-lg-2 col-sm-4 control-label">2D Diagnostic Services</label>
                                            <div class="col-lg-5">
                                                @Html.DropDownListFor(model => model.PTwoDDiagnostic_name, (SelectList)ViewBag.twoDID, "- Select 2D Diagnostics -", new { @class = "form-control ", @id = "twopID", @onchange = "fill()" })
                                               </div>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <div class="col-lg-3">
                                                @*<span class="form-control" id="twoprice"></span>*@
                                                @Html.TextBoxFor(model => model.PTwoDDiagnostic_price, new { @class = "form-control ", @id = "twoprice" , @onchange = "fill()"})


                                            </div>
                                        </div>

here is json method

public JsonResult GetTwoDPrice()
    {
        AllViewModel model = new AllViewModel();
        Session["Two_D"] = model.TwoD_ID;
        var id = (int)Session["Two_D"];
        if (!string.IsNullOrEmpty(Session["Two_D"].ToString()))
        {
            //int Id = (int)Session["Two_D"];
            var Record = (from patient in db.TwoDDiagnostics
                          where patient.TwoD_ID == id
                          select new 
                          {
                              TwoD_ID = patient.TwoD_ID,
                              TwoD_Price = patient.TwoD_Price
                          }).FirstOrDefault();
            return Json(Record, JsonRequestBehavior.AllowGet);
        }

        return Json("", JsonRequestBehavior.AllowGet);

    }

here is a script

 <script type="text/javascript">
    $("#twopID").on('change', function (event) {

            $.ajax({
                url: "@Url.Action("GetTwoDPrice", "Center")",
            type: "Get",   
            success: function (data) {
                debugger;
                console.log(data.TwoD_Price);
             $('#twoprice').text(data.TwoD_Price);
            }
        });
        });
    </script>

Answer 1

You need to use the jquery val() method to set the Value for the TextBox. If you use text() method, it sets the innerText of the input element (in between the <input> and </input> HTML tags) which is applicable only for HTML Elements like span, label, h, div, etc.

$('#twoprice').val(data.TwoD_Price);