无法使用ajax调用加载部分视图

时间:2014-10-29 10:15:33

标签: jquery asp.net ajax asp.net-mvc

我想点击超链接在我的div中加载partialview数据,所以我写了这段代码来调用我的动作,返回Partialview,但无法加载我的局部视图

这是我的Index.cshtml代码

    @model IEnumerable<EcommerceApplication.Models.Products>
    <link href="../../Content/Style.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/jquery-2.1.1.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#create').on('click', function () {
                $.ajax({
                    type: 'GET',
                    contentType: 'application/json; charset=utf-8',
                    url: '/Home/Create',
                    success: function (data) {
                        $('#addItem').html(data);
                    },
                    error: function (data) {
                        alert("Error In Loading Cart Item ");
                    }
                });
            });
        });
    </script>

    <p>
        <a href="#" id="create">Create New</a>
    </p>
<div id="addItem">

</div>

我的控制人员的行动

[HttpGet]
        public PartialViewResult Create()
        {
            var objProduct = new Products();
            return PartialView("_Create", objProduct);
        }

        [HttpPost]
        public JsonResult Create(Products objProducts)
        {
            if (Request.IsAjaxRequest())
            {
                    _db.products.Add(objProducts);
                    _db.SaveChanges();
            }
             products = _db.products.ToList();
             return Json(products);
        }

我的部分视图代码

@model EcommerceApplication.Models.Products
@using (Ajax.BeginForm("Create", new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "post", OnSuccess = "UpdateList" }))
{
    <fieldset>
        <div class="editor-label">
            @Html.LabelFor(model => model.ProductName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductName)
            @Html.ValidationMessageFor(model => model.ProductName)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

1 个答案:

答案 0 :(得分:0)

试试这个......

我已将dataType更改为HTML

<script type="text/javascript">
        $(document).ready(function () {
            $('#create').on('click', function () {
                $.ajax({
                    type: 'GET',
                    dataType: 'html',
                    url: '/Home/Create',
                    success: function (data) {
                        $('#addItem').html(data);
                    },
                    error: function (data) {
                        alert("Error In Loading Cart Item ");
                    }
                });
            });
        });
    </script>