如何在 ASP.NET MVC 和 jQuery 中添加额外的部分视图，具体取决于下拉列表选择？答案

【问题标题】：How can I add extra partial views, depending on a dropdownlist selection, in ASP.NET MVC and jQuery?如何在 ASP.NET MVC 和 jQuery 中添加额外的部分视图，具体取决于下拉列表选择？
【发布时间】：2010-01-02 12:28:17
【问题描述】：

我有一个表单，我想根据下拉列表的值添加额外的字段。它们将是一组字段，我正在考虑使用渲染部分中的 html 动态更改 div 的内容，这将使用我想要的字段渲染 PartialView。

现在下拉列表的代码如下

    <p>
        <label for="CatalogItem.Type"> Type: </label>
        <%=Html.DropDownList("CatalogItem.Type",Model.Types, "Choose Type") %>
    </p>

    <div id = "ExtraInfo">

    </div>

我想把额外的东西（专门用于该类型的字段）放在ExtraInfo div 中。 jQuery 代码会是什么？

谢谢！

【问题讨论】：

很难选择谁给出正确答案，因为你们俩都给了我一部分，但我决定给@Tony，因为他发布了关于 jquery 的大部分答案脚本...但是@DM 你得到了 ajax 调用的 +1，因为这也是我想要的。

标签： c# jquery asp.net-mvc

【解决方案1】：

@Tony 有正确的方法，但不是将您的 RenderPartial html 直接放入“.html("add html code inside div here")”，您可能想要进行 ajax 调用。这样用户就不会下载一堆他/她甚至看不到的 html。

类似这样的：

if ( myval == "someValue")
{
    $("#ExtraInfo").load("/dynamic-stuff/1")
}
else if ( myval == "someOtherValue")
{
    $("#ExtraInfo").load("/dynamic-stuff/2")
}

这还假设您设置了一个路由来处理“/dynamic-stuff/2”之类的 url，并以正确的局部视图进行响应。

【讨论】：

【解决方案2】：

首先在下拉列表中添加一个 css 类选择器，现在我们将其称为“mydropdown”

使用这样的东西：

<script language=”javascript” type=”text/javascript” >

      function addtoDiv()
        {
        $(document).ready(function() {

        var myval=$(”#mydropdown”).val(); // get value of dropdown


        if ( myval == "somevalue") // check myval value
        {
            $("#ExtraInfo").html("add html code inside div here"); // add code based on         value
        }

        }}
  </script>

【讨论】：

【解决方案3】：

是否需要动态添加字段？您可以通过执行以下操作使用 JQuery 添加字段：

$("").attr("id", "test").addClass("FormLabel").appendTo("#parentElement"); $("").attr("id", "testinput").attr("type", "text").appendTo("#parentElement");

通过这种方式，您可以通过编程方式创建字段。

作为替代方案，您可以创建 JQuery 局部视图。创建一个返回此局部视图实例的操作方法，并使用

调用该操作方法

$.get("/<controller>/<actiontoreturnpartialview>", function(data) {
   $("#ExtraInfo").html(data); 
});

这让它变得更容易，因为您可以依靠服务器端逻辑来呈现 UI，尽管我倾向于使用客户端方法。

或者，您可以创建自己的 HTML 助手来完成这一切，但这将是很多工作。

HTH。

【讨论】：