Question

我有这个现有代码可以做我想做的事情 - 它调用服务器，服务器返回一个替换名为“内容”的div的视图

@using (Ajax.BeginForm("EditLineItem", "Order", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "content" }))
        {
            <input type="submit" value="Add Report to Order" />
        }

这导致以下结果：

form action="/Order/EditLineItem" method="post" data-ajax-update="#content" data-ajax-mode="replace" data-ajax="true">

我现在需要执行相同的操作，但是从JavaScript调用它而不是在表单内部。换句话说，我想调用控制器操作，获取HTML并替换“内容”。

JavaScript看起来像这样：

$.ajax({
        url: "Order/EditLineItem",
        data: { id: dataItem }
        //How do I replace div?


    });

Answer 1

你应该可以这样做：

$.ajax({
    url: "Order/EditLineItem",
    data: { id: dataItem },
    dataType: 'html',
    //How do I replace div?
    success: function (data) {
            $('#content').html(data); // assuming the div has id="content"
    },
    error: function(xhr, error){
        alert('Error! ' + error);
    }
});

Answer 2

通过你使用JQuery库的东西的外观，所以我猜你有脚本元素指向你的标题库。如果不只是包括这个。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

接下来提交请求的正确语法（包括div内容替换）将如下所示

$.ajax({
        url: "Order/EditLineItem",
        data: { id: dataItem},
        success: function (dataToPutInDiv) {
            $("#divID").text(dataToPutInDiv);
        }
    });

如何使用Ajax发布然后替换div

2 个答案: