如何从下拉列表中填充表单值?

时间:2012-04-23 18:49:57

标签: asp.net-mvc-3 razor

来自this question的后续操作:如果我想根据用户从下拉列表中选择的值来计算值,并将该值放入表单变量/模型属性中,我该怎么做?< / p>

2 个答案:

答案 0 :(得分:5)

真的,如果我有一个建议给任何ASP.NET MVC开发人员:使用视图模型而忘记ViewBag / ViewData 。在99%的案例中,这是他的问题/问题的解决方案。

所以这里是允许您正确表示下拉列表的最小视图模型:

public class MyViewModel
{
    // a scalar property on the view model to hold the selected value
    [DisplayName("item")]
    [Required]
    public string ItemId { get; set; }

    // a collection to represent the list of available options
    // in the drop down
    public IEnumerable<SelectListItem> Items { get; set; }

    ... and some other properties that your view might require
}

然后有一个控制器动作,它将填充并将此视图模型传递给视图:

public ActionResult Index()
{
    var model = new MyViewModel
    {
        // TODO: those values probably come from your database or something
        Items = new[]
        {
            new SelectListItem { Value = "1", Text = "item 1" },
            new SelectListItem { Value = "2", Text = "item 2" },
            new SelectListItem { Value = "3", Text = "item 3" },
        }
    };
    return View(model);
}

然后你可以对这个视图模型有一个相应的强类型视图,它可以包含一个表单和下拉列表:

@model MyViewModel
@using (Html.BeginForm())
{
    @Html.LabelFor(x => x.ItemId)
    @Html.DropDownListFor(x => x.ItemId, Model.Items, "--Select One--")
    <button type="submit">OK</button>
}

最后,您可以在控制器上对此表单进行相应的操作,您可以在其中从下拉列表中检索所选值:

[HttpPost]
public ActionResult Index(MyViewModel model)
{
    // model.ItemId will contain the selected value from the dropdown list
    ...
}

答案 1 :(得分:0)

我猜(上一个问题的信息)您希望根据下拉列表中的所选项目使用ajax获取商品价格数据,并将其作为正常表单帖子的一部分发送到您的操作方法。

Step1)为产品创建ViewModel。

public class ProductViewModel
{
    public string SelectedItemId { get; set; }
    public IEnumerable<SelectListItem> Items { get; set; }
    public decimal ItemPrice { set; get; }
}

Step2)像这样创建一个产品控制器

public class ProductController : Controller
{
    public ActionResult Index()
    {
        var objProduct = new ProductViewModel();
        objProduct.Items = new[]
        {
            new SelectListItem { Value = "1", Text = "Perfume" },
            new SelectListItem { Value = "3", Text = "Shoe" },
            new SelectListItem { Value = "3", Text = "Shirt" }
        };
        return View(objProduct);
    }
    [HttpPost]
    public ActionResult Index(ProductViewModel objProduct)
    {
        //Validate and Save to DB and do whatever            
        return View(objProduct);
    }
    public string GetPrice(int itemId)
    {
        decimal itemPrice = 0.0M;
        //using the Id, get the price of the product from your data layer and set that to itemPrice variable.
        itemPrice = 23.57M;
        return itemPrice.ToString();
    }
}

步骤3)添加强类型视图

@model MvcApplication1.Models.ProductViewModel
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

@using (Html.BeginForm())
{    
    @Html.DropDownListFor(x => x.SelectedItemId, Model.Items, "Select..")
    <div id="divItemPrice"> </div>
     @Html.HiddenFor(x=>x.ItemPrice)       
    <button type="submit">Save</button>
}
<script type="text/javascript">
$(function(){
  $("#SelectedItemId").change(function(){
    var val=$(this).val();  
    console.debug(val);    
    $.get("@Url.Action("GetPrice","Product")",  { itemId : val },function(data){
      $("#ItemPrice").val(data);
      $("#divItemPrice").html(data);
    });     
  });
});
</script>

当您在下拉列表中更改所选项目时,使用jQuery ajax,它将调用GetPrice Action方法并获取数据。在div中显示它并设置为ItemPrice的HiddenField的值。

enter image description here 当您发布表单时,您将在ViewModel中显示它。 enter image description here

希望这有帮助。