How to return partial html view using ajax

Question

I want to return a partial view as html, so I can display in a div as html, but it doesn’t work, I can’t find the problem why it doesn’t work, 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 do 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 his work, I don’t understand, please help me how to solve this. below is the part 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 this: pass the contenttype as json since your data is in json or usually a javascript object. but the data type must be in html format, since you are returning the View from the server so that it works 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); }, });

Answer 2

...

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