在ASP.Net MVC3剃刀动态渲染局部视图使用Ajax调用动作 [英] Rendering partial view dynamically in ASP.Net MVC3 Razor using Ajax call to Action

问题描述

我试图创建一个单页的形式，以营造出工作项目。其中一个属性是一个下拉的工作项类型。

I'm trying to create a single page form to create a 'work item'. One of the properties is a drop down for 'work item type'.

根据不同的工作项目类型，用户可能需要提供更多的信息，一个名称 - 值对风格的属性网格（属性表）。

Depending on the work item type, the user may need to provide additional information in a name-value-pair style attributes grid (property sheet).

我想动态呈现的属性表，只要一个工作项类型选择或更改。一旦用户提供的所有信息，他点击提交创建工作项目。

I would like to dynamically render the property sheet as soon as a work item type is selected or changed. Once the user provides all information, he would click submit to create the 'work item'.

这是我到目前为止有：

    @using (Ajax.BeginForm("AttributeData", new AjaxOptions() { UpdateTargetId="AttributeDataCell" }))
{

        <div style="float:left">

@{
    Html.RenderPartial("CreateWorkItemPartialView");
 }
 </div>     

<div id="AttributeDataCell" style="float:right">
    @Html.Action("AttributeData", new {id = 1})
</div>
}

在控制器中的AttributeData动作只是呈现局部视图：

The AttributeData action in the controller simply renders the partial view:

public ActionResult AttributeData(int id = 0)
{
    var attributes = _workItemDataService.ListWorkItemTypeAttributes(id);
    return PartialView("EditWorkItemAttributesPartialView", attributes);

}

现在，我想这个钩到下拉列表的评选活动，使局部视图，在每一个选择更改重新呈现在上面的表格单元格。我想通过在选定的值作为标识。

Now I would like to hook this up to the drop-down-list's selection event so that the partial view re-renders in the above table cell at every selection change. I would like to pass in the selected value as id.

的一种方法是迫使表单提交本身（因此重新渲染）。

One way is to force the form to submit itself (and thus re-render).

1. 如果这是正确的做法，怎么做才好呢？ ESP，怎么办，我们只作属性表重新渲染？

1. If that is the right approach, how do we go about it? Esp., how do we make only the property sheet to re-render?

如果有更好的方式来实现上述情况，请注明。

If there is a better way to achieve the above, please indicate.

感谢

推荐答案

您可以订阅 .change（） 下拉的事件，并触发一个AJAX请求：

You could subscribe to the .change() event of the dropdown and trigger an AJAX request:

$(function() {
    $('#Id_Of_Your_Drop_Down').change(function() {
        // This event will be triggered when the dropdown list selection changes

        // We start by fetching the form element. Note that if you have
        // multiple forms on the page it would be better to provide it
        // an unique id in the Ajax.BeginForm helper and then use id selector:
        var form = $('form');

        // finally we send the AJAX request:
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            success: function(result) {
                // The AJAX request succeeded and the result variable
                // will contain the partial HTML returned by the action
                // we inject it into the div:
                $('#AttributeDataCell').html(result);
            }
        });
    });
});

这篇关于在ASP.Net MVC3剃刀动态渲染局部视图使用Ajax调用动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！