如何使用ajax將部分視圖作為html返回

Question

我想將部分視圖返回為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 -->

Answer 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);
        }
    });
 }

Answer 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); }, });