Autopost back in mvc drop down list

Question

Requirment: I have a drop down list on my view page, displaying a list of vendors. When a vendor is selected from the dropdown, the page displays the details of selected vendor. By default i need to keep first vendor selected and its details displayed. I could accomplish this by using following code.

Problem: Dont know how to accomplish autopostback = true in MVC. I need to display the details of selected vendor on selection of vendor in the dropdown list.

I am using ASP.net 4.0, MVC3, Entity Framework 4.0. Here is my code:

    [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");

            List<SelectListItem> vendorSelectList = new List<SelectListItem>();
            foreach (Vendor vendor in vendorList)
            {
                vendorSelectList.Add(new SelectListItem
                {
                    Text = vendor.vendorName.ToString(),
                    Value = vendor.vendorId.ToString()
                });
            }

            Vendor selectedVendor = vendorList[0];

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

            VendorResult vendorResult = new VendorResult();

            vendorResult.vendorSelectList = vendorSelectList;
            vendorResult.vendorDetails = vendorDeatils;

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


public class VendorResult
{
    public List<SelectListItem> vendorSelectList { get; set; }
    public VendorDetails vendorDetails {get; set;}
}


public class VendorDetails
{
    public string vendorId { get; set; }
    public string vendorName { get; set; }
    public string address1 { get; set; }
    public string address2 { get; set; }
    public string address3 { get; set; }
    public string city { get; set; }
    public string state { get; set; }
    public string zip { get; set; }
    public decimal noteIndex { get; set; }
    public string comment1 { get; set; }
    public string comment2 { get; set; }
    public string phone { get; set; }
    public string interPhone { get; set; }
    public string fax { get; set; }
    public string interFax { get; set; }
}

Edit: Code defining my dropdown list.

@model KeleTools.Models.VendorResult

@{
    ViewBag.Title = "Vendor LookUp Tool";
    Layout = "~/Views/Shared/_ResultLayout.cshtml";
}

<h2>Vendor Details</h2>

<p> Select a vendor to display details:</p>

@Html.DropDownList("VendorList", @Model.vendorSelectList, null, new {target="_self"})

@using (Html.BeginForm("SearchResult", "VendorLookUp"))
{
   <div class="margin-10-top" >
    <table id= "OrderDetail" class="OrderDetail">
    <tr class="OrderDetail">
        <td class="PropertyName">Vendor Id:</td>
        <td class="PropertyValue">@Model.vendorDetails.vendorId.ToString().Trim()</td>
    </tr>
    <tr class="OrderDetail">
        <td class="PropertyName">Vendor Name:</td>
        <td class="PropertyValue">@Model.vendorDetails.vendorName.ToString().Trim()</td>
    </tr>
    @{
                             string address = @Model.vendorDetails.address1.ToString().Trim();
                             address = address + "\n";
                             address = address + @Model.vendorDetails.address2.ToString().Trim();
                             address = address + "\n";
                             address = address + @Model.vendorDetails.address3.ToString().Trim();

        <tr class="OrderDetail">
            <td class="PropertyName">Address</td>
            <td class="PropertyValue">@address.TrimEnd()</td>
        </tr>
    }
    @{
                                 string city = @Model.vendorDetails.city.ToString().TrimEnd();
                                 city = city + ", ";
                                 city = city + @Model.vendorDetails.state.ToString().Trim();
                                 city = city + " ";
                                 city = city + @Model.vendorDetails.zip.ToString().Trim();

        <tr class="OrderDetail">
            <td class="PropertyName">&nbsp;</td>
            <td class="PropertyValue">@city</td>
        </tr>

                                 string phoneNumber = null;
                                 if (!string.IsNullOrEmpty(@Model.vendorDetails.phone.ToString().Trim()))
                                 {
                                     phoneNumber = @Model.vendorDetails.phone.ToString().TrimEnd().Substring(0, 3);
                                     phoneNumber = phoneNumber + "-";
                                     phoneNumber = phoneNumber + @Model.vendorDetails.phone.ToString().TrimEnd().Substring(3, 3);
                                     phoneNumber = phoneNumber + "-";
                                     phoneNumber = phoneNumber + @Model.vendorDetails.phone.ToString().TrimEnd().Substring(6, 4);
                                     if (@Model.vendorDetails.phone.ToString().Trim().Length > 10)
                                     {
                                         phoneNumber = phoneNumber + " Ext: ";
                                         phoneNumber = phoneNumber + @Model.vendorDetails.phone.ToString().TrimEnd().Substring(10);
                                     }
                                 }

        <tr class="OrderDetail">
            <td class="PropertyName">Phone Number:</td>
            <td class="PropertyValue">@phoneNumber</td>
        </tr>
                                 phoneNumber = null;
                                 if (!string.IsNullOrEmpty(@Model.vendorDetails.fax.ToString().Trim()))
                                 {
                                     phoneNumber = @Model.vendorDetails.fax.ToString().TrimEnd().Substring(0, 3);
                                     phoneNumber = phoneNumber + "-";
                                     phoneNumber = phoneNumber + @Model.vendorDetails.fax.ToString().TrimEnd().Substring(3, 3);
                                     phoneNumber = phoneNumber + "-";
                                     phoneNumber = phoneNumber + @Model.vendorDetails.fax.ToString().TrimEnd().Substring(6, 4);
                                     if (@Model.vendorDetails.fax.ToString().Trim().Length > 10)
                                     {
                                         phoneNumber = phoneNumber + " Ext: ";
                                         phoneNumber = phoneNumber + @Model.vendorDetails.fax.ToString().TrimEnd().Substring(10);
                                     }
                                 }

        <tr class="OrderDetail">
            <td class="PropertyName">Fax:</td>
            <td class="PropertyValue">@phoneNumber</td>
        </tr>
                                 phoneNumber = null;
                                 if (!string.IsNullOrEmpty(@Model.vendorDetails.interPhone.ToString().Trim()))
                                 {

                                     phoneNumber = @Model.vendorDetails.interPhone.ToString().TrimEnd().Substring(0, 3);
                                     phoneNumber = phoneNumber + "-";
                                     phoneNumber = phoneNumber + @Model.vendorDetails.interPhone.ToString().TrimEnd().Substring(3, 3);
                                     phoneNumber = phoneNumber + "-";
                                     phoneNumber = phoneNumber + @Model.vendorDetails.interPhone.ToString().TrimEnd().Substring(6, 4);
                                     if (@Model.vendorDetails.interPhone.ToString().Trim().Length > 10)
                                     {
                                         phoneNumber = phoneNumber + " Ext: ";
                                         phoneNumber = phoneNumber + @Model.vendorDetails.interPhone.ToString().TrimEnd().Substring(10);
                                     }
                                 }

        <tr class="OrderDetail">
            <td class="PropertyName">International Phone:</td>
            <td class="PropertyValue">@phoneNumber</td>
        </tr>
                                 phoneNumber = null;
                                 if (!string.IsNullOrEmpty(@Model.vendorDetails.interFax.ToString().Trim()))
                                 {
                                     phoneNumber = @Model.vendorDetails.interFax.ToString().TrimEnd().Substring(0, 3);
                                     phoneNumber = phoneNumber + "-";
                                     phoneNumber = phoneNumber + @Model.vendorDetails.interFax.ToString().TrimEnd().Substring(3, 3);
                                     phoneNumber = phoneNumber + "-";
                                     phoneNumber = phoneNumber + @Model.vendorDetails.interFax.ToString().TrimEnd().Substring(6, 4);
                                     if (@Model.vendorDetails.interFax.ToString().Trim().Length > 10)
                                     {
                                         phoneNumber = phoneNumber + " Ext: ";
                                         phoneNumber = phoneNumber + @Model.vendorDetails.interFax.ToString().TrimEnd().Substring(10);
                                     }
                                 }

        <tr class="OrderDetail">
            <td class="PropertyName">International Fax:</td>
            <td class="PropertyValue">@phoneNumber</td>
        </tr>
        }
      <tr class="OrderDetail">
        <td class="PropertyName">Comment 1:</td>
        <td class="PropertyValue">@Model.vendorDetails.comment1.ToString().TrimEnd() < /td>
    < /tr>
    <tr class="OrderDetail">
        <td class="PropertyName">Comment 2:</td>
        <td class="PropertyValue">@Model.vendorDetails.comment2.ToString().Trim()</td>
    < /tr>

< /table> 
< /div>
}

Catiline

Related: How do you do autopostback feature of webforms in asp.net mvc? – Hydroplane

As an aside, I would move all of the if () { } logic into the view model as a property. – Rileyrilievo

Answer 1

There is no AutoPostback=true in MVC. You will have to wire this up yourself. You can do something like this, using jQuery:

$("#idOfMyDropDownList").change(function () {
    // Handle the change event, such as fire off an ajax request.
});

Demavend

m sorry guys, m a little new to jquery, ajax, mvc. Some more details will be appriciated. – Catiline

Answer 2

Change the dropdown instantiation to this

@Html.DropDownList("VendorList", @Model.vendorSelectList, new { onchange = "$(this).parent('form:first').submit();" }})

Sortilege

+1 for providing the code for performing an actual postback. However, I prefer to use $(this).closest("form").submit(); to make sure the form inside which the select element resides, gets posted. – Estevez

Answer 3

You can do it by this way:

@Html.DropDownList("VendorList", @Model.vendorSelectList, "--Select Vendor--", new { @onchange = "this.form.submit();" })

Timothytimour

Answer 4

Assuming you will need to do a database hit to get the results, inside James D'Angelo'a jquery function you would then do a .post on the vendor details method in your controller to get your object back and then you populate the details for the selected vendor to the page. You will have to add a method to the controller that returns a json object

$.post("/{Controller}/{Method}", { VendorId: selectVal }, function(response, status) {
    var vendorDetails = eval("(" + response + ")");
    //additional code to populate the fields

Colville