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

时间:2015-03-23 06:43:14

标签: c# jquery asp.net-mvc

我想将部分视图作为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 -->

2 个答案:

答案 0 :(得分:0)

试试这个...

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

答案 1 :(得分:0)

尝试以下一种方法:将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); }, });