根据 MVC3 中的下拉选择加载部分视图 [英] Load partial view depending on dropdown selection in MVC3

查看：32 发布时间：2021/11/28 23:20:02 asp.net-mvc-3 razor asp.net-ajax

本文介绍了根据 MVC3 中的下拉选择加载部分视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 asp.net mvc3 创建一个.

我有一个包含一些选项的下拉列表.我想要的是将不同的局部视图注入到页面中，具体取决于下拉列表中的选择.

但是.我不希望这依赖于提交操作.它应该起作用，以便在您从选择列表中选择后立即加载局部视图.

我有这个代码:

@using (Ajax.BeginForm("Create_AddEntity", new AjaxOptions {UpdateTargetId = "entity_attributes",插入模式 = 插入模式.替换})){<div class="editor-label">@Html.Label("类型")

<div class="editor-field">@Html.DropDownList("EntityTypeList", (SelectList)ViewData["Types"])

<div id="entity_attributes"></div><p><输入类型=提交"值=创建"/></p>}

但我不知道如何在下拉列表选择更改时触发此部分视图加载.

这一点是对于不同的实体类型"，形式是不同的.所以会加载不同的局部视图，具体取决于下拉选择.

有人指点一下吗?

解决方案

假设以下是您想要插入部分的视图.

<头><头><身体><!-- 这里有些东西.下拉菜单等等-->....<!-- 插入部分的位置--><div id="partialPlaceHolder" style="display:none;">

在下拉列表的更改事件中，通过 jquery ajax 调用获取部分并将其加载到占位符.

/* 这是下拉列表的更改事件 */$('#myDropDown').change( function() {/* 获取下拉列表的选中值 */var selectedID = $(this).val();/* 使用 .get 请求请求局部视图.*/$.get('/Controller/MyAction/' + selectedID , function(data) {/* data是action方法返回的纯html，加载到你的页面*/$('#partialPlaceHolder').html(data);/* 一点点淡入效果 */$('#partialPlaceHolder').fadeIn('fast');});});

在您的控制器操作中，即 jquery 上方的/Controller/MyActionin，返回您的部分视图.

<代码>////获取:/Controller/MyAction/{id}公共 ActionResult MyAction(int id){var partialViewModel = new PartialViewModel();//TODO: 在这里使用 id 填充模型(viewmodel)return PartialView("_MyPartial", partialViewModel);}

Im trying to create a from using asp.net mvc3.

I have a dropdownlist with some options. What i want is different partial views to be injected into the page, depending on the selection in the dropdown list.

But. i dont want this to rely on a submit action. It should function so that, the partial view is loaded as soon as you select from the select list.

I have this code:

@using (Ajax.BeginForm("Create_AddEntity", new AjaxOptions { 
    UpdateTargetId = "entity_attributes", 
    InsertionMode = InsertionMode.Replace
    }
))
{
        <div class="editor-label">
            @Html.Label("Type")
        </div>
        <div class="editor-field">
            @Html.DropDownList("EntityTypeList", (SelectList)ViewData["Types"])
        </div>

        <div id="entity_attributes"></div>
        <p>
            <input type="submit" value="Create" />
        </p>
}

But I can't figure out how to trigger this partial view load when the dropdown list selection changes.

This point is that the form is different for the different "entity types". so there will be loaded a different partial view, depending on the dropdown selection.

Anyone got any pointers?

解决方案

Let's say following is your view that you want to insert your partial.

<html>
    <head><head>
    <body>
        <!-- Some stuff here. Dropdown and so on-->
        ....

        <!-- Place where you will insert your partial -->
        <div id="partialPlaceHolder" style="display:none;"> </div>
    </body>

</html>

On the change event of your dropdownlist, get partial via jquery ajax call and load it to place holder.

/* This is change event for your dropdownlist */
$('#myDropDown').change( function() {

     /* Get the selected value of dropdownlist */
     var selectedID = $(this).val();

     /* Request the partial view with .get request. */
     $.get('/Controller/MyAction/' + selectedID , function(data) {

         /* data is the pure html returned from action method, load it to your page */
         $('#partialPlaceHolder').html(data);
         /* little fade in effect */
         $('#partialPlaceHolder').fadeIn('fast');
     });

});

And in your controller action which is /Controller/MyActionin above jquery, return your partial view.

//
// GET: /Controller/MyAction/{id}

public ActionResult MyAction(int id)
{
   var partialViewModel = new PartialViewModel();
   // TODO: Populate the model (viewmodel) here using the id

   return PartialView("_MyPartial", partialViewModel );
}

这篇关于根据 MVC3 中的下拉选择加载部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

根据 MVC3 中的下拉选择加载部分视图 [英] Load partial view depending on dropdown selection in MVC3

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

根据 MVC3 中的下拉选择加载部分视图 [英] Load partial view depending on dropdown selection in MVC3

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭