在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).
-
如果这是正确的做法,怎么做才好呢? ESP,怎么办,我们只作属性表重新渲染?
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屋!