Question

我是ASP.Net的新手，我正试图找出部分观点。我试图在部分视图中加载一些非常简单的数据并且没有任何运气。我有以下内容，除了加载按钮外，其中的所有内容都有效：

Index.cshtml

@model IEnumerable<MMC_ASP.Models.MMCProjectViewModel>

@{
    ViewBag.Title = "MMCView";
}

<h2>Active Projects</h2>

<div class="project-list">
    @foreach (var item in Model)
    {
        <div class="mig-project @item.ColorClass">
            <div>
                <div class="client-name">@item.Client</div>
                <div class="source-target">@item.SourceTarget</div>
                <div class="server-name">@item.ServerName</div>
                <div class="error-count">@item.ErrorCount</div>
            </div>
        </div>
    }
</div>

<div id="partial"></div>

<input type="button" id="btn" value="Click for Data" />

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            $('#partial').load('/MMC/LoadPartialView');
        });
    });
</script>

MMCController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MMC_ASP.Controllers
{
    public class MMCController : Controller
    {

        public ActionResult Index()
        {
            Models.MMCProjectViewModel Project1 = new Models.MMCProjectViewModel() { Client = "Test Client1", SourceTarget = "Source to Target", ServerName = "Server1", ErrorCount = 3, ColorClass = "yellow" };
            Models.MMCProjectViewModel Project2 = new Models.MMCProjectViewModel() { Client = "Test Client2", SourceTarget = "Source to Target", ServerName = "Server2", ErrorCount = 1, ColorClass = "red" };
            Models.MMCProjectViewModel Project3 = new Models.MMCProjectViewModel() { Client = "Test Client3", SourceTarget = "Source to Target", ServerName = "Server3", ErrorCount = 0, ColorClass = "green" };
            Models.MMCProjectViewModel Project4 = new Models.MMCProjectViewModel() { Client = "Test Client4", SourceTarget = "Source to Target", ServerName = "Server4", ErrorCount = 2, ColorClass = "green" };
            Models.MMCProjectViewModel Project5 = new Models.MMCProjectViewModel() { Client = "Test Client5", SourceTarget = "Source to Target", ServerName = "Server5", ErrorCount = 1, ColorClass = "red" };

            List<Models.MMCProjectViewModel> ProjectList = new List<Models.MMCProjectViewModel>();
            ProjectList.Add(Project1);
            ProjectList.Add(Project2);
            ProjectList.Add(Project3);
            ProjectList.Add(Project4);
            ProjectList.Add(Project5);

            return View(ProjectList.OrderBy(o => o.Client).ToList());
        }

        public ActionResult LoadPartialView()
        {
            return PartialView();
        }
    }
}

LoadPartialView.cshtml

<div>TEST DATA HERE</div>

当我点击＆＃34;点击数据＆＃34时，没有任何反应;按钮。我错过了什么？为了记录，我确实意识到我应该将脚本分成一个单独的文件，并且Index操作的工作将以不同的方式完成。这是我的理念证明，以确保我理解所有的部分，我相信这是最后一个使这项工作。

Answer 1

您的代码看起来很好。我非常强烈地感觉您的代码无法更新部分视图，因为您在尝试进行ajax调用时遇到 404 Not Found 错误。

最好利用像Url.Action这样的HTML帮助程序方法为动作方法生成正确的URL。您可以在剃刀视图中执行Url.Action方法，并将该输出（url）保存在按钮上的html 5数据属性中。

<input type="button" id="btn" data-url="@Url.Action("LoadPartialView","MMC")"
                                                                 value="Click for Data" />

现在发生点击事件时，请读取数据属性值并使用它来进行ajax调用。

$(function () {

    $('#btn').click(function (e) {
        e.preventDefault();
        $('#partial').load($(this).data("url"));
    });

});

Answer 2

感谢@sleeyuen，@Shyju和@maccettura的大力帮助，我得到了它的帮助。我需要将这个添加到@ {ViewBag.Title ...}区域下面的视图中：

@section scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btn').click(function (e) {
                $('#partial').load($(this).data("url"));
            });
        });
    </script>
    }

并且Ajax.BeginForm方法不起作用，因为我的项目不包含jquery.unobtrusive-ajax.js。希望这有助于其他人。

简单的ASP.NET PartialView问题

2 个答案: