如何使用ajax将部分视图返回为html答案

【问题标题】：how to return partial view as html using ajax如何使用ajax将部分视图返回为html
【发布时间】：2015-05-26 02:33:12
【问题描述】：

我想将部分视图返回为 html，以便我可以在 div 中呈现为 html，但它不工作，我无法找到它为什么不工作的问题，这是我的代码。

  function getPartial(id) {
    $.ajax({
        type: "POST",
        url: "/Home/GetPartial",
        contentType: "application/html",
        data: { ID: id },
        success: function (response) {
            $(".ui-layout-east").html(response);
            alert(response);
        }
    });
 }

在我的控制器中，我正在这样做。

    [HttpPost]
    public ActionResult GetPartial(int ID)
    {
        var gopal = DataAccess.DataAccess.FillDetailByID(ID);

        return PartialView("parent", gopal);
    }

但是当我以 json 格式返回时，它可以正常工作，我不明白，请帮我解决这个问题。以下是我想要返回的部分内容。

     @model WebTreeDemo.Models.Employee

   <div id="widget">
    <div id="x">
    @using (Html.BeginForm("Home", "Update", FormMethod.Post))
    {

        @Html.AntiForgeryToken()

        <div class="form-horizontal">

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <div class="form-group">
                @Html.LabelFor(model => model.EmpCode, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.EmpCode, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.EmpCode, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.JobDesc, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.JobDesc, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.JobDesc, "", new { @class = "text-danger" })
                </div>
            </div>



            <div class="form-group">
                @Html.LabelFor(model => model.DateOfJoining, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.DateOfJoining, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.DateOfJoining, "", new { @class = "text-danger" })
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" id="submitButton" value="Save" class="btn btn-default" />
                    @Html.HiddenFor(x => x.ID)
                </div>
            </div>
        </div>

    }
</div> <!-- end of #foo -->

【问题讨论】：

内容类型应该是contentType: "json"（你发送json到控制器）和数据类型应该是dataType: "html"（这是你得到的）
@Ethan 尝试控制台查看错误。 data: { ID: id } 将其更改为 data: { 'ID': id } 并使用斯蒂芬的评论
@StephenMuecke 他没有发送 JSON。在这种情况下，jQuery 会将给定给data 配置的对象转换为查询字符串ID=42（假设id 等于42）。要发送 JSON，您必须使用 JSON.stringify({ ID: id }) 对其进行字符串化。事实上，contentType 应保持未设置，因此使用默认值 application/x-www-form-urlencoded; charset=UTF-8。
@TsahiAsher，是的，数据需要被字符串化，或者它可以是contentType: application/x-www-form-urlencoded。但在任何情况下，它都可以只是 $.post('/Home/GetPartial', { ID: id }, function(response) {.. - jQuery 会计算出正确的类型。

标签： c# jquery asp.net-mvc

【解决方案1】：

试试这个...

function getPartial(id) {
    $.ajax({
        type: "POST",
        url: "/Home/GetPartial",
        contentType: "application/html",
        dataType: "html",
        data: { ID: id },
        success: function (response) {
            $(".ui-layout-east").html(response);
            alert(response);
        }
    });
 }

【讨论】：

【解决方案2】：

试试这个：将 contenttype 作为 json 传递，因为您的数据是 json 或普通的 javascript 对象。但是当您从服务器返回 View 时，数据类型必须是 html 格式，这样它才能正常工作。

var data = {"ID":123} $.ajax({ url: "/Home/GetPartial", type: "POST", dataType : "html", contentType: "application/json; charset=utf-8", data : JSON.stringify(data), success : function(response) { $(".ui-layout-east").html(response); alert(response); }, });

【讨论】：