主页只显示部分页面但不显示部分页面的自己的页面，为什么？

Question

我正在使用ASP.NET MVC 4.我想知道为什么主页（索引）只显示部分页面（_PersonGrid），而不是索引页面加载部分页面的div？我的代码怎么办？我注意到ajax没有火灾事件＆＃34;加载页面＆＃34;。

public class ViewModels
{

    public IEnumerable<Person> VmPersonList { get; set; }

 }

控制人：主页

    [HttpGet]
    public ActionResult Index()
    {

        _viewModels.VmPersonList = Repository.GetPersons();


        return PartialView("_PersonGrid", _viewModels.VmPersonList);

    }

查看：_PersonGrid.cshtml

   @model IEnumerable<ManagementProgram.Areas.Persons.Models.Person> 

  @{
    var grid = new WebGrid(Model, defaultSort: "Id", rowsPerPage: 10, canSort: false);
   }

@if (Model != null)
{
    @grid.GetHtml(
    tableStyle: "grid",
          columns:grid.Columns(
    grid.Column("Id", header: "Person ID"),
    grid.Column(columnName: "Description", header: "Name"),
    grid.Column(columnName: "Department", header: "Department Name")
    ))

}

查看：索引

//这里不显示但只显示没有＆＃34; Hello World＆＃34;的部分页面，为什么？我需要显示索引页面，包括＆＃34; Hello World＆＃34;与部分页面（webgrid）像这样：

HELLO WORLD

<div id="insidecontent">
  <div id="gridcontent"></div>
</div>

<script type="text/javascript">

   // Here not firing event.
    $(document).ready(function () {
    alert('Loading Page');
    $.ajax({
        url: '@Url.Action("Index", "Home")',
        type: 'GET',
        success: function (data) {
            alert(data);
            $('#gridcontent').html(data);
        }
    });

});

</script>

更新

[HttpPost]
    public ActionResult Index(IEnumerable<int> selectedCountryId)
    {
        try
        {
            IEnumerable<Person> persons = new List<Person>();


            var db = Repository.GetPersonData(selectedCountryId);


            return PartialView("_PersonGrid", persons);
        }
        catch (Exception ex)
        {

        }


    }

查看：

   @Html.DropDownList("Countries", "-----Select Country-----")

使用Javascript：

    $(document).on('change', '#Countries', function () {
        var selectedCountry= $("#Countries").val();
        $.ajax({
            url: '@Url.Action("Index", "Home")',
            type: 'POST',
            data: { selectedCountryId: selectedCountry},
            success: function (data) {
                $('#gridcontent').html(data);
            }
        });

    });

步骤1：打开一个页面，从_PersonGrid加载我正在努力的所有人员列表 - 使用ajax调用部分视图而不是加载来在页面上加载此数据（div gridcontent）整个页面。我探索了那个文件。已经不会局部工作了。我不知道如何使用ajax调用Partial View将数据加载到div gridcontent中。

第2步：选择国家/地区名称以获取人员列表（Ajax POST工作正常）

Answer 1

我认为你可以在#gridcontent中调用renderAction。您将获得更好的性能和更好的兼容性来创建整个视图服务器端，而不是在您的情况下调用客户端的其余视图。（如果您的解释已完成）

所以，我不测试它，但尝试类似：

 <div id="insidecontent">
     <div id="gridcontent">@{ Html.renderAction("Index","Home"); }</div>
 </div>

并删除您的脚本：      

    // Here not firing event.
$(document).ready(function () {
  alert('Loading Page');
  $.ajax({
    url: '@Url.Action("Index", "Home")',
    type: 'GET',
    success: function (data) {
        alert(data);
        $('#gridcontent').html(data);
    }
});

}）;

更新

的HomeController

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

        return View();
    }

    public ActionResult GetPersonTable()
    {
        List<Person> persons = new List<Person>();
        for (int i = 0; i < 99; i++)
        {
            persons.Add(new Person(i,"Desc "+i,"depart "+i)); 
        }            

        return PartialView("_PersonGrid", persons);
    }
}

_PersonGrid

@model IEnumerable<MvcApplication.Models.Person>
@{
    ViewBag.Title = "_PersonGrid";
    var grid = new WebGrid(Model, defaultSort: "Id", rowsPerPage: 10, canSort: false);
}

<h2>_PersonGrid</h2>

@if(Model!=null)
{
    @grid.GetHtml("grid",null,null,null,null,null,null,true,false,null,grid.Columns(
    grid.Column("Id","Person ID"),
    grid.Column("Description","Name"),
    grid.Column("Department","Department Name")));
}

索引之家

@{
    ViewBag.Title = "Home Page";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            @{ Html.RenderAction("GetPersonTable"); }
        </div>
    </section>
}
<h3>We suggest the following:</h3>
<ol class="round">
    <li class="one">
        <h5>Getting Started</h5>
        ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
        enables a clean separation of concerns and that gives you full control over markup
        for enjoyable, agile development. ASP.NET MVC includes many features that enable
        fast, TDD-friendly development for creating sophisticated applications that use
        the latest web standards.
        <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn more…</a>
    </li>
[...]

图像

You can download here the project

分页工作也是如此。

我希望你能希望