Fill in the text boxes by selecting the dropdown in mvc
I want to fill in text boxes that are taking data from a database. When I select any value using the dropdown, I need to get the id from the dropdown and I call the function that populates @Html.EditorFor(model => model.taskName)
. The page will not change. How is this possible?
<div class="form-group">
@Html.LabelFor(model => model.jobID, "jobID", new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("jobID", String.Empty)
@Html.ValidationMessageFor(model => model.jobID)
</div>
</div>
<div> @Html.Partial("../Location/taskname") </div>
</div>
taskname.cshtml
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.taskName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.taskName)
@Html.ValidationMessageFor(model => model.taskName)
</div>
</div>
</div>
+1
source to share
1 answer
Make your dropdown like this:
@Html.DropDownList("jobID", null, new {@id="job"})
and the taskname textbox:
@Html.EditorFor(model => model.taskName, new {@id="taskname"})
do the following: write a jquery event for dropdown index change event and send ajax call to get task name against task id selected from dropdown:
$('select#job').change(function(){
var JobId =$(this).val();
// Send Ajax call and get Task name
var Url = 'http://example.com/Controller/Action/?jobid='+JobId ;
$.ajax({
url: Url ,
success: function(result) {
$('input#taskname').val(result);
},
error: function(error) {
alert(errorss);
}
});
});
+1
source to share