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

Question

i want to return partial view as html so i can render in div as html, but its not working, i don't able to find the issue why its not working, here is my code.

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

in my controller i am doing like this.

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

        return PartialView("parent", gopal);
    }

but when i return as json then its working, i don't understand, please help me how to resolve this. below is my partial which i want to return.

     @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

Try with this...

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

Try this one: Pass contenttype as json as your data is in json or normal a javascript object. but datatype must be in html as you are returning View from server so it will work fine for you.

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