【问题标题】:Dynamically Changing View from selected dropdownlist item from Model Data in MVC从 MVC 中的模型数据中选择的下拉列表项动态更改视图
【发布时间】:2012-07-25 22:41:34
【问题描述】:

我不确定我是否正确地解决了这个问题,如果缺乏解释,请耐心等待。我对 MVC-3 还是有点陌生​​。

我有一个 MVC 页面,我不确定从模型生成具有正确行为的视图的最佳方法是什么。该模型包含一个文本字段类列表,每个类包含一组要在视图中显示的文本字段(例如“HeadlineText”、“ButtonText”、“ColorText”等)。文本字段类列表用于用户设置的每种唯一语言,以便他们可以为每种不同的语言创建一组文本字段。

在视图中有一个下拉列表,其中包含文本字段类列表中的每种语言/对象,我想根据在下拉菜单中选择的语言选项来更改视图中显示的文本字段-down-list(并相应地动态更改)。

我最初的计划是从模型中为列表中的所有对象生成视图中的 html,并仅使用 javascript 来隐藏/取消隐藏不属于下拉列表中所选语言的文本字段集-列表。我真的不喜欢在页面上生成一堆额外的 html 的想法,所以它们都可以通过 javascript 进行更改,但我没有看到任何其他方法可以在不重新加载/重新生成视图的情况下更新视图(我我试图让它看起来是异步的,没有回发)。

更新:

关于部分视图的建议似乎是我想要的,但我仍然想知道其他评论者没有输入的内容。也就是说,如果我想做部分视图,我仍然需要将文本字段绑定到父模型中的数据,并且(可能使用编辑器模板)仍然能够修改它们并在父视图/模型/时保存表单已提交保存。

我在 bit.ly/N5DY5a 和 bit.ly/SVYqdT 上阅读了一些其他内容。如果我理解正确,我应该能够将文本字段列表对象或父模型传递给部分视图,以便视图将为正确的字段生成编辑器模板并仍然将它们绑定到父模型,以便提交父表单时它们会被保存吗?我还没有得到任何工作,但我仍在努力......

【问题讨论】:

    标签: c# javascript html asp.net-mvc asp.net-mvc-3


    【解决方案1】:

    解决方案

    第一次使用视图呈现页面。

    然后当你选择的值发生变化时,使用ajax获取新的内容。

    现在使用局部视图来渲染页面被修改的部分。

    您的局部视图包含与您的视图相同的标记,但只是修改了部分。

    示例

    在控制器中

    //get data
    
    if (!Request.IsAjaxRequest())
    {
        return View(data);
    }
    else
    {
        return PartialView("myPartialView", data);
    }
    

    在视图中

    HTML

    ...    
    <div id="partialView"></div>
    ...
    

    jQuery

    <script type="text/javascript">
        $(function () {
            $('#myDropdownlist').change(function () {
                $.get('/controller/action' + $(this).find(':selected').val(), function (data) {
                    $('#partialView').html(data);
                }
            });
        });
    </script>
    

    【讨论】:

    • 我在 bit.ly/N5DY5abit.ly/SVYqdT 上阅读了一些其他内容。如果我正确理解它们,我应该能够将文本字段列表对象或父模型传递给部分视图,以便视图将为正确的字段生成编辑器模板并仍然将它们绑定到父模型,以便提交父表单时它们会被保存吗?
    • 对不起,我不明白。 :(
    【解决方案2】:

    您可以使用带有 Ajax 的局部视图来完成此操作。

    为每种语言创建一个局部视图,然后根据用户选择执行 Ajax 调用以使用局部视图更新/替换页面的 a 段。

    more about partial views

    【讨论】:

      猜你喜欢
      • 2019-09-03
      • 1970-01-01
      • 2011-08-02
      • 2013-04-29
      • 1970-01-01
      • 2015-09-07
      • 2017-03-08
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多