使用jquery加载局部视图

时间:2015-01-06 07:47:49

标签: asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 model-view-controller

我想在div中显示局部视图。我尝试了很多方法但没有得到结果。

请为我提供一个合适的解决方案,我是mvc的新成员

这是主要****索引页****

@model TelerikAdmin.Models.ViewModel.UserViewModel

        @{
            ViewBag.Title = "Index";
           // Layout = "~/Views/Shared/_LayoutPage1.cshtml";
        }
        <script src="~/Scripts/jquery-1.7.1.js"></script>
        <script src="~/Scripts/jquery-1.7.1.min.js"></script>
        <style>
            .k-ff input.k-textbox {
                height: 2.17em;
                width:350px;

            }
            .content-wrapper {
                margin:5% auto auto 25%;
                border:1px solid yellow;
                width:550px;
            }
            #container tr td{
                padding:10px;
            }
        </style>
        <script>
            $(function () {
                $('#loadFromMainFrame').click(function (e) {
                    e.preventdefault();
                    var url = $(this).data(url);
                    $('#mainframeContens').load(url);
                });
            });
        </script>
        <input id="loadFromMainFrame" type="button" data-url="@Url.Action("GetView","Privilege")" value="Click" />
        <div id="mainframeContens">
        </div>

这是我的部分视图(patial.cshtml)          我将局部视图放在共享文件夹或任何其他地方

这是部分视图

这是我的控制器动作

using Kendo.Mvc.UI;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using TelerikMvcApp5.Models.Context;
using TelerikAdmin.Models.ViewModel;

namespace TelerikAdmin.Controllers
{
    public class PrivilegeController : Controller
    {
        ShoppingContext db = new ShoppingContext();
        public ActionResult Index()
        {
         return View();
        }

        public ActionResult GetView()
        {
            return PartialView("partial");
        }

    }
}

1 个答案:

答案 0 :(得分:0)

请使用如下。

如下所示更改您的JS。

<script>
    $(function () {
        $('#loadFromMainFrame').click(function (e) {
            e.preventdefault();

            var url = $(this).data(url);

            $.ajax({
                url: url,
                type: 'GET',
                success: function (result) {
                    $('#mainframeContens').html(result);
                }
            });
        });
    });
</script>

注意:您的部分视图加载Div应如下所示。

<div id="mainframeContens">
    @Html.Partial("partial")
</div>

在Action方法

中提及如下所示的HTTPGET
[HttpGet]
public ActionResult GetView()
{
    return PartialView("partial");
}