how to populate textbox on selecting item from dropdownlist

athira k

9y2.9k.NET

I am new to MVC and I got stuck in doing a task that when I select an item from the drop down list the data corresponding to that item in drop down must be shown in the textbox below the dropdown list. There is a button just below the textbox and when hitting on the button it must redirect to edit page with the id same as in the selected item in drop down list. The problem is that the value in the drop down list is getting from another table called students. so when I select a student from drop down list, the fee of the student in another table called details ust ne listed in textbox, when clicking on the new button the id of the student want to pass and go to edit page and when any changes happends it must reflect it back. The dropdown list are performing in the Index action method and below all these the list of index appears.

controller

public async Task Index()

{

ViewBag.Id = new SelectList(db.Students, "ID", "FirstName");

return View(await db.Details.ToListAsync());

}

view

@model IEnumerable

@using (Html.BeginForm("Edit","Details", FormMethod.Post))

{

@Html.AntiForgeryToken()

Student Name

@Html.DropDownList("Id", null, "select", htmlAttributes: new { @class = "form-control" })

Fee

@Html.Editor("Fee", new { htmlAttributes = new { @class = "form-control" } })

}

....

can anyone please help me to find the solution that how can I get data in textbox and to pass the Id ??

17 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ramesh Barik9y ago
Accepted answer
Ok.

In view give a id to that textbox.
Ex: @Html.Editor("Fee", new { htmlAttributes = new { @class = "form-control" , @id="txtFee"} })

inside : success function of ajax.

var value=data.data;
$('#txtFee').val(value);
try this.
Ramesh Barik9y ago
Refer these links.

https://forums.asp.net/t/1922349.aspx?Posting+data+from+view+to+controller+MVC
https://www.codeproject.com/Articles/639709/Getting-Data-From-View-to-Controller-in-MVC
athira k9y ago
so how can I move to edit page through button??
Ramesh Barik9y ago
@using (@Html.BeginForm("Edit", "AgentCashInHand", FormMethod.Post))

It says that the form will post to Edit action method of AgentCashInHand controller as you have written FormMethod.Post.
athira k9y ago
I got the answer in the textbox but when I click on the button Why it that it is not moving to the edit action method ?? Have given @using (@Html.BeginForm("Edit", "AgentCashInHand", FormMethod.Post)) ??
Ramesh Barik9y ago
when I give alert(value); it is showing Undefined , why is that ? but var vdata = data; contains value.
As you are returing the value in fee properties from the controlller action method.
So check in debugger mode in which object data is available.
It may be in data.fee.
athira k9y ago
okay when I give vdata instead of value it works but more thing is ther that when clicking on the new button it is not moving to the edit page ? why is that ?I have given @using (@Html.BeginForm("Edit", "AgentCashInHand", FormMethod.Post)) but why is that ? need to get the name of the student in the text box there??
athira k9y ago
when I give alert(value); it is showing Undefined , why is that ? but var vdata = data; contains value
athira k9y ago
alert(when I give alert(data); I am getting the value but it is not displaying in the text box ??and no alert by giving alert($("#Fee").val(data.d));
athira k9y ago
public async Task Index()
{
ViewData["student_name"] = new SelectList(db.Students, "ID", "FirstName");
return View(db.Detail.ToList());
}

[HttpPost]
public JsonResult Action(int ID)
{
var query = from c in db.Details
where c.StudentId == ID
select c.Fee;
return Json(query, JsonRequestBehavior.AllowGet);
}

view

here in alert Iam getting the Id of Item selected from drop down list
Ramesh Barik9y ago
Can u share the controller action method.
athira k9y ago
but i am not getting value in data

Ramesh Barik9y ago

 var vdata = data;

1. Is your controller action method called from ajax.

2. If yes, then Check in dubugger mode if the result is in data object.

3. if Yes, Then find in which properties the result is bind in data object.

Try use this code to bind. $("#Fee").val(data.d);

athira k9y ago
iam not able to get the fee in the text box in the alert I am getting the Id of the drop down list item but how can I get the fee and display it in the textbox
Ramesh Barik9y ago
Yes, Your way is also correct.
What is the issue??

athira k9y ago

sorry I didnt get the way that you are telling this is quit a bit complicated for me that the usage of jquery ajax function . but I have written a code but there is also problem arising

view page

Ramesh Barik9y ago
You can do a ajax call on dropdown change event.
Inside this method get the dropdownlist selected value
ie let say StudentID. Once you get the student id then u can call a Action method through this ajax call and can return the fee details from another table by querying.

Once you get the data from the action method that can refelct on that ajax method "data" object. Then you need to get the textbox id and bind the value in that textBox in side sccuess method of ajax..

Ex :

function GetFeeDetails()
{
var studentID = $('#ddlStudnt').val();
$.ajax
({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "YouController/ActionMethod",
data: "{StudentID: '" + studentID + "'}",
dataType: "json",
async: false,
success: function (data) {

$('#Fee').val(data.d);
},
error: function (x, e) {

}
});
}

Call this ajax method on dropdownlist change event.

try this it may help you.