CODEWITHSUNDEEP
c#asp.net-mvc
resthere
resthere

Reputation: 129

How to get selected value from @Html.DropDownList

The project is .Net framework3.5 and MVC framework 1.0

In my view I have a dropdown

@Html.DropDownList("prodlist",@Model.products)

an "Add Product" button 

 <td> <input type ="button" name ="Add Product" value ="Add Product" id="Button1" /> </td>

and a textbox @Html.TextBox ("prodselected")

When I click the "Add Product" button I should be able to display the value of the item selected on Dropdownlist in the textbox "prodselected"

Please can someone let me know how to do it. If there is change needed in the existing code please suggest.

The view is:

<%@ Page Language="C#"     Inherits="System.Web.Mvc.ViewPage<MockBDPWorkflowTestApp.ViewModels.WorkFlowTestViewModel>" %>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

 <head id="Head1" runat="server">

<title>Submission</title>

 </head>

<body>

  <div>

    <% using (Html.BeginForm())
      {
        %>
        <div>
            <table>
             <tr>
              <td>
               <div id="SID">
                   <table id="tblID" cellpadding ="0" cellspacing ="0" border="1">
                    <tr>
                        <td width ="50%"> <label for="Process Inastance Id"> Process Inastance Id: </label> &nbsp;&nbsp; <%[email protected]("pInstance",@Model.processInstance) %></td>
                        <td width ="50%"> <label for ="Mail Id">Mail Id: </label> &nbsp;&nbsp; <%[email protected]("mail",@Model.mail) %> </td>
                    </tr>
                </table>
            </div>
            <br /><br />
            <table id="tblDet" cellpadding ="0" cellspacing ="0" >
                <tr>
                    <td width="50%"> <label for="Submission Number"> Submission Number: </label> &nbsp;&nbsp; <%[email protected]("sNo") %></td>
                    <td width ="50%"> <label for ="Name Insured">Name Insured: </label> &nbsp;&nbsp; <%[email protected]("nameInsured") %> </td>
                </tr>
                <tr>
                    <td width="50%"> <label for="Broker Code"> Broker Code: </label> &nbsp;&nbsp; <%[email protected]("brokerCode") %></td>
                    <td width ="50%"> <label for ="Broker Name">Broker Name: </label> &nbsp;&nbsp; <%[email protected]("brokerName") %> </td>
                </tr>
                 <tr>
                    <td width="50%"> <label for="Product Code"> Product Code: </label> &nbsp;&nbsp; <%[email protected]("prodlist",@Model.products)%></td>
                     <td> <input type ="button" name ="Add Product" value ="Add Product" id="Button1" /> </td>
                </tr>
                <tr>
                    <td> <label for="Product Code"> Product Code Selected: </label> &nbsp;&nbsp; <%[email protected] ("prodselected")%></td>
                    <td> <input type ="submit"  value ="Submit Submission"  /> </td>
                </tr>
            </table>
         </td>
        </tr>
       </table>
    </div>
<% } %>
</div>

Controller is:

namespace MockBDPWorkflowTestApp.Controllers
{
    public class WorkFlowTestController : Controller
    {
        //
        // GET: /WorkFlowTest/

        public ActionResult OpenSubmission(string processId, string mailId)
        {
            var SubmissionModelView = new MockBDPWorkflowTestApp.ViewModels.WorkFlowTestViewModel{processInstance =processId,  mail =mailId} ;
            SubmissionModelView.products = new List<SelectListItem>();
            SubmissionModelView.products.Add(new SelectListItem { Text = "GL", Value = "0", Selected = true });
            SubmissionModelView.products.Add(new SelectListItem { Text = "Property", Value = "1" });
            SubmissionModelView.products.Add(new SelectListItem { Text = "Package", Value = "2" });
            SubmissionModelView.products.Add(new SelectListItem { Text = "Island Marine", Value = "3" });
            return View("Submission", SubmissionModelView);

        }
    }
}

The ViewModel is:

   namespace MockBDPWorkflowTestApp.ViewModels
   {

      public class WorkFlowTestViewModel
      {
          public string processInstance { get; set; }
          public string mail { get; set; }
          public List<SelectListItem> products;
       }
   }

To the view I added the jquery function as below: 

 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MockBDPWorkflowTestApp.ViewModels.WorkFlowTestViewModel>"     %>
<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#Button1').click(function() {
        $('#prodlist').val($('#prodselected').val());
    });
  });
</script>

There is no problem with the function but the prodlist does not show any value instead the alert gives me some junk jquery : I also tried this: $('#prodlist option:selected').text; but this does not have selected value from prodlist too, and instead the alert gives me some junk jquery .

Upvotes: 0

Views: 6722

Answers (2)

buneShot
buneShot

Reputation: 33

I also tried this: $('#prodlist option:selected').text; but this does not have selected value from prodlist too, and instead the alert gives me some junk jquery

Try using

var selectedValue = $("#selectList :selected").val();

Upvotes: 0

super
super

Reputation: 2328

Try this:

Create a property in viewmodel to store the selected value from the dropdownlist

Model

public class WorkFlowTestViewModel
{
    public string processInstance { get; set; }
    public string mail { get; set; }
    public int product { get; set; }
    public List<SelectListItem> products;
}

View

<td>
    <label for="Product Code">Product Code: </label>
    @Html.DropDownListFor(m => m.product, Model.products)</td>
<td>

Controller

[HttpPost]
public ActionResult OpenSubmission(WorkFlowTestViewModel model)
{
    //model.product is your dropdown value
    //your codegoes here
}

Here is the fiddle

Upvotes: 5

Related Questions