Question

我是mvc的新手，并且相当年轻的Javascript，所以我为错误/丢失的代码道歉。我正在尝试创建一个视图，其中用户有一个下拉列表，通过btnAdd选择的项目将动态显示在btnAdd按钮下方的同一视图中。我假设最好的方法是使用JavaScript。在用户做出选择后，他们将点击btnckout按钮，然后选择将返回给控制器。这是我到目前为止所拥有的。我有点卡住，所以任何帮助都会受到赞赏！

查看：

@model OnlineTakeout.Models.ProductView

@{
     Layout = null;
}

<!DOCTYPE html>

<html>
<head>
     <meta name="viewport" content="width=device-width" />
     <script src="~/Scripts/jquery-2.1.0.min.js"></script>
     <title>Index</title>
</head>
<body>
 @using (Html.BeginForm()){
<div>
    Pick Product:
    <br />
        @Html.DropDownListFor(m=>m.ProductId, Model.Products) 
    <br />
    <p>
        <input type="button" value="AddToOrder" id="btnAdd" />    
    </p>
</div>
    }
<div>
 @using (Html.BeginForm()) {    

    //Added Items would display here after individual btnAdd button presses  

    <p>
        <input type="button" value="CheckOut" id="btnChkOut" />    
   </p>

 }
</div>

</body>
 <script>
    $(function () {
        $("#btnAdd").click(addProduct);
    })

    $(function () {
        $("#btnChkOut").click(saveProducts);
    })

    var productList = [];
    var id = $("#ProductId").val();

    // This function would also display these items on view
    function addProduct() {
        productList.push(id);
    };


    function saveProducts() {
        $.post("/Product/Index/" + productList());
    }

    }
</script>

控制器：

public class ProductController : Controller
{
    //
    // GET: /Product/

    public ActionResult Index()
    {
        var model = new ProductView();
        var products = new List<Product> { new Product { ProductId = 1, Name = "Product One", Price = 1.00m },  
            { new Product { ProductId = 2, Name = "Product Two", Price = 2.00m } }};
        model.Products = new SelectList(products, "ProductId", "Name");

        return View(model);
    }

    [HttpPost]
    public JsonResult Index(int[] prodList)
    {

        return Json("Index");
    }

Answer 1

我通常这样做的方法是使用jQuery。

您需要在jQuery中为下拉列表的更改事件创建一个事件处理程序，该事件应该触发此更改。当它被触发时，发布到控制器中将要绑定部分控制器并返回局部视图的动作。拥有一个返回类型的ActionResult非常重要 - 它会将HTML返回到帖子的成功方法。然后只需在页面上嵌入HTML即可完成。

选择项目并显示在同一视图中。将结果返回给控制器

1 个答案: