Question

我有一个表单，我想根据下拉列表的值添加额外的字段。它们将是一组字段，我正在考虑使用渲染部分中的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代码将是什么？

谢谢！

Answer 1

@Tony有正确的方法，但不是将你的RenderPartial html直接放入“.html（”在这里添加html代码里面“），”你可能想要做一个ajax调用。这样用户就不会下载他/她甚至可能看不到的一堆html。

类似的事情：

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

这也假设您设置了一个路径来处理像“/ dynamic-stuff / 2”这样的网址，并使用正确的部分视图进行响应。

Answer 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>

Answer 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。

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

3 个答案: