如何MVC3 /剃刀更新从回发一个标签

MVC /剃刀/ JavaScript的新手问题：如何MVC3 /剃刀更新从回发一个标签

我有一个MVC3 /剃刀形式，其中使用可以从下拉列表中选择的单品。

<div class="editor-label"> 
    Product 
</div> 
<div class="editor-field"> 
    @Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--") 
    @Html.ValidationMessageFor(model => model.ProductID) 
</div>

那么，什么我要的是显示所选产品的价格只是下拉列表（型号属性名称是Amount）下方的标签上。

这应该很简单，但我在剃刀上很新，并且对JavaScript几乎一无所知，所以我很感激任何关于如何做的详细解释，以及它是如何挂在一起的。

来源

2012-04-20 Shaul Behr

在下拉菜单中添加一个div/span。

@Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--") 
<div id="itemPrice"></div>

并在您的脚本中，对您的控制器操作之一进行ajax调用，以返回价格。

$(function(){ 
    $("#ProductId").change(function(){ 
    var val=$(this).val();   
    $("#itemPrice").load("@Url.Action("GetPrice","Product")", { itemId : val }); 
    }); 
});

，并有一个这样的控制器操作在产品控制

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. 

    return itemPrice.ToString(); 
}

这就是它！确保你有你的页面加载jQuery，这将工作正常。

编辑：包含这一行你的页面加载jQuery库（如果尚未加载），

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

来源

2012-04-21 23:13:10 Shyju

谢谢，这看起来很有希望。但我后悔仍然不工作。也许这是关于“确保你的页面中加载了jQuery”的部分 - 我需要加载哪个脚本文件？另外，因为它是一个Ajax调用，我认为该脚本是JavaScript类型的？（是的，我真的**是**新手。| - ）） – 2012-04-23 16:55:38

@Shaul：在您的页面中包含对下拉菜单的引用。我更新了我的答案。使用萤火虫控制台查看是否有脚本错误。 – Shyju 2012-04-23 17:00:10

你介意检查语法，特别是$（＃itemPrice ...？）行的语法，它看起来至少有一个双引号缺失，并且@ Url.Action中的单引号可能应该是双引号......甚至在改变这些之后，我在“GetPrice”下面看到一个编译器警告，说“Expected'，'or'）'... – 2012-04-23 17:21:24

当用户选择产品时，金额对您的视图不可用（请记住，该页面在服务器上呈现，但实际上在客户端上执行;您的模型在客户端的页面上不可用）。所以你要么必须在一个JavaScript数组中进行渲染，该数组包含基于传递给客户端的产品数量的查找（所以它可以通过客户端JavaScript获得），或者您必须回调到服务器来检索这些信息。

我会用jQuery来做到这一点。

下面是一个简单的例子，说明如果您使用数组，则jQuery/Javascript代码可能看起来像什么。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     // This code can easily be built up server side as a string, then 
     // embedded here using @Html.Raw(Model.NameOfPropertyWithString) 
     var list = new Array(); 
     list[0] = ""; 
     list[1] = "$1.00"; 
     list[2] = "$1.25"; 

     $("#ProductID").change(displayAmount).keypress(displayAmount); 

     function displayAmount() { 
      var amount = list[($(this).prop('selectedIndex'))]; 
      $("#amount").html(amount); 
     } 
    }); 
</script> 
<select id="ProductID" name="ProductID"> 
    <option value="" selected>-- Select --</option> 
    <option value="1">First</option> 
    <option value="2">Second</option> 
</select> 
<div id="amount"></div>

你会想花一些时间看看jQuery的文档。你最终会使用它很多。代码基本上“选择”下拉菜单并将处理程序附加到更改和按键事件。当它们触发时，它调用displayAmount函数。 displayAmount（）检索选定的索引，然后将该值从列表中提取出来。最后它将HTML设置为检索的数量。

而不是本地阵列，你可以打电话给你的控制器。你会在你的控制器上创建一个action（方法），它返回值作为JsonResult。你会使用jquery.ajax（）进行回调。在这里做一些搜索和jQuery网站，我相信你会发现很多关于如何做到这一点的例子。

来源

2012-04-21 23:06:26

如何MVC3 /剃刀更新从回发一个标签

回答

相关问题