在MVC4中的下拉下拉中获取和设置值

时间:2013-09-07 06:07:49

标签: asp.net-mvc asp.net-mvc-4

我是初学者...我不知道如何在MVC中使用dropdown ....我已经像这样使用了它

ItemMaster.cshtml

 @Html.DropDownList("ProductName", ViewData["ProductName"] as SelectList)

Controller.cs

public ActionResult ItemMaster(Item model)
{
 ObservableCollection<Item> ItemList = new ObservableCollection<Item>();
 Item Item = new Models.Item();
 ItemList = Item.GetItemList();

 Item Product = new Item();
 DataTable dtProduct = new DataTable();
 dtProduct = Item.GetProductList();

 IList<Item> MyList = new List<Item>();
 foreach (DataRow mydataRow in dtProduct.Rows)
 {
     MyList.Add(new Item()
     {
         Id = Convert.ToInt32(mydataRow["Id"].ToString().Trim()),
         Product_Name = mydataRow["Name"].ToString().Trim()
     });
 }
 var ProductName = new SelectList(MyList, "Id", "Product_Name");
 ViewData["ProductName"] = ProductName;

     return View(ItemList);
}

我正在使用项目列表来填充网格视图....我正在使用视图数据填充下拉列表....它工作正常....我不知道如何获取选定的值时单击按钮。

2 个答案:

答案 0 :(得分:1)

试试这个,

 @Html.DropDownList("ProductName", ViewData["ProductName"] as SelectList)

<input type="button" id="btnasd"  value="Click"/>

<强>脚本

<script type="text/javascript">
    $(document).ready(function () {

        $("#btnasd").click(function () {
            var Id = $("#ProductName").val();
             $.ajax({
            url: '@Url.Action("Action", "Controller")',
            type: "Post",
            data: { ProductNameId: Id },
            success: function (result) {

                $("#mygrid").html('');
                $("#mygrid").append(result.Data);
            }
        });
        });
});
</script>

答案 1 :(得分:-1)

执行以下操作(对于DropDownList的onchange事件):

@Html.DropDownList("ProductName", ViewData["ProductName"] as SelectList,
 "-Select Product-", new { onchange = "doFunction();" })

<强>的javascript:

<script type="text/javascript">
$(document).ready(function () {
        doFunction();
    });
function doFunction() {
   var PassVal = $("#ProductName").val(); //It has dropdownlist's selected value.
   if (PassVal != '') {
           //Do Ajax operations to load data in GridView(On Same Page).
      $.ajax({
        url: '<CONTROLLER/ACTIONANME>',  //Specify Actionname in controller from which you will get data.
        type: "POST",
        data: {
            ProductName: PassVal
        },
        dataType: "html",
        success: function (data) {
          $("#GridView").empty(data);  //empty gridview
          $("#GridView").html(data); //Load data to gridview
        },
        error: function () {
          alert("No Records Found");
         }
      });
   }
}
</script>

或点击按钮

@Html.DropDownList("ProductName", ViewData["ProductName"] as SelectList,
     "-Select Product-")
<input type="button" id="btnSubmit"  value="Submit"/>

脚本:

    $('#btnSubmit').click(function(){
     var PassVal = $("#ProductName").val(); //It has dropdownlist's selected value.
       if (PassVal != '') {
               //Do Ajax operations to load data in GridView(On Same Page).
          $.ajax({
            url: '<CONTROLLER/ACTIONANME>',  //Specify Actionname in controller from which you will get data.
            type: "POST",
            data: {
                ProductName: PassVal
            },
            dataType: "html",
            success: function (data) {
              $("#GridView").empty(data);  //empty gridview
              $("#GridView").html(data); //Load data to gridview
            },
            error: function () {
              alert("No Records Found");
             }
          });
       }
});

问我是否有任何疑问。

注意:您还可以使用DropDownListFor进行模型绑定下拉列表。