Question

如何使用Asp.Net Ajax更新多个DOM元素？

这是我的代码：

<span id="status">No Status</span>
<br />
@Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "status" })
<br />
<br />
@using (Ajax.BeginForm("UpdateForm", new AjaxOptions { UpdateTargetId = "textEntered" }))
{
    @Html.TextBox("textBox1", "Enter text")
    <input type="submit" value="Submit" /><br />
    <span id="textEntered">Nothing Entered</span>
}

UpdateTargetID 只需一个字符串。基本上我想要类似于WebForms的东西，我们会写updatePanel2.update()，并且该面板也会更新自己，无论它的位置如何。我知道可以使用Jquery实现。但我想知道框架本身是否有可用的东西，所以我不必在我项目的所有页面上编写重复的Jquery代码。

Answer 1

但我想知道是否有可用的东西框架本身所以我不必编写Jquery的重复代码我项目的所有页面都在继续。

AJAX中没有对多个UpdateTargetId的本机框架支持。您必须扩展默认行为以支持多个更新区域。

您可以做的是进行一次AJAX调用，以Json格式获取所有结果。然后使用JQuery在客户端迭代数据并更新页面上的相关区域。

Answer 2

您可以让您的小组描述自己并使用javascript代码阅读这些信息并为您执行更新。例如，您可以使用HTML5中提供的data- *标记并与HTML 4.1兼容。

只是为了给你一个想法：

<div class="autoUpdate" data-target="/Controller/UpdateAction" >
    //..Some HTML content here.
</div>

<script>
    function test() {
        $(".autoUpdate").each(function(i, e) {
            var target = $(e).data("target");

            //...AJAX Query here will return HTML. Just replace innerHTML with AJAX response.
        }
    }
</script>

或者你也可以通过在jQuery中创建更新面板小部件来简化这一过程。这很简单，可以扩展jQuery的功能。

如何使用Asp.Net MVC Ajax的UpdateTargetId更新多个DOM元素

2 个答案: