How to populate a textbox based on dropdown selection in MVC..?

Question

0.00/5 (No votes)

See more:

Hi I have created a table and connected it to MVC project through ADO.NET entity.
After connecting I added the controller for the entity and it creates a set of cshtml files in VIEW folder in MVC project.
But now What I need is to create a dropdownlist and textbox.
I created the dropdownlist in a cshtml file and also wriiten the logic for it in the CONTROLLER.
I can also create TEXTBOXES,but i'm facing the problem of poulating TEXTBOX based on the dropdownlist selection.

My Model auto generated by VS 2012 is

C#

public partial class Plan_S

   {

       public int PlanId_PK { get; set; }
       public string PlanNames { get; set; }
       public string Hours { get; set; }
   }

My Controller for displaying dropdownlist is
`

C#

public class dropdownController : Controller
   {


       private PivotEntities db = new PivotEntities();

       //
       // GET: /dropdown/

       public ActionResult Index()
       {
           ViewBag.plannames = new SelectList(db.Plan_S, "PlanId_PK", "PlanNames");

           return View();
       }

       protected override void Dispose(bool disposing)
       {
           db.Dispose();
           base.Dispose(disposing);
       }
       public ActionResult ddl()
       {
           return View(new Plan_S());
       }

   }`

My view.cshtml for displaying dropdownlist is

`

Razor

@model Pivot.Models.Plan_S
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


<div>

    @Html.DropDownList("PlanNames", "--select--")

</div>

`

Now When I select an item in the dropdownlist, it should automatically populate the corresponding value in the table.
Here in my code, Plan_S table is autogenrated as Plan_S MODEL Class. But in Database I have set of values for these columns in table.

eg..) PlanId_PK | PlanNames | Hours
1 Plan1 1hrs
2 Plan2 2hrs
3 Plan3 3hrs

Here in this Plan_S table,

PlanNames column is populated in the DROPDOWNLIST,
When I select the Plan1 in DDL it should populate the texbox as 1hrs

When I select the Plan2 in DDL it should populate the textbox as 2hrs.

This is the logic i need and I can do this in asp webforms but it is tricky in MVC.

I think that Jquery is needed for it.......

Please help me, I had spent hours in finding this logic....

Thanks in advance...

C#

<pre lang="c#">

Posted 29-May-13 3:04am

Rajesh_DotNet

Updated 30-May-16 1:52am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jameel VM · Accepted Answer · 2013-05-29T05:34:00

//You can do it by Sending an Ajax Request by using jQuery when dropdown change

JavaScript

jQuery(document).ready(function(){
  $("#YourDropDownId").change(function() {
     var ServiceUrl ="/YourController/Action?id=" + id;
                var content = '';
                $.support.cors = true;
                $.ajax({
                    type: 'GET',
                    url: ServiceUrl,
                    async: true,
                    cache: false,
                    crossDomain: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    error: function (xhr, err) {
                    },
                    success: function (result, status) {
                      $('#yourTextId').val(result.Value);
                    }
                });
  });
});

//Your Action Result

C#

[HttpGet]
        public ActionResult Action(int id)
        {
          
//do the logic for taking the value for textbox
                var result = new { Value = textboxValue };
                return Json(result, JsonRequestBehavior.AllowGet);
            }

Hope this helps

Rajesh_DotNet · Accepted Answer · 2013-05-31T01:07:00

Thanks Jameel Moideen..:)

I used the below script for filling the corresponding textboxes in my code....
Also I did Editing the textboxes and saving it to the database..

C#

$("#editbutton").click(function () {
            $("#ddl").hide();
            $(".editplanfield").show();
            $("#editlabel").show();
            $("#plannames").show();
            $("#deletefield").show();
            // Request plan of selected id from server
            $.getJSON('@Url.Action("GetPlan")', {planId: $("[name='PlanNames']").val() }, function (plan) {
            // Fill the fields according to the Jsondata we requested
            $("#planid").val(plan["PlanId_PK"]);
            $("#plannames").val(plan["PlanNames"]);
            $("#planHours").val(plan["Hours"]);
            //$("#plancost").val(plan["PlanCost"]);
        });
        });


        $("#savebutton").click(function () {
            
            // Parse the plan from fields
            var plan = new Object();
            
            plan.PlanId_PK = $("#planid").val();
            plan.PlanNames = $("#plannames").val();
            plan.Hours = $("#planHours").val();
           
            //plan.PlanCost = $("#plancost").val()
            // Post it to server
            $.ajax({
                type: "POST", url: "@Url.Action("UpdatePlan")",
            success: function (result) {
                //Postback success
                $(".editplanfield").hide();
                $("#ddl").show();
            },
            data: plan,
            accept: 'application/json'
        });
        });

Now I need is i have added a delete button and when i click this the selected DDL item and corresponding textbox values in the database should be deleted....Please advise on that issue...Thanks in advance...:)

How to populate a textbox based on dropdown selection in MVC..?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0