Question

Requirment: I have a drop down and a table on my cshtml page. The drop down displays a list of vendors and the details corresponding to selected vendor are displayed in table. I am submitting the form using jquery when the value of the drop down changes.

Problem: How to cath selected value of drop down in controller?

Code:

@Html.DropDownList("VendorList", new SelectList(Model.vendorList, "vendorId", "vendorName"))

@using (Html.BeginForm("VendorDetails", "VendorLookUp", FormMethod.Post, new { id = "vendorDetailsForm" }))
{
    <div class="margin-10-top" >
      <table id= "VendorDetail" class="VendorDetail">

        ........ details of vendor.........

      </table>
   </div>
}

<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
    $('#VendorList').change(function () {
        $('#vendorDetailsForm').submit();
    });
}); 
</script>

the code in my controller is:

    [AcceptVerbs("POST")]
    public ActionResult SearchResult(FormCollection collection)
    {
        try
        {
            string vendorName = collection["searchItem"].ToString();

            vendorName = vendorName.Trim();
            List<Vendor> vendorList = Queries.compiledVendorQuery(dbContext, vendorName).ToList<Vendor>();

            if(vendorList.Count() == 0)
                return View("EmptySearch");

            Vendor selectedVendor = vendorList[0];

            VendorDetails vendorDeatils = Queries.compiledVendorDetailsQuery(dbContext, selectedVendor.vendorId.ToString()).FirstOrDefault();

            VendorResult vendorResult = new VendorResult();
            vendorResult.vendorList = vendorList;
            vendorResult.vendorDetails = vendorDeatils;

            return View(vendorResult);
        }
        catch (Exception e)
        {
            return View("EmptySearch");
        }
    }

    [AcceptVerbs("POST")]
    public ActionResult VendorDetails(FormCollection collection)
    {
        **here comes the control after postback
        require value of the selected item** 

        Vendor selectedVendor = ?? 

        VendorDetails vendorDeatils = Queries.compiledVendorDetailsQuery(dbContext, selectedVendor.vendorId.ToString()).FirstOrDefault();

        VendorResult vendorResult = new VendorResult();
        vendorResult.vendorDetails = vendorDeatils;

        return View(vendorResult);
    }

Answer 1

Since you’re not really using the FormCollection, you could just use an int (or whatever the ID is on your model) in your action method:

[HttpPost]
public ActionResult VendorDetails(int vendorId = 0)
{
    Vendor selectedVendor = // Load from your data source using vendorId
    ...  // Do the rest of your work
}

In your HTML, move your @Html.DropDownListFor() into your form, rename it to the argument name, then submit the form as normal. Since the display doesn’t seem to have any affect on what gets sent to the server, I would pull this out and just leave the @Html.DropDownListFor() in the form:

@using (Html.BeginForm("VendorDetails", "VendorLookUp", FormMethod.Post, new { id = "vendorDetailsForm" }))     
{
    @Html.DropDownList("vendorId", new SelectList(Model.vendorList, "vendorId", "vendorName"))
}

<div class="margin-10-top" >
    <table id= "VendorDetail" class="VendorDetail">
        ........ details of vendor.........
    </table>
</div>

<script type='text/javascript'>
    $(document).ready(function () {        
        $('#vendorId').change(function () {
            $('#vendorDetailsForm').submit();
        });
    });
</script>

Edit

Take a look at this article about MVC’s model binding for an idea of how vendorId gets injected from the submitted form. Basically, the binder will match property names with the name attribute (by default) to your model. In this case, our model is just an int.