mvc下拉列表中的自动回发答案

【问题标题】：Autopost back in mvc drop down listmvc下拉列表中的自动回发
【发布时间】：2012-01-04 15:15:23
【问题描述】：

要求：我的视图页面上有一个下拉列表，显示供应商列表。从下拉列表中选择供应商后，页面将显示所选供应商的详细信息。默认情况下，我需要选择第一个供应商并显示其详细信息。我可以通过使用以下代码来完成此操作。

问题：不知道如何在 MVC 中完成 autopostback = true。我需要在下拉列表中选择供应商时显示所选供应商的详细信息。

我正在使用 ASP.net 4.0、MVC3、Entity Framework 4.0。这是我的代码：

    [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; }
}

编辑：定义我的下拉列表的代码。

@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>
}

【问题讨论】：

相关：How do you do autopostback feature of webforms in asp.net mvc?
顺便说一句，我会将所有if () { } 逻辑作为属性移动到视图模型中。

标签： asp.net-mvc asp.net-mvc-3 c#-4.0 razor asp.net-4.0

【解决方案1】：

将下拉实例化更改为此

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

【讨论】：

+1 用于提供执行实际回发的代码。但是，我更喜欢使用$(this).closest("form").submit(); 来确保选择元素所在的表单被发布。

【解决方案2】：

MVC 中没有AutoPostback=true。您必须自己接线。你可以使用 jQuery 来做这样的事情：

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

【讨论】：

对不起各位，我对 jquery、ajax、mvc 有点陌生。一些更多的细节将被appriciated。

【解决方案3】：

你可以这样做：

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

【讨论】：

【解决方案4】：

假设您需要进行数据库访问以获取结果，在 James D'Angelo'a jquery 函数中，您将在控制器中的供应商详细信息方法上执行 .post 以获取您的对象，然后您填充所选供应商的详细信息到页面。您必须向控制器添加一个返回 json 对象的方法

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

【讨论】：